Navigation Drawer in Android – Kotlin

Navigation drawers are everywhere. And implementing them is easy as well. In this post, we will go through all the steps that are required to implement a navigation drawer using Kotlin.

In this example, we will be using the AndroidX dependencies, the new AndroidX. 

AndroidX is the open-source project that the Android team uses to develop, test, package, version and release libraries within Jetpack.

https://developer.android.com/jetpack/androidx/

You can easily migrate to AndroidX versions by following this Migration Guide. For this example, you will need the following 2 dependencies.

implementation 'com.google.android.material:material:1.0.0-rc01'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'

Let’s first take a look at the activity’s layout. In the above example, the drawer starts just below the Toolbar. Although most of the examples show the drawer to overlap the toolbars, I prefer this variant. Gives the option of changing the title when the drawer is closed or opened.

1. Activity Layout

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:orientation="vertical"
              android:layout_height="match_parent">
    <!-- Toolbar -->
    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <!-- Main drawer layout-->
    <androidx.drawerlayout.widget.DrawerLayout

            tools:context=".main.MainActivity"
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        <!-- Your content area -->
        <FrameLayout
                android:id="@+id/content_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <TextView
                    android:text="Your content goes here"
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
        </FrameLayout>
        <!-- The navigation view -->
        <com.google.android.material.navigation.NavigationView
                android:id="@+id/navigationView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                app:menu="@menu/nav_menu"
                app:headerLayout="@layout/nav_header_layout"
                android:layout_gravity="start"
                android:fitsSystemWindows="true"/>
    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

The layout is not complex at all. However, there are a few settings that you need to provide, mainly, the “navigation view” which you can see when the drawer is opened. Optionally, you can also provide the “navigation header” layout as well.

2. Navigation menu (res/menu/nav_menu.xml)

<com.google.android.material.navigation.NavigationView
...
app:menu="@menu/nav_menu"
...

res/menu/nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <group android:checkableBehavior="single">
        <item
                android:id="@+id/nav_camera"
                android:icon="@drawable/ic_action_done"
                android:title="@string/app_name" />
        <item
                android:id="@+id/nav_gallery"
                android:icon="@drawable/ic_action_done"
                android:title="@string/app_name" />
        <item
                android:id="@+id/nav_slideshow"
                android:icon="@drawable/ic_action_done"
                android:title="@string/app_name" />
        <item
                android:id="@+id/nav_manage"
                android:icon="@drawable/ic_action_done"
                android:title="@string/app_name" />
    </group>
</menu>

This is a simple list of menu items, as shown in the screenshot as well. This view can be as complex as you want. For this example, we will keep it simple.

3. Navigation header

<com.google.android.material.navigation.NavigationView
....
app:headerLayout="@layout/nav_header_layout"
....

res/layout/nav_header_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="192dp"
              android:background="?attr/colorPrimaryDark"
              android:padding="16dp"
              android:theme="@style/ThemeOverlay.AppCompat.Dark"
              android:orientation="vertical"
              android:gravity="bottom">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="My header title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

This layout provides a simple header view at the top on the drawer.

4. Setup Toolbar

Set the toolbar as the app bar. Also, enable the “Up” icon for the application.

setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)

5. Setup the Drawer

drawerToggle = object : ActionBarDrawerToggle(
    this,
    drawerLayout,
    toolbar,
    R.string.drawer_open,
    R.string.drawer_close
) {
    override fun onDrawerClosed(view: View) {
        super.onDrawerClosed(view)
        setTitle(R.string.app_name)
    }

    override fun onDrawerOpened(drawerView: View) {
        super.onDrawerOpened(drawerView)
        setTitle(R.string.options)
    }
}

drawerToggle.isDrawerIndicatorEnabled = true
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

// Add these 2 strings in your strings.xml file.
<string name="drawer_open">Open navigation drawer</string>
<string name="drawer_close">Close navigation drawer</string>

6. Setup the NavigationView

Here, you will be able to listen to menu item clicks and take appropriate action.

navigationView.setNavigationItemSelectedListener { menuItem ->
    drawerLayout.closeDrawer(GravityCompat.START)
    true
}

7. Override onOptionsItemSelected to open the navigation drawer

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    return when (item?.itemId) {
        android.R.id.home -> {
            drawerLayout.openDrawer(GravityCompat.START)
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

That’s all, your navigation drawer is ready to use. Here’s a short video.