Using Android Jetpack Navigation component with 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:

I am using an Activity with 4 fragments inside to navigate within the Bottom App Bar's Navigation Drawer.

The expected output should be when i click on this:

Menu Icon

it should open a drawer like this:

Bottom Drawer Navigation

And i should be able to navigate between fragments.

However, when i use the following codes below

activity_home.xml

<layout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

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

        <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:fabAlignmentMode="center"
                    app:navigationIcon="@drawable/ic_menu_dark"
                    app:menu="@menu/bottomappbar_main_menu"/>


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

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

The Navigation File is:

bottomappbar_navigation.xml

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/bottomappbar_navigation" app:startDestination="@id/fragmentGoals">

    <fragment
            android:id="@+id/fragmentGoals"
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentGoals"
            android:label="FragmentGoals"/>

    <fragment
            android:id="@+id/fragmentToDo" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentToDo"
            android:label="FragmentToDo"/>
    <fragment
            android:id="@+id/fragmentToBuy" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentToBuy"
            android:label="FragmentToBuy"/>
    <fragment
            android:id="@+id/fragmentStatistics" 
            android:name="com.th3pl4gu3.lifestyle.ui.FragmentStatistics"
            android:label="FragmentStatistics"/>
</navigation>

bottomappbar_drawer_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item
                android:id="@+id/fragmentGoals"
                android:icon="@drawable/ic_add_black"
                android:title="Goals"/>

        <item
                android:id="@+id/fragmentToDo"
                android:icon="@drawable/ic_add_black"
                android:title="To Do"/>

        <item
                android:id="@+id/fragmentToBuy"
                android:icon="@drawable/ic_add_black"
                android:title="To Buy"/>

        <item
                android:id="@+id/fragmentStatistics"
                android:icon="@drawable/ic_add_black"
                android:title="Statistics"/>
    </group>
</menu>

bottomappbar_main_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/search"
          android:title="Search"
          android:icon="@drawable/ic_search_black"
          app:showAsAction="always"
          android:tooltipText="Search" />

</menu>

Then inside my ActivityHome.kt:

class ActivityHome : AppCompatActivity() {

    private lateinit var mBinding: ActivityHomeBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_home)

        setSupportActionBar(mBinding.bottomAppBar)

        val navController = Navigation.findNavController(this, R.id.myNavHostFragment)

        mBinding.bottomAppBar.setupWithNavController(navController)

        mBinding.bottomAppBar.setOnMenuItemClickListener {  menuItem ->
            menuItem.onNavDestinationSelected(navController)
        }
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater = menuInflater
        inflater.inflate(R.menu.bottomappbar_main_menu, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when(item?.itemId){
            R.id.search -> {Toast.makeText(this, "Search clicked!", Toast.LENGTH_SHORT).show()}
        }

        return true
    }

}

What happens is that the menu icon disappears on the Bottom App Bar as show here:

Output

I think i am not using the Jetpack Navigation correctly.

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

Answer 1

Change your activity and layout as below

MainActivity

class MainActivity : AppCompatActivity() {
   private lateinit var mBinding: ActivityHomeBinding

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      mBinding = DataBindingUtil.setContentView(this, R.layout.activity_home)

      val navController = Navigation.findNavController(this, R.id.navFragment)
      mBinding.navigationView.setupWithNavController(navController)

      setSupportActionBar(mBinding.bottomAppBar)

      if (mBinding.navigationView.isShown) {
          mBinding.navigationView.visibility = View.VISIBLE
      } else {
          mBinding.navigationView.visibility = View.GONE
      }

  }

  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
      val inflater = menuInflater
      inflater.inflate(R.menu.bottomappbar_main_menu, menu)
      return true
  }

  override fun onOptionsItemSelected(item: MenuItem?): Boolean {
      when(item?.itemId){
          android.R.id.home -> {
              Log.e("TAG", "Visbility>>>> ${mBinding.navigationView.isShown}")
              if (!mBinding.navigationView.isShown) {
                  mBinding.navigationView.visibility = View.VISIBLE
              } else {
                  mBinding.navigationView.visibility = View.GONE
              }
          }
          R.id.search -> {
              Toast.makeText(this, "Search clicked!", Toast.LENGTH_SHORT).show()
          }
      }

      return true
  }

}

activity_home.xml

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <fragment
                    android:id="@+id/navFragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:defaultNavHost="true"
                    app:navGraph="@navigation/nav_graph"
                    android:layout_marginBottom="60dp"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


        <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:fabAlignmentMode="center"
                style="@style/Widget.MaterialComponents.BottomAppBar"
                app:menu="@menu/bottomappbar_main_menu"
                android:backgroundTint="@color/colorPrimaryDark"
                app:navigationIcon="@drawable/ic_menu_dark"/>


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

        <com.google.android.material.navigation.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_anchor="@id/bottom_app_bar"
                android:background="@android:color/white"
                android:layout_gravity="start"
                app:menu="@menu/bottomappbar_drawer_menu"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</RelativeLayout>