Navigation Drawer: How to add Hamburger menu in Android Studio using Kotlin.
Last updated Dec 17, 2021 In this article, we will see how to add Navigation Drawer and click on items in Android Studio by using Kotlin Language.
The Navigation Drawer is a UI panel that displays your app's main navigation menu, and it is the most frequent functionality supplied by Android. It is also a crucial UI feature that delivers activities that users prefer, such as changing user profiles, logout, altering application settings, and so on.
Implementation:
Create a new Project in android studio.
|
Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish
|
Go to activity_drawer.xml file and add the following code
|
<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/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6F4D5"
tools:context=".DrawerActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="128dp"
android:gravity="center"
android:text="Android Developer"
android:textStyle="bold"
android:textSize="21sp" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer_items" />
</androidx.drawerlayout.widget.DrawerLayout>
|
Create a new directory for menu items layout
|
app > res > right-click > new > Directory > enter name (menu) > Enter.
|
Create a new menu resource file
| app > res > menu > right-click > new > menu resource file (drawer_items) > OK. |
Add the following code to drawer_items.xml file
|
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:title="Home" />
<item
android:id="@+id/nav_settings"
android:title="Settings" />
<item
android:id="@+id/nav_logout"
android:title="Logout" />
</menu>
|
Open DrawerActivity.kt file and add the following code.
|
lateinit var actionBarDrawerToggle: ActionBarDrawerToggle
lateinit var drawerLayout: DrawerLayout
lateinit var navigationView: NavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_drawer)
drawerLayout = findViewById(R.id.my_drawer_layout)
navigationView = findViewById(R.id.navigation)
actionBarDrawerToggle =
ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)
drawerLayout.addDrawerListener(actionBarDrawerToggle)
actionBarDrawerToggle.syncState()
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
navigationView.setNavigationItemSelectedListener { menuItem ->
val id = menuItem.itemId
drawerLayout.closeDrawer(GravityCompat.START)
when (id) {
R.id.nav_home -> {
Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_settings -> {
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_logout -> {
Toast.makeText(this, "Logout", Toast.LENGTH_SHORT).show()
true
}
else -> {
false
}
}
}
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
return true
}
return super.onOptionsItemSelected(item)
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
super.onBackPressed()
}
}
|
For set Onclick on menu items use
|
navigationView.setNavigationItemSelectedListener { menuItem ->
val id = menuItem.itemId
drawerLayout.closeDrawer(GravityCompat.START)
when (id) {
R.id.nav_home -> {
Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_settings -> {
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_logout -> {
Toast.makeText(this, "Logout", Toast.LENGTH_SHORT).show()
true
}
else -> {
false
}
}
}
|
Run the app on emulator or real device, you will get the output as following in video.
Complete Source Code of Navigation Drawer Example
activity_drawer.xml file
|
<?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/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6F4D5"
tools:context=".DrawerActivity"
tools:ignore="HardcodedText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="128dp"
android:gravity="center"
android:text="Android Developer"
android:textStyle="bold"
android:textSize="21sp" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer_items" />
</androidx.drawerlayout.widget.DrawerLayout>
|
DrawerActivity.kt file
|
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
import com.nishajain.kotinexamples.R
class DrawerActivity : AppCompatActivity() {
lateinit var actionBarDrawerToggle: ActionBarDrawerToggle
lateinit var drawerLayout: DrawerLayout
lateinit var navigationView: NavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_drawer)
drawerLayout = findViewById(R.id.my_drawer_layout)
navigationView = findViewById(R.id.navigation)
actionBarDrawerToggle =
ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)
drawerLayout.addDrawerListener(actionBarDrawerToggle)
actionBarDrawerToggle.syncState()
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
navigationView.setNavigationItemSelectedListener { menuItem ->
val id = menuItem.itemId
drawerLayout.closeDrawer(GravityCompat.START)
when (id) {
R.id.nav_home -> {
Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_settings -> {
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_logout -> {
Toast.makeText(this, "Logout", Toast.LENGTH_SHORT).show()
true
}
else -> {
false
}
}
}
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
return true
}
return super.onOptionsItemSelected(item)
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
super.onBackPressed()
}
}
}
|
drawer_items.xml file
|
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:title="Home" />
<item
android:id="@+id/nav_settings"
android:title="Settings" />
<item
android:id="@+id/nav_logout"
android:title="Logout" />
</menu>
|
Conclusion: In this article we have covered how to add Navigation Drawer and set onClick on navigation items in Android Studio by using Kotlin code.
<?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/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6F4D5"
tools:context=".DrawerActivity"
tools:ignore="HardcodedText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="128dp"
android:gravity="center"
android:text="Android Developer"
android:textStyle="bold"
android:textSize="21sp" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer_items" />
</androidx.drawerlayout.widget.DrawerLayout>
DrawerActivity.kt file
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
import com.nishajain.kotinexamples.R
class DrawerActivity : AppCompatActivity() {
lateinit var actionBarDrawerToggle: ActionBarDrawerToggle
lateinit var drawerLayout: DrawerLayout
lateinit var navigationView: NavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_drawer)
drawerLayout = findViewById(R.id.my_drawer_layout)
navigationView = findViewById(R.id.navigation)
actionBarDrawerToggle =
ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)
drawerLayout.addDrawerListener(actionBarDrawerToggle)
actionBarDrawerToggle.syncState()
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
navigationView.setNavigationItemSelectedListener { menuItem ->
val id = menuItem.itemId
drawerLayout.closeDrawer(GravityCompat.START)
when (id) {
R.id.nav_home -> {
Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_settings -> {
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show()
true
}
R.id.nav_logout -> {
Toast.makeText(this, "Logout", Toast.LENGTH_SHORT).show()
true
}
else -> {
false
}
}
}
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
return true
}
return super.onOptionsItemSelected(item)
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
super.onBackPressed()
}
}
}
|
drawer_items.xml file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:title="Home" />
<item
android:id="@+id/nav_settings"
android:title="Settings" />
<item
android:id="@+id/nav_logout"
android:title="Logout" />
</menu>
|
Conclusion: In this article we have covered how to add Navigation Drawer and set onClick on navigation items in Android Studio by using Kotlin code.
-->
