Bottom navigation: NavigationUI.setupActionBarWithNavController() not working for fragment exchanging

Question

Background: (can be ignored if you don't wanna know how I got the problem. Just some question about Android Studio template activity)

I have been working on a bottom navigation and tried to copy the code of MainActivity.java from Android Studio defaultly created template of Bottom Navigation Activity.



Also I've found the documentation of this UI from Android Studio. Bottom Navigation
Basically, the main code in MainActivity should be like this for calling interaction of bottom navigation:

    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
            R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
            .build();
    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
    NavigationUI.setupWithNavController(navView, navController);

My Problem:
My xml of bottom navigation works perfect. But I just found the NavigationUI.setupActionBarWithNavController() and NavigationUI.setupWithNavController() are not working. My app just flashed and stopped whenever I run it. Kinda weird but I believe these two methods are the official usage of bottom navigation.

HomePage.xml

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#267A9E"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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


<fragment
    android:id="@+id/frag_container"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="612dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toBottomOf="@id/bottom_navi"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navi"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_navigation" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="53dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="#4a90c9"
    app:layout_constraintBottom_toTopOf="@+id/bottom_navi"
    app:layout_constraintEnd_toEndOf="parent"
    app:srcCompat="@drawable/plus" />


</androidx.constraintlayout.widget.ConstraintLayout>

---

SOLUTION:
Now i'm using a traditional way (set click listener) to implement this navigation properly. It's old fashion but very flexible as I have my personized toolbar and side menu.

  bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
       @Override
       public boolean onNavigationItemSelected(@NonNull MenuItem item) {
           navController= Navigation.findNavController(HomeActivity.this, R.id.frag_container);
            switch (item.getItemId()) {
               case R.id.bottom_navi_intake:
                   navController.navigate(R.id.action_WeightFragment_to_IntakeFragment);
                   break;
               case R.id.bottom_navi_weight:
                   navController.navigate(R.id.action_IntakeFragment_to_WeightFragment);
                   break;
           }
           return true;
       }
   });

R.id.action_... are the action id in
@navigation/nav.graph.xml:

<?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/nav_graph"
app:startDestination="@id/bottom_navi_intake">

<fragment
    android:id="@+id/bottom_navi_intake"
    android:name="com.example.dietdiary.IntakeFragment"
    android:label="@string/first_fragment_label"
    tools:layout="@layout/fragment_intake">

    <action
        android:id="@+id/action_IntakeFragment_to_WeightFragment"
        app:destination="@id/bottom_navi_weight" />
</fragment>
<fragment
    android:id="@+id/bottom_navi_weight"
    android:name="com.example.dietdiary.WeightFragment"
    android:label="@string/second_fragment_label"
    tools:layout="@layout/fragment_weight">

    <action
        android:id="@+id/action_WeightFragment_to_IntakeFragment"
        app:destination="@id/bottom_navi_intake" />
</fragment>

My final screenshot for your reference:

Answer 1

Can you check do you have same id for menu.xml and mobile_navigation.xml for the item. in my case there was different id name for the item making cause.

Answer 2

ids should be same in both menu.xml and fragments of navigation_graph.xml,

below is my menu.xml file

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:id="@+id/home_frag"
      android:icon="@drawable/ic_group_home"
      android:title="@string/title_home" />
   <item
       android:id="@+id/all_game_frag"
       android:icon="@drawable/ic_group_game"
       android:title="@string/title_All_Games" />
</menu>

below is my navigation_graph.xml file

<?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/home_frag">

    <fragment
       android:id="@+id/home_frag"
       android:name="com.legendmame.dinoemulator.classic.ui.home.HomeFragment"
       android:label="@string/title_home"
       tools:layout="@layout/fragment_home" />

   <fragment
      android:id="@+id/all_game_frag"
      android:name="com.legendmame.dinoemulator.classic.ui.allgames.AllGames"
      android:label="@string/title_notifications"
      tools:layout="@layout/fragment_notifications" />
 </navigation>

Answer 3

Hello @Helen let me work you out the right way of using Bottom Navigation using Architectural Component.

Below is the Menu layout file called bottom_nav_menu

 <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home"
        android:menuCategory="secondary"/>
    <item
        android:id="@+id/dashboardFragment"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="Dashboard"
        android:menuCategory="secondary"/>

The below two items Home and Dashboard will be displayed in the bottom navigation.

Now let's work on the main activity

<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"
    android:background="@android:color/white"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu"
        android:background="#fff"/>
</androidx.constraintlayout.widget.ConstraintLayout>

In main activity: fragment will host the two fragment, the BottomNavigationView will access the menu bottom_nav_menu then you can create the two Fragment one is called HomeFragment and second is DashboardFragment both with layout called fragment_home and fragment_dashboard.

It is time to create the navGraph

<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/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"

  android:name="raum.muchbeer.bottomnavigationstackoverflow.fragment.HomeFragment"
        android:label="Fragment Home"
        tools:layout="@layout/fragment_home" >

    </fragment>
    <fragment
        android:id="@+id/dashboardFragment"

 android:name="raum.muchbeer.bottomnavigationstackoverflow.fragment.DashboardFragment"
        android:label="Fragment Dashboard"
        tools:layout="@layout/fragment_dashboard" />
</navigation>

The navGraph implement the two fragments HomeFragment and DashboardFragment and please note id's for the two fragments i.e homeFragment and dashboardFragment must be the same exactly with the id's you set in the bottom_nav_menu files . If you don't do that then you will not be able to navigate through out the two fragment.

Now let us finish the mainactivity, kindly add the below code in onCreate

BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNav);

NavController navController = Navigation.findNavController(this, 
R.id.nav_host_fragment);

NavigationUI.setupWithNavController(bottomNavigationView, navController);

NavigationUI.setupActionBarWithNavController(this, navController);

Then you done and good to go. Please see github here for your reference.

Happy Coding!!!

Answer 4

I had the same Error,I resolved it by Creating my Own Toolbar and then setting it to the the Support Action Bar as follows.

Initially,Get the toolbar with findviewbyid or by using databinding and assign it to a variable.Here I had set it to the variable toolbar and then further used it.

setSupportActionBar(toolbar)

And then We have to add it to the appbarconfiguraion as follows.

toolbar.setupWithNavController(navController, appBarConfiguration)

This error might happen due to an unestablished connection between Toolbar and the Navigation Views .

Hope this helps.