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:
Feel free to post a comment below if you face any problems following this. Follow more of our android tutorials here.