Android navigation Drawer Tutorial and Example in Kotlin

Android navigation Drawer: is a UI panel that, shows main navigation within an app like Gmail app has a setting, inbox, chat, etc option in navigation drawer. It’s hidden by default, the user has to slide in from the side or from the top level of the app, the user touches the drawer icon in the app bar to open android navigation.

In this tutorial, you will learn the following:

1. What is Android Navigation Drawer?
2. An Example of a navigation drawer in kotlin with coding

How to add Navigation Drawer in Android. Let’s starts.

Add Dependencies

Add the following dependencies to your apps module’s build.gradle file. It’s updating time to time, always add the latest one.

dependencies {
  implementation 'com.android.support:appcompat-v7:27.1.1'
  implementation 'com.android.support:design:27.1.1'
}

Adding Toolbar to your layout

You Have to remove ActionBar Theme and Add Toolbar

Then open your “values/style.xml” file and set the app theme to one without the action bar, such as Theme.AppCompat.Light.NoActionBar:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        .......
    </style>
</resources>

Here we are using theme:@style/ThemeOverlay.AppCompat.Dark.ActionBar, On the light app theme. You can use any other ThemeOverlay.

Like Light Toolbar on Dark app Theme @style/ThemeOverlay.AppCompat.ActionBar

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

Set the toolbar as the action bar

Add this in Activity class.

val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

Add the nav drawer button

A setting button on App bar(ToolBar).

val actionbar: ActionBar? = supportActionBar
        actionbar?.apply {
            setDisplayHomeAsUpEnabled(true)
            setHomeAsUpIndicator(R.drawable.ic_menu)
        }

Let’s Build Android Navigation Drawer example in kotlin:

We will implement Navigation Drawer and basic functionally in this example. In the next Tutorial, we will learn the use of activity and fragments.

Step 1. Create a new project “Build Your First Android App in Kotlin“

Step 2. Add Dependencies in the apps module’s build.gradle file

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "in.eyehunt.androidnavigationdrawer"
        minSdkVersion 15
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Step 3. Create “drawer_view.xml” menu

if you don’t have any menu resource file then create first “Android Resource directory” then create resource file “drawer_view.xml”

Then add the following code,

Note: we are using String directly, for good practice always add in a value/strings.xml resource file. And we are using a common launcher image in every item for simple example, you can use as per your requirements.

Material icon download link: https://material.io/tools/icons/

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_profile"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Profile" />
        <item
            android:id="@+id/nav_wallet"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Wallet" />
        <item
            android:id="@+id/nav_offer"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Offers" />
        <item
            android:id="@+id/nav_setting"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Setting" />
    </group>
</menu>

Step 4. Add following code in “activity_main.xml” layout file

<?xml version="1.0" encoding="utf-8"?><!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_view" />

</android.support.v4.widget.DrawerLayout>

Step 5. Open your “values/style.xml” and set the app theme

such as Theme.AppCompat.Light.NoActionBar:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Step 6. Open the “MainActivity.kt” and add following code

package `in`.eyehunt.androidnavigationdrawer

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.NavigationView
import android.support.v4.view.GravityCompat
import android.support.v4.widget.DrawerLayout
import android.support.v7.app.ActionBar
import android.support.v7.widget.Toolbar
import android.view.MenuItem
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    private lateinit var mDrawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        val actionbar: ActionBar? = supportActionBar
        actionbar?.apply {
            setDisplayHomeAsUpEnabled(true)
            setHomeAsUpIndicator(R.mipmap.baseline_menu_white_18dp)
        }

        mDrawerLayout = findViewById(R.id.drawer_layout)

        val navigationView: NavigationView = findViewById(R.id.nav_view)
        navigationView.setNavigationItemSelectedListener { menuItem ->
            // set item as selected to persist highlight
            menuItem.isChecked = true
            // close drawer when item is tapped
            mDrawerLayout.closeDrawers()

            // Handle navigation view item clicks here.
            when (menuItem.itemId) {

                R.id.nav_profile -> {
                    Toast.makeText(this, "Profile", Toast.LENGTH_LONG).show()
                }
                R.id.nav_wallet -> {
                    Toast.makeText(this, "Wallet", Toast.LENGTH_LONG).show()
                }
                R.id.nav_offer -> {
                    Toast.makeText(this, "Offer", Toast.LENGTH_LONG).show()
                }
                R.id.nav_setting -> {
                    Toast.makeText(this, "Setting", Toast.LENGTH_LONG).show()
                }
            }
            // Add code here to update the UI based on the item selected
            // For example, swap UI fragments here

            true
        }
    }

    //appbar - toolbar button click
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                mDrawerLayout.openDrawer(GravityCompat.START)
                true
            }

            else -> super.onOptionsItemSelected(item)
        }
    }
}

Step 7. Now Run the application, in an emulator or On your android device.

Output screenshot Android Navigation Drawer :

Download source code Android Navigation Drawer in kotlin

https://github.com/EyeHunts/Androidnavigationdrawer

Do comment if you have any doubt and suggestion on this tutorial.

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 27: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin