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.