Android Setup BottomNavigationView With Jetpack Navigation UI (Kotlin)

September 29, 2019

Support Appbar/Toolbar which is hidden upon content scroll

Navigated correctly
Highlight correct button
Handles back-stack
Automates fragment transactions
Handles transition animations

Dependencies

dependencies {
  def material_version = "1.0.0"
  def nav_version = "2.1.0"

  // Material
  implementation "com.google.android.material:material:$material_version"

  // Navigation
  implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
  implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

Java 1.8 Configuration

Edit Module:app build.gradle.

android {
    ...

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

    <application ...
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <!-- Theme.MaterialComponents.Light.DarkActionBar -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Activity

res/layout/main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_above="@+id/bottomNavView">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </com.google.android.material.appbar.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <fragment
                android:id="@+id/nav_host_fragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:navGraph="@navigation/mobile_navigation" />
        </FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav" />

</RelativeLayout>

NOTE: Refer AppBarLayout With BottomNavigationView: Hide Toolbar on Scroll With Fixed BottomNavigationView.

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main)
        setSupportActionBar(toolbar)

        val navController = findNavController(R.id.nav_host_fragment)

        val bottomNavDestinationIds = setOf(
            R.id.navigate_home, R.id.navigate_collection, R.id.navigate_profile
        )
        val appBarConfig = AppBarConfiguration(bottomNavDestinationIds)
        setupActionBarWithNavController(navController, appBarConfig)

        bottomNavView.setupWithNavController(navController)

        // make sure appbar/toolbar is not hidden upon fragment switch
        navController.addOnDestinationChangedListener { controller, destination, arguments ->
            if (destination.id in bottomNavDestinationIds) {
                appBarLayout.setExpanded(true, true)
            }
        }
    }
}

Fragments

We are going to create 3 fragments to demonstrate BottomNavigationView

HomeFragment (with scrolling content)
CollectionFragment
ProfileFragment

HomeFragment

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.home, container, false)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.HomeFragment">


    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/longTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/long_text"/>

    </androidx.core.widget.NestedScrollView>

</FrameLayout>

NOTE: NestedScrollView to demonstrate scrolling behaviour on appbar/toolbar.

CollectionFragment

class CollectionFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.collection, container, false)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.CollectionFragmemt">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Collection"
        />

</FrameLayout>

ProfileFragment

class ProfileFragmemt : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.profile, container, false)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.ProfileFragmemt">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Profile"
        />
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@id/navigate_home">

    <fragment
        android:id="@+id/navigate_home"
        android:name="com.luasoftware.bottomnavigationexample.view.HomeFragment"
        android:label="Home"
        tools:layout="@layout/home" />
    <fragment
        android:id="@+id/navigate_collection"
        android:name="com.luasoftware.bottomnavigationexample.view.CollectionFragment"
        android:label="Collection"
        tools:layout="@layout/collection" />
    <fragment
        android:id="@+id/navigate_profile"
        android:name="com.luasoftware.bottomnavigationexample.view.ProfileFragmemt"
        android:label="Profile"
        tools:layout="@layout/profile" />
</navigation>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@id/navigate_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/home" />

    <item
        android:id="@id/navigate_collection"
        android:icon="@drawable/ic_collections_black_24dp"
        android:title="@string/collection" />

    <item
        android:id="@id/navigate_profile"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="@string/profile" />
</menu>

References:

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now