Android Drawer layout with Navigation Architecture

Hi, Today we will be going through how to make a Drawer layout using Android Navigation Architecture. First things first we will have to add some dependencies for Navigation Architecture. Open your project build.gradle file and add the below line inside dependencies.

dependencies {
    //rest of the code
    classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.3.1"

}

then open your app-level build.gradle and add below line

apply plugin: 'kotlin-kapt'

apply plugin: "androidx.navigation.safeargs"
android {
     //rest of the code
}
dependencies {
//rest of the dependencies
//Android Navigation Architecture
    implementation "androidx.navigation:navigation-fragment-ktx:2.3.1"
    implementation "androidx.navigation:navigation-ui-ktx:2.3.1"

}

after adding the required dependencies sync your project. After successful sync right-click on your res folder then New then Android Resource Directory select navigation from Resource type. Repeat the same process and add menu Resource type. your res folder will look like this.

res

Inside the menu, folder create a new Menu Resource File and name it nav_menu then inside the navigation folder create a new Navigation Resource File and name it nav_graph. Leave them empty for now we will come to them later. After adding both files the res folder will look like this.

Open your activity_main.xml file and add DrawerLayout, Toolbar, Fragment, and a NavigationView now activity_main.xml will look like this.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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">

    <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="wrap_content"
            app:titleTextColor="@color/white"
            android:background="@color/design_default_color_primary"/>

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

    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:menu="@menu/nav_menu"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>

Open your MainActivity.kt and add the below code inside the onCreate method

setSupportActionBar(toolbar)

val navController = Navigation.findNavController(this, R.id.nav_host)
val navView = nav_view
NavigationUI.setupWithNavController(navView, navController)
NavigationUI.setupActionBarWithNavController(this, navController, drawer_layout)

Your onCreate will look like this

MainActivity.kt

Then call a override method inside MainActivity.kt and add below code

override fun onSupportNavigateUp(): Boolean {
    return NavigationUI.navigateUp(
        Navigation.findNavController(this, R.id.nav_host),
        drawer_layout
    )
}

Your MainActivity.kt will look like this

MainActivity.kt

After adding all the required code inside MainActivity.kt create 2 blank Fragments. After creating Fragments open your nav_graph file which we left empty now it’s time to add Fragments in that nav_graph file. Click on the add Fragments button in nav_graph file and add both the Fragments which we created.

nav_graph

Your nav_graph will look like this.

nav_graph

Then open the nav_menu file which we left empty and add 2 menu items.

<item android:title="First Fragment"
    android:id="@+id/firstFragment"/>

<item
    android:title="Second Fragment"
    android:id="@+id/secondFragment"/>

The key here is to give these item the same id which we gave to Fragments inside nav_graph otherwise the Fragments will not load. The nav_menu will look like this.

nav_menu

Now run the app and see the magic. you can see the FirstFragment is opened by default and once you tap on the hamburger icon you can see there are both the Fragments which we created.

And after selecting the second Fragment you can see the hamburger icon turns into back arrow.

This was a basic example to show you how you can create Drawer layout with Navigation Architecture. There are alot of thing that you can customise according to your need, so open your studio and start coding.

Thanks.