Navigation Drawer in Android – Kotlin

      2 Comments on 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'
Navigation Drawer – Android – Kotlin

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.

Navigation Drawer on Android with Kotlin

2 thoughts on “Navigation Drawer in Android – Kotlin

  1. Quentin

    Very cool and intersting tutorial ! Thanks a lot.
    A simple suggestion though would be to make the source code available on github.
    I had few gradle issues that could have been easily fixed by having a look to the build.gradle of the project 🙂

    Thanks again, I’m complete beginner to the android & kotlin world and I didn’t had trouble following !

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *