Implementing Android Jetpack Navigation component with the new Android BottomAppBar

Question

I am trying to implement Jetpack Navigation with the new Android Bottom App Bar in my main activity but it is not working as it should be.

I've read the notes on navigation and doesn't seem to find any way to integrate navigation jetpack into the new bottom app bar. I've tried to do it my way as follows:

<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary"
            app:fabAlignmentMode="center"
            app:fabAttached="true"
            app:navigationIcon="@drawable/baseline_menu_white_24"/>


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/baseline_add_white_24"
            app:layout_anchor="@id/bottom_app_bar" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

The Navigation file is:

<navigation
    android:id="@+id/navigation_graph.xml"
    app:startDestination="@id/fragmentStart">

    <fragment
        android:id="@+id/fragmentStart"
        android:name="com.FragmentStart">
        <action
            android:id="@+id/goToFragment"
            app:destination="@id/fragmentToGoTo" />
    </fragment>
    <fragment
        android:id="@+id/fragmentToGoTo"
        android:name="com.FragmentToGoTo"
        />
</navigation>

Then on my activity i use:

    val navController = Navigation.findNavController(this, R.id.navigation_fragment)
    myBottomBar.replaceMenu(R.menu.menu_with_nav_item)

    myBottomBar.setupWithNavController(navController)
    //or I've also tried
    //NavigationUI.setupWithNavController(myBottomBar, navController, null)

What happens is that when clicking on the menu item, the navigation does not trigger and from what I've read, if the menu entry has the same id as the fragment in navigation graph, it should work directly.

Can you please help by giving a link or some code on how to make this work?

The menu has only one item: My issue is with the navigation. I want to use the navigation jetpack to navigate between my fragments in the bottom app bar and i cant figure a way out to do it — Mervin Hemaraju, May 22 '19 at 17:13

score 2 · Answer 1 · answered May 22 '19 at 17:08

2

setupWithNavController on a Toolbar (or subclasses like BottomAppBar) only set up the Up icon and the title - they do not hook up menu items added to the Toolbar.

As per the Tie destinations to menu items documentation, you must set up your own listener and call onNavDestinationSelected(). For a BottomAppBar, that would be done by setting a Toolbar.OnMenuItemClickListener:

val navController = Navigation.findNavController(this, R.id.navigation_fragment)
myBottomBar.replaceMenu(R.menu.menu_with_nav_item)

myBottomBar.setupWithNavController(navController)

// Connect MenuItems to the NavController
myBottomBar.setOnMenuItemClickListener {  menuItem ->
    menuItem.onNavDestinationSelected(navController)
}

answered May 22 '19 at 17:08

ianhanniballake

191,609
30
470
443

I will test this and revert back to this answer soon. Many thanks for your answer. Appreciate it! – Mervin Hemaraju May 22 '19 at 17:23
When i insert the following code and run the app, the hamburger icon disappears on the bottomAppBar and therefore cannot access the menu... Can you help please ? – Mervin Hemaraju May 23 '19 at 15:21
I actually want to use Android Jetpack navigation to navigate between fragments instead of using BottomSheetDialogFragment on the BottomAppBar ... – Mervin Hemaraju May 23 '19 at 20:02
There's no requirement that you use any of the `setupWithNavController` methods if they aren't doing what you want (i.e., always having a drawer icon). – ianhanniballake May 23 '19 at 20:31
@ianhanniballake when I use this code the bottom bar auto show home button when select other item menus. How can I disable this behavior? – Công Hải Aug 19 '20 at 02:06

Implementing Android Jetpack Navigation component with the new Android BottomAppBar

1 Answers1