How to Use Drawer Layout in Android: Simple Guide

Use DrawerLayout as the root layout in your activity's XML to create a sliding navigation drawer. Inside it, place your main content and a NavigationView or custom drawer view. Control the drawer with openDrawer() and closeDrawer() methods in your activity.

Syntax

The DrawerLayout is a special layout that allows you to have a sliding drawer on the side. It usually contains two child views:

• Main content: Your app's main UI.
• Drawer view: The sliding menu, often a NavigationView.

Use android:layout_gravity="start" on the drawer view to specify it slides from the left.

xml

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main content -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Drawer view -->
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

</androidx.drawerlayout.widget.DrawerLayout>

Output

A layout with a main screen and a hidden drawer sliding from the left side.

Example

This example shows a simple activity with a drawer that opens when you tap the hamburger icon in the toolbar.

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)
        toggle = ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close)
        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()

        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

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

Output

App with a toolbar hamburger icon that opens and closes the drawer sliding from the left.

Common Pitfalls

• Forgetting to set android:layout_gravity="start" on the drawer view causes it not to slide.
• Not calling toggle.syncState() makes the hamburger icon not appear.
• Missing setDisplayHomeAsUpEnabled(true) hides the toggle button.
• Not handling onOptionsItemSelected prevents drawer toggle from working.

xml

/* Wrong: Missing layout_gravity */
<com.google.android.material.navigation.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent" />

/* Right: Add layout_gravity="start" */
<com.google.android.material.navigation.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start" />

Quick Reference

• DrawerLayout: Root layout for drawer.
• NavigationView: Common drawer menu view.
• ActionBarDrawerToggle: Connects drawer with toolbar icon.
• layout_gravity="start": Positions drawer on left.
• openDrawer()/closeDrawer(): Programmatically control drawer.

Key Takeaways

Use DrawerLayout as the root layout with main content and drawer view inside.

Set android:layout_gravity="start" on the drawer view to make it slide from left.

Use ActionBarDrawerToggle to link the drawer with the toolbar hamburger icon.

Remember to call toggle.syncState() and setDisplayHomeAsUpEnabled(true) for toggle to work.

Handle onOptionsItemSelected to open and close the drawer via the toggle button.