Navigation component – Bottom navigation bar

In this chapter of the Jetpack Navigation Component tutorial we are going to talk about how we can use bottom navigation bar to navigate in our app.

This chapter will cover how to add a bottom navigation bar to the app. It means, we will create the menu items, and use the defined destinations, which are already available in the navigation graph.

Then, as an extra, we will check how we can open a fragment, where we don’t need the bottom navigation.

So let’s start coding. 😎

GitHub

For this chapter, we have prepared a starter project, what you can download from GitHub using the below link.

GitHub – bottom_navigation_starter branch

After the download open Android Studio. From the File menu select the Open option, then navigate to the folder where you have the downloaded project. Click OK and update the necessery plugins and the gradle.

This starter project contains the 5 fragments, some actions and attributes, but it doesn’t contain the Navigation drawer, nor the ViewModels and the RecyclerView.

Bottom Navigation

BottomNavigationView creates bottom navigation bars, making it easy to explore and switch between top-level content views with a single tap.

This pattern can be used when you have between 3 and 5 top-level destinations to navigate to.

The app

Step 1 – Create the menu

The first step in this chapter will be the creation of the menu. This menu will be visible as the icons on the bottom navigation bar. The menu stores the IDs, texts and icons inside of the res folder.

In the res folder the xml file has to be created in a folder called menu. Still we don’t have this folder, so let’s create it.

First, click on the res folder with the right mouse button. Then from the poped up menu select New, then the Directory option. In the window name the new folder as menu.

Second, click again with the right mouse button on the newly created menu folder. Then New, and in this case select the Menu ressource file option. The name of the xml file will be menu_bottom_nav.

Third, switch to the split or code view, because we will create the items using the xml code. You can open these views by using the first and the second icon from the top right corner.

In the code view paste the below code.

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/fragment_1"
        android:icon="@drawable/ic_location"
        android:title="Fragment 1"/>
    <item
        android:id="@+id/fragment_2"
        android:icon="@drawable/ic_note"
        android:title="Fragment 2"/>
    <item
        android:id="@+id/fragment_3"
        android:icon="@drawable/ic_person"
        android:title="Fragment 3"/>
    <item
        android:id="@+id/fragment_4"
        android:icon="@drawable/ic_settings"
        android:title="Fragment 4"/>

</menu>

The menu items

Because we haven’t created the icons yet, you should have 4 errors. In the next step we gonna fix these errors by creating the missing icons, but before read the below note.

Step 2 – Create the icons

Next, I gonna show you, how you can create an icon in one example. Then you can create the rest in the same way. So click on the res -> drawable folder with the right mouse button, then select New and Vector asset. In the popup window name the asset as “ic_location”. Thenafter click on the icon in the row of the Clip Art. From the popup window select an icon and click on the OK button. The rest can stay the default one. So click on the Next, then on the Finish button.

Similarly create 3 more icons using the rest of the above mentioned names.

Step 3 – Setup the BottomNavigationView

In this step, we are going to add the BottomNavigationView to the activity_main.xml file. The BottomNavigationView is an implementation of material design bottom navigation.

Extend the activity_main.xml file

Now, open activity_main.xml file from the res->layout folders.

Inside of the xml file, you should have already a view. This included layout contains the AppBar, the Toolbar and the fragment.

After the app_bar_with_fragment layout, paste the below code.

<com.google.android.material.bottomnavigation.BottomNavigationView
	android:id="@+id/bottom_nav"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_constraintBottom_toBottomOf="parent"
	app:menu="@menu/menu_bottom_nav"
	app:itemIconTint="@color/colorPrimaryDark"
	app:itemTextColor="@color/colorPrimaryDark"
	android:elevation="6dp"
	android:background="@color/colorPrimary"/>

BottomNavigationView

Extend the MainActivity class

Next, we are going to add the bottom navigation and the toolbar to the MainActivity::class. So, open the class from the java and the folder of the package.

Variables

First, we will create a variable, where we will specify the top-level fragments. It means in practice, when you navigate away to a non top level fragment, then on the Toolbar a back button will be visible. When you click on it, then this fragment will be deleted from the back stack. You can open it again, for example by clicking on a button. We will talk about this topic a bit later.

So, copy and paste the below code into MainActivity::class, before the onCreate() method.

private val appBarConfiguration by lazy {
    AppBarConfiguration(
        setOf(
            R.id.fragment_1,
            R.id.fragment_2,
            R.id.fragment_3,
            R.id.fragment_4
        )
    )
}

appBarConfiguration 

Second step is to create one more variable, which will be an instance of NavController. Navigating to a destination is done using a NavController, which is an object that manages app navigation within a NavHost. Each NavHost has its own corresponding NavController. 

So again as before, copy and paste the below variable into MainActivity::class, before the onCreate() method.

private lateinit var navController: NavController

The initializations

Third step is to init and use the created member variables, which will happen inside of the onCreate() method.

Paste the below code into the onCreate() method, after setContentView() method’s call.

// 1
val toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)

// 2
navController = Navigation.findNavController(this, R.id.container)

// 3
bottom_nav.setupWithNavController(navController)

// 4
NavigationUI.setupWithNavController(toolbar, navController, appBarConfiguration)

onCreate()

1. 1. 1. 1. Initialization of the Toolbar.
         2. Getting the Navigation Controller
         3. Setting the navigation controller to Bottom Nav
         4. Setting up the action bar

Run the app

Finally, it’s time to test the app. Frist of all, test the basic functionality of the bottom navigation bar. Then, pass data from the fragment_1 to the fragment_2, it is still working.

Now go to the fragment_4. There the button won’t do anything, because still we haven’t implemented there anything. We gonna do it in the next step.

Step 4 – Navigate to fragment_5

Next we gonna add a navigation to the fragment_5 from fragment_4. Do you remember how we can do it using Navigation Component?

Create action

First, we have to create an action inside of the navigation graph between the above mention 2 fragments. So, open the the navgiation_graph.xml file from the res -> navigtation folders.

Inside of the xml file, in split or desing mode, select fragment_4. Then click on the blue circle at the right side of the fragment’s rectangle, and drag it to fragment_5, then drop it there. As a result, we got an action between the fragments.

After that we have to rebuild the project, otherwise the destination won’t be available in the Kotlin code. So, click in the top menubar on the Build menu, then select the Rebuild Project option.

Add the click listener

Next, we have to add the click listener inside of the Fragment_4::class. So, open it from the fragment package and paste the below code after the onCreateView() method.

// 1
override fun onViewCreated(view: View, savedInstanceState: Bundle?)
{
    super.onViewCreated(view, savedInstanceState)
	
    // 2
    btn_fragment_4.setOnClickListener {
        // 3
        findNavController().navigate(R.id.action_fragment_4_to_fragment_5)
    }
}

onViewCreated()

1. 1. 1. 1. As you can see, like before, we gonna implement the click listener inside of the onViewCreated() method.
         2. The click listener of the button
         3. You can retrieve a NavController by using the findNavController() method. The ID comes from the navigation graph.

Run the app

Run again the app and navigate to the fragment_4. Then click on the button. Because the fragment_5 is not a top-level fragment, a back arrow will be visible on the Toolbar. If you click on it, then you will jump back to the fragment_4. But we have a problem, because the bottom navigation bar is visible on the fragment_5 also. We don’t need it there.

Step 5 – Remove temporarily the bottom navigation

There are several possibilities to hide the bottom navigation bar from particular fragments. In our case, we will add some code to the MainActivity::class, because we have initialized there the bottom navigation bar.

So open the class and paste the below 2 functions after the onCreate() method. These methods will show and hide the bottom bar.

private fun showBottomNav() 
{
    bottom_nav.visibility = View.VISIBLE
}

private fun hideBottomNav() 
{
    bottom_nav.visibility = View.GONE
}

showBottomNav() + hideBottomNav()

Next, we have to figure out which destination is currently open in the app. Luckily, we can use the destination change listener lambda of NavController. This listener determines the destinations, what we can use. If the ID of the destination is equal to fragment_5, then the bottom navigation bar should be hidden, otherwise shown. 

So, copy and paste the below code at the end of the onCreate() mehtod inside of the MainActivity::class.

navController.addOnDestinationChangedListener { _, destination, _ ->
    when (destination.id)
    {
        R.id.fragment_5 -> hideBottomNav()
        else -> showBottomNav()
    }
}

showBottomNav() + hideBottomNav()

Run the app

Run the app one last time. First, navigate to the fragment_4, then to the fragment_5. As a result, the bottom bar won’t be visible anymore. If you press the back button, then it will be there again.

GitHub

The source code is available on GitHub

GitHub – bottom_navigation_final branch

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

Follow and like us: