Navigation drawer in Android Kotlin

Introduction

A navigation drawer helps users move between different parts of your app easily. It slides from the side and shows menu options.

When your app has multiple sections or screens to switch between.

When you want to save screen space by hiding the menu until needed.

When you want a familiar way for users to explore your app.

When you want to group related navigation options in one place.

Syntax

Android Kotlin

class MainActivity : AppCompatActivity() {
  private lateinit var toggle: ActionBarDrawerToggle

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

    val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)
    val navView = findViewById<NavigationView>(R.id.nav_view)

    // Setup toggle button to open/close drawer
    toggle = ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close)
    drawerLayout.addDrawerListener(toggle)
    toggle.syncState()

    supportActionBar?.setDisplayHomeAsUpEnabled(true)

    navView.setNavigationItemSelectedListener { menuItem ->
      // Handle menu item clicks here
      drawerLayout.closeDrawer(GravityCompat.START)
      true
    }
  }

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
    if (toggle.onOptionsItemSelected(item)) {
      return true
    }
    return super.onOptionsItemSelected(item)
  }
}

The drawer layout wraps your main content and the navigation menu.

ActionBarDrawerToggle adds the hamburger icon to open/close the drawer.

Examples

This XML sets up the drawer layout with main content and the sliding menu.

Android Kotlin

<androidx.drawerlayout.widget.DrawerLayout
  android:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- Main content -->
  <FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <!-- Navigation drawer -->
  <com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

This Kotlin code handles clicks on the drawer menu items and closes the drawer.

Android Kotlin

navView.setNavigationItemSelectedListener { menuItem ->
  when (menuItem.itemId) {
    R.id.nav_home -> {
      // Navigate to home
    }
    R.id.nav_settings -> {
      // Navigate to settings
    }
  }
  drawerLayout.closeDrawer(GravityCompat.START)
  true
}

Sample App

This is a simple app with a navigation drawer. When you tap the hamburger icon, the drawer slides in. Clicking menu items shows a small message and closes the drawer.

Android Kotlin

class MainActivity : AppCompatActivity() {
  private lateinit var drawerLayout: DrawerLayout
  private lateinit var toggle: ActionBarDrawerToggle

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

    drawerLayout = findViewById(R.id.drawer_layout)
    val navView: NavigationView = findViewById(R.id.nav_view)

    toggle = ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close)
    drawerLayout.addDrawerListener(toggle)
    toggle.syncState()

    supportActionBar?.setDisplayHomeAsUpEnabled(true)

    navView.setNavigationItemSelectedListener { menuItem ->
      when (menuItem.itemId) {
        R.id.nav_home -> Toast.makeText(this, "Home clicked", Toast.LENGTH_SHORT).show()
        R.id.nav_settings -> Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show()
      }
      drawerLayout.closeDrawer(GravityCompat.START)
      true
    }
  }

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
    if (toggle.onOptionsItemSelected(item)) {
      return true
    }
    return super.onOptionsItemSelected(item)
  }
}

Important Notes

Remember to add the drawer menu items in a menu resource XML file.

Use android:layout_gravity="start" to make the drawer slide from the left side.

Test on different screen sizes to ensure the drawer works well everywhere.

Summary

A navigation drawer helps users switch app sections easily.

It slides from the side and hides when not needed.

Use DrawerLayout and NavigationView with ActionBarDrawerToggle in Kotlin.