How to use Navigation Drawer and Bottom Navigation simultaneously - Navigation Architecture Component

Question

I have screen like below which contain a navigation drawer and bottom navigation on same screen:

I am using Jetpack Navigation Architecture Component.

Current issue and What I have tried?

Clicking on the 2nd and 3rd bottom nav item shows back arrow on toolbar?

Tried: setting fragments associated with 2nd and 3rd bottom nav to top level destinations

appBarConfig = AppBarConfiguration(setOf(R.layout.fragment_star, R.layout.fragment_stats, R.layout.fragment_user))

instead of

appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)

Did not worked.

Any help highly appreciated!

My code look like below.

activity_main.xml

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

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            <fragment
                android:id="@+id/navHostFragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                app:defaultNavHost="true"
                app:navGraph="@navigation/nav_graph" />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNav"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="?android:attr/windowBackground"
                app:menu="@menu/menu_bottom" />

        </LinearLayout>

        <!-- gives navDrawer material look-->
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/nav_drawer_menu"
            app:headerLayout="@layout/nav_header"
            android:fitsSystemWindows="true"
            />
    </androidx.drawerlayout.widget.DrawerLayout>
</layout>

menu_bottom.xml

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

    <item
        android:id="@+id/starFragment"
        android:icon="@drawable/ic_star_green_48dp"
        android:title="@string/bottom_nav_title_star"/>

    <item
        android:id="@+id/statsFragment"
        android:icon="@drawable/ic_stats_green_48dp"
        android:title="@string/bottom_nav_title_stats"/>

    <item
        android:id="@+id/userFragment"
        android:icon="@drawable/ic_user_green_48dp"
        android:title="@string/bottom_nav_title_user"/>

</menu>

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

    <fragment
        android:id="@+id/starFragment"
        android:name="com.example.app.ui.StarrFragment"
        android:label="Star"
        tools:layout="@layout/fragment_star">
    </fragment>
    <fragment
        android:id="@+id/statsFragment"
        android:name="com.example.app.StatsFragment"
        android:label="fragment_stats"
        tools:layout="@layout/fragment_stats" />
    <fragment
        android:id="@+id/userFragment"
        android:name="com.example.app.UserFragment"
        android:label="fragment_user"
        tools:layout="@layout/fragment_user" />
</navigation>

ActivityMain.kt

class MainActivity : AppCompatActivity() {

    private lateinit var drawerLayout: DrawerLayout
    private lateinit var appBarConfig: AppBarConfiguration
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        setSupportActionBar(toolbar)

        drawerLayout = binding.drawerLayout
        navController = this.findNavController(R.id.navHostFragment)

        binding.bottomNav.setupWithNavController(navController)

        NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
        appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)


        // lock drawer when not in start destination
        navController.addOnDestinationChangedListener { nc, nd, _ ->

            if(nd.id == nc.graph.startDestination){
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
            }
            else{
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
            }
        }

         NavigationUI.setupWithNavController(binding.navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {

        // replace navigation up button with nav drawer button when on start destination
        return NavigationUI.navigateUp(navController, appBarConfig)

    }
}

The answer depends on whether the bottom nav tabs need to retain their own stack, or not. — EpicPandaForce, May 13 '19 at 10:00
since bottom nav shows higher level destinations, its better to maintain multiple backstacks — user158, May 13 '19 at 10:52
Well if the designer didn't ask for it, I totally wouldn't do it :D — EpicPandaForce, May 13 '19 at 11:32
Ah, that's when I tend to say "you need to use this hack: https://github.com/googlesamples/android-architecture-components/blob/ebc0f3f0e5089f7ec9c9bee007f19eca68cd8b65/NavigationAdvancedSample/app/src/main/java/com/example/android/navigationadvancedsample/NavigationExtensions.kt#L35-L249 and good luck" — EpicPandaForce, May 13 '19 at 17:13
@ShivamKumar I removed nav drawer and added extra options to more item in bottom nav. read [this](https://ux.stackexchange.com/a/125629/119242) to understand what I mean. I did not tried Adithya's answer, it may work — user158, Oct 09 '19 at 04:01
I had the same idea and I haven't found a good solution. Some suggests to add a Hamburguer menu far right on the bottomNavigation. Some uses FragmentTransaction to switch between fragments. It is also possible to use Intent to other Activity... What have you found to be a good solution? — Aliton Oliveira, Mar 25 '20 at 01:01

score 32 · Accepted Answer · answered Sep 20 '19 at 06:39

No need of writing separate code to replace the back button with the drawer icon.

In AppBarConfiguration pass the fragment ids (from nav_graph) which you are using to navigate from both bottom navigation & navigation drawer. (P.S fragments and its associated icon should have same ids)

For your case the AppBarConfiguration should look like this :

appBarConfig = AppBarConfiguration.Builder(R.id.starFragment, R.id.statsFragment, R.id.userFragment)
                .setDrawerLayout(drawerLayout)
                .build()

Setup the action bar :

setSupportActionBar(toolbar)
setupActionBarWithNavController(navController, appBarConfig)

Now setup navcontroller for both bottom navigation & navigation view :

navView.setupWithNavController(navController)
bottomNav.setupWithNavController(navController)

onSupportNavigateUp function should should be :

override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(appBarConfig)
    }

Back button press should be handled if drawer is open :

override fun onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }

Bonus

By default when you click bottom navigation icon in the order icon_1 then icon_2 then icon_3 and from there you press back button it will navigate back to home icon that's icon_1

If you want to navigate back in the reverse order in which you have clicked the icons (back stack manner) then add android:menuCategory="secondary" to the item in the menu. So your menu will be like :

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/starFragment"
        android:icon="@drawable/ic_star_green_48dp"
        android:title="@string/bottom_nav_title_star"
        android:menuCategory="secondary"/>
    <item
        android:id="@+id/statsFragment"
        android:icon="@drawable/ic_stats_green_48dp"
        android:title="@string/bottom_nav_title_stats"
        android:menuCategory="secondary"/>
    <item
        android:id="@+id/userFragment"
        android:icon="@drawable/ic_user_green_48dp"
        android:title="@string/bottom_nav_title_user"
        android:menuCategory="secondary"/>
</menu>

Hope the back button icon will be solved now :)

if you have time please prepare repo, so I could check and accept the answer — user158, Oct 21 '19 at 08:46
@user158 you can check my repo [here](https://github.com/Atr07/drawer-with-bottom-navigation-architecture) : https://github.com/Atr07/drawer-with-bottom-navigation-architecture — Atr07, Dec 09 '19 at 13:42

score 2 · Answer 2 · answered Nov 21 '19 at 17:00

2

This project uses DrawerLayout and simulates BottomNavigationView using RadioButtons, this is the way I found to solve the problem

In the Google Codelab navigation project they do what Adithya T Raj mention but it only serves to show the DrawerLayout on landscape and BottomNavigationView on Portrait. The project link:

I try to force them to show me both on this branch but only the DrawerLayout is shown

answered Nov 21 '19 at 17:00

evaldez

21
3

if you are going to eliminate this answer, I ask the moderators to explain the reason, for me this answer responds to the problem posed. – evaldez Nov 21 '19 at 17:02

score 0 · Answer 3 · answered May 13 '19 at 07:13

0

First off all it is not a good design approach. If you want to something like that you should use bottom app bar (not bottom navigation view with navigation drawer)

Here is the guide for you : Article Link

You can easily adapt your app with that.

answered May 13 '19 at 07:13

Halil ÖZCAN

109
4

thanks for reply, I decided to go with bottom nav because of reach-ability.(making thing easy to access (ie: one click from the home screen) – user158 May 13 '19 at 07:35

score 0 · Answer 4 · answered Jun 04 '23 at 08:15

My solution was: Define menu-layout for drawer and bottom menus. Define navigation-layout for the fragments

Setup in onCreate in MainActivity.java:

Setup drawer:

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

    DrawerLayout drawer = binding.drawerLayout;
    NavigationView navigationView = binding.navView;
    mAppBarConfiguration = new AppBarConfiguration.Builder(
            R.id.navigation_m1, R.id.navigation_m2, R.id.navigation_m3, R.id.navigation_about)
            .setOpenableLayout(drawer)
            .build();
    NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
    NavigationUI.setupWithNavController(navigationView, navController);

Setup bottom:

    BottomNavigationView bottomNavigationView = findViewById(R.id.nav_bottom_view);
    NavigationUI.setupWithNavController(bottomNavigationView, navController);

I you want same text and icons make the item equal in drawer and bottom layout.
I you want to refer same fragments, they most have same IDs i drawer and bottom layout files.
To avoid back-arrow on fragments on drawer navigation, you have to setup the IDs in the builder setup.

How to use Navigation Drawer and Bottom Navigation simultaneously - Navigation Architecture Component

4 Answers4

Linked