Navigation drawer in Android Kotlin - Mini App: Build & Ship

Build: MainScreen

This screen has a navigation drawer that slides from the left. The drawer contains three menu items: Home, Profile, and Settings. Selecting each item changes the main content text accordingly.

Target UI

-------------------------
| ☰ Main Screen         |
|-----------------------|
|                       |
|  Welcome to Home!     |
|                       |
|                       |
|-----------------------|
| Navigation Drawer      |
|  - Home               |
|  - Profile            |
|  - Settings           |
-------------------------

Add a Navigation Drawer that slides from the left

Drawer menu items: Home, Profile, Settings

Main content area shows text matching selected menu item

Toolbar with hamburger icon to open drawer

Close drawer when menu item is selected

Starter Code

Android Kotlin

package com.example.navigationdrawer

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainScreen : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout

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

        drawerLayout = findViewById(R.id.drawer_layout)

        // TODO: Setup toolbar with hamburger icon
        // TODO: Setup NavigationView item selection listener
        // TODO: Update main content text based on selection
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.navigationdrawer

import android.os.Bundle
import android.view.MenuItem
import android.widget.TextView
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainScreen : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    private lateinit var drawerLayout: DrawerLayout
    private lateinit var toggle: ActionBarDrawerToggle
    private lateinit var navView: NavigationView
    private lateinit var contentText: TextView

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

        drawerLayout = findViewById(R.id.drawer_layout)
        navView = findViewById(R.id.nav_view)
        contentText = findViewById(R.id.content_text)

        toggle = ActionBarDrawerToggle(this, drawerLayout, R.string.open_drawer, R.string.close_drawer)
        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()

        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        navView.setNavigationItemSelectedListener(this)

        // Default content
        contentText.text = "Welcome to Home!"
    }

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

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.nav_home -> contentText.text = "Welcome to Home!"
            R.id.nav_profile -> contentText.text = "This is your Profile."
            R.id.nav_settings -> contentText.text = "Adjust your Settings here."
        }
        drawerLayout.closeDrawers()
        return true
    }
}

We added a DrawerLayout and a NavigationView in the layout XML (not shown here). In the Kotlin code, we set up an ActionBarDrawerToggle to connect the toolbar hamburger icon with the drawer. We implemented NavigationView.OnNavigationItemSelectedListener to listen for menu item clicks. When a menu item is selected, we update the main content TextView text accordingly and close the drawer. The hamburger icon toggles the drawer open and closed.

Final Result

Completed Screen

-------------------------
| ☰ Main Screen         |
|-----------------------|
|                       |
|  Welcome to Home!     |
|                       |
|                       |
|-----------------------|
| Navigation Drawer      |
|  - Home               |
|  - Profile            |
|  - Settings           |
-------------------------

Tap hamburger icon to open navigation drawer

Tap 'Profile' in drawer changes main text to 'This is your Profile.' and closes drawer

Tap 'Settings' changes main text to 'Adjust your Settings here.' and closes drawer

Tap 'Home' changes main text to 'Welcome to Home!' and closes drawer

Stretch Goal

Add a header with user name and email at the top of the navigation drawer

💡 Hint

Use NavigationView's header layout XML and set user info in code with findViewById

Practice

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

Solution

1. Step 1: Understand the role of Navigation Drawer

   A Navigation Drawer is a UI panel that slides from the side to show app sections.

2. Step 2: Match purpose with options

   Only To let users switch between different sections of the app easily describes switching app sections, which is the main use of Navigation Drawer.

3. Final Answer:

   To let users switch between different sections of the app easily -> Option B

4. Quick Check:

   Navigation Drawer = Switch app sections [OK]

Hint: Navigation drawer is for app section switching [OK]

Common Mistakes:

• Confusing drawer with notifications panel
• Thinking it shows pop-up messages
• Assuming it controls media playback

2. Which Kotlin code snippet correctly initializes a DrawerLayout and ActionBarDrawerToggle in an Activity?

easy

A. val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar)
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

B. val drawerToggle = ActionBarDrawerToggle(drawerLayout, this, toolbar, R.string.open, R.string.close)
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

C. val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close)
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

D. val drawerToggle = ActionBarDrawerToggle(this, toolbar, drawerLayout, R.string.open, R.string.close)
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

Solution

1. Step 1: Check ActionBarDrawerToggle constructor parameters

   The correct order is (Activity, DrawerLayout, Toolbar, openDescRes, closeDescRes).

2. Step 2: Verify code matches this order

   val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) drawerLayout.addDrawerListener(drawerToggle) drawerToggle.syncState() matches the correct parameter order and calls addDrawerListener and syncState properly.

3. Final Answer:

   val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) drawerLayout.addDrawerListener(drawerToggle) drawerToggle.syncState() -> Option C

4. Quick Check:

   Correct constructor order = val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) drawerLayout.addDrawerListener(drawerToggle) drawerToggle.syncState() [OK]

Hint: Remember constructor order: Activity, DrawerLayout, Toolbar, open, close [OK]

Common Mistakes:

• Swapping DrawerLayout and Toolbar parameters
• Missing open/close string resource IDs
• Not calling addDrawerListener or syncState

3. Given this Kotlin code snippet inside an Activity, what happens when the user taps the hamburger icon?

val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close)
drawerLayout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

medium

A. The toolbar title changes to 'open'

B. The app crashes due to missing listener

C. Nothing happens because syncState is missing

D. The navigation drawer slides in from the side

Solution

1. Step 1: Understand ActionBarDrawerToggle behavior

   It links the hamburger icon to open/close the drawer when tapped.

2. Step 2: Check code completeness

   Code adds drawerToggle as listener and calls syncState, so toggle works correctly.

3. Final Answer:

   The navigation drawer slides in from the side -> Option D

4. Quick Check:

   Hamburger tap = Drawer slides in [OK]

Hint: Hamburger icon toggles drawer visibility [OK]

Common Mistakes:

• Thinking syncState is optional
• Assuming no effect without extra code
• Confusing drawer toggle with toolbar title change

4. What is the error in this Kotlin code for setting up a navigation drawer?

val drawerToggle = ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close)
drawerToggle.syncState()

medium

A. Missing call to drawerLayout.addDrawerListener(drawerToggle)

B. Wrong order of parameters in ActionBarDrawerToggle

C. Missing call to setSupportActionBar(toolbar)

D. Missing string resources for open and close

Solution

1. Step 1: Review drawer toggle setup steps

   After creating drawerToggle, you must add it as a listener to drawerLayout.

2. Step 2: Identify missing method call

   The code calls syncState but does not call drawerLayout.addDrawerListener(drawerToggle), so toggle won't work.

3. Final Answer:

   Missing call to drawerLayout.addDrawerListener(drawerToggle) -> Option A

4. Quick Check:

   Must add drawerToggle as listener [OK]

Hint: Always add drawerToggle as drawer listener [OK]

Common Mistakes:

• Forgetting addDrawerListener call
• Mixing parameter order in constructor
• Skipping setSupportActionBar(toolbar) setup

5. You want to add a navigation drawer with three menu items: Home, Profile, and Settings. Which approach correctly sets up the drawer menu and handles item clicks in Kotlin?

hard

A. Define menu in XML, set NavigationView's menu, then use setNavigationItemSelectedListener to handle clicks

B. Create menu items programmatically in Activity, then override onOptionsItemSelected for clicks

C. Use a RecyclerView inside DrawerLayout for menu, handle clicks with adapter listener

D. Add buttons inside DrawerLayout layout XML and set onClickListeners in Activity

Solution

1. Step 1: Understand standard navigation drawer menu setup

   Menus are usually defined in XML and linked to NavigationView for easy management.

2. Step 2: Handle item clicks with setNavigationItemSelectedListener

   This listener handles user taps on menu items properly.

3. Final Answer:

   Define menu in XML, set NavigationView's menu, then use setNavigationItemSelectedListener to handle clicks -> Option A

4. Quick Check:

   XML menu + listener = Define menu in XML, set NavigationView's menu, then use setNavigationItemSelectedListener to handle clicks [OK]

Hint: Use XML menu and NavigationView listener for drawer items [OK]

Common Mistakes:

• Trying to handle drawer menu with onOptionsItemSelected
• Using RecyclerView unnecessarily for simple menus
• Placing buttons directly inside DrawerLayout instead of NavigationView