Android Navigation Drawer with Bottom Navigation

Generally we use navigation drawer or bottom navigation in our apps to provide user a easier way to access our app content.

Now lets try to club both navigation drawer and bottom navigation together and see how the things work.

When a new project is being created we can choose a navigation drawer activity and get the default code for drawer as

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

Now add Bottom Navigation to the content_main.xml file

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

With the help of a navigation host fragment we can access both the navigation’s

Initialize a drawer layout

val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)

Navigation drawer

val navView: NavigationView = findViewById(R.id.nav_view)

Bottom navigation

val navBottomView : BottomNavigationView = findViewById(R.id.bottom_navigation_view)

Declare the fragment’s to be used for the navigation’s

AppBarConfiguration(setOf(
        R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,R.id.nav_dashboard,R.id.nav_notifications), drawerLayout)
setupActionBarWithNavController(navController, appBarConfiguration)

Setup navigation controllers for both the views

Navigation drawer

navView.setupWithNavController(navController)

Bottom Navigation

navBottomView.setupWithNavController(navController)

Now activate navigation drawer

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}

For full detailed documentation of tutorial may visit

http://www.androidcoding.in/2020/05/21/android-bottom-navigation-and-navigation-drawer-part-1/