CODEWITHSUNDEEP
androidkotlinandroid-jetpackandroid-architecture-navigationandroid-bottomappbar
Mervin Hemaraju
Mervin Hemaraju

Reputation: 2187

Implementing Android Jetpack Navigation component with the new Android BottomAppBar

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?

Upvotes: 1

Views: 1176

Answers (1)

ianhanniballake
ianhanniballake

Reputation: 200110

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)
}

Upvotes: 2

Related Questions