What is Navigation drawer in Android Kotlin?

Android Kotlinmobile~7 mins

Navigation drawer in Android Kotlin

Choose your learning style10 modes available

Learn Why Deep UI Try Challenge Build Recall Publish

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)
  }
}

OutputSuccess

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.

Practice

(1/5)

1. What is the main purpose of a Navigation Drawer in an Android app?

easy

A. To display pop-up messages to the user

B. To let users switch between different sections of the app easily

C. To show a list of notifications

D. To play background music in the app

Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard

Navigation drawer in Android Kotlin

Practice

Solution

Step 1: Understand the role of Navigation Drawer

Step 2: Match purpose with options

Final Answer:

Quick Check:

Solution

Step 1: Check ActionBarDrawerToggle constructor parameters

Step 2: Verify code matches this order

Final Answer:

Quick Check:

Solution

Step 1: Understand ActionBarDrawerToggle behavior

Step 2: Check code completeness

Final Answer:

Quick Check:

Solution

Step 1: Review drawer toggle setup steps

Step 2: Identify missing method call

Final Answer:

Quick Check:

Solution

Step 1: Understand standard navigation drawer menu setup

Step 2: Handle item clicks with setNavigationItemSelectedListener

Final Answer:

Quick Check:

Ready to prove it?