0
0
Android Kotlinmobile~20 mins

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

Choose your learning style9 modes available
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