Left menu drawer – Android kotlin

In this article, we will be creating a left menu drawer in an android app using Kotlin. Following will be the code of your activity:

package com.adnantech.myapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class HomeActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    lateinit var drawerLayout: DrawerLayout
    lateinit var actionBarDrawerToggle: ActionBarDrawerToggle
    lateinit var navigationView: NavigationView

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

        // drawer layout instance to toggle the menu icon to open
        // drawer and back button to close drawer
        drawerLayout = findViewById(R.id.drawer_layout)
        actionBarDrawerToggle =
            ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)

        // pass the Open and Close toggle for the drawer layout listener
        // to toggle the button
        drawerLayout.addDrawerListener(actionBarDrawerToggle)
        actionBarDrawerToggle.syncState()

        // to make the Navigation drawer icon always appear on the action bar
        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        navigationView = findViewById(R.id.navigationView)
        navigationView.setNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        val id: Int = item.itemId
        if (id == R.id.nav_logout) {
            // logout action
        }
        return true
    }

    // override the onOptionsItemSelected()
    // function to implement
    // the item click listener callback
    // to open and close the navigation
    // drawer when the icon is clicked
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
            true
        } else super.onOptionsItemSelected(item)
    }
}

You need to implement and interface “NavigationView.OnNavigationItemSelectedListener” to your activity. Create instances of “DrawerLayout”, “ActionBarDrawerToggle”, and “NavigationView”.

Create the following 2 attributes in your “res/values/strings.xml”:

<resources>
    <string name="app_name">My App</string>

    <!-- to toggle the open close button of the navigation drawer -->
    <string name="nav_open">Open</string>
    <string name="nav_close">Close</string>
</resources>

And your “activity_home.xml” should look like this:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Home content" />
    </RelativeLayout>

    <!-- this the navigation view which draws and shows the navigation drawer -->
    <!-- include the menu created in the menu folder -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/home_drawer_header"
        app:menu="@menu/navigation_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

After that, we need to create 2 files. One named “home_drawer_header.xml” inside the “res/layout” folder. And another named “navigation_menu.xml” inside the “res/menu” folder. Following will be the code of the “res/layout/home_drawer_header.xml” file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:padding="20dp">

    <TextView
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="adnan" />

    <TextView
        android:id="@+id/userPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/userName"
        android:layout_centerVertical="true"
        android:text="12345" />

</RelativeLayout>

And the code of “res/menu/navigation_menu.xml” should be like the following:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">

    <item
        android:id="@+id/nav_account"
        android:title="My account" />

    <item
        android:id="@+id/nav_settings"
        android:title="Settings" />

    <item
        android:id="@+id/nav_logout"
        android:title="Logout" />

</menu>

If you want to get the TextView inside navigation views, you can get them by using the following code:

val headerView: View = navigationView.getHeaderView(0)
val userName: TextView = headerView.findViewById(R.id.userName)
val userPhone: TextView = headerView.findViewById(R.id.userPhone)

Run the app now and you will be able to see the left menu drawer like this:

Left menu drawer - Android Kotlin
Left menu drawer – Android Kotlin

Feel free to post a comment below if you face any problems following this. Follow more of our android tutorials here.