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