Android Jetpack Compose – Implement Navigation Drawer

Jetpack Compose is a new UI toolkit from Google used to create native Android UI. It speeds up and simplifies UI development using less code, Kotlin APIs, and powerful tools.

Prerequisites:

1. Familiar with Kotlin and OOP Concepts as well
2. Basic understanding of Jetpack Compose
3. Android Studio Canary Version

The navigation drawer is the most used feature provided by Android, and it is a UI panel that displays your app’s primary navigation menu. It is also a crucial UI feature that delivers activities that users desire, such as changing user profiles, altering program settings, and so on. The implementation of the navigation drawer in Android Jetpack Compose has been covered in detail in this article.

When the user swipes a finger from the activity’s left edge, the navigation menu appears. They may also locate it by touching the app symbol in the action bar from the home activity. A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a new android studio project

To create a new project in Android Studio using Jetpack Compose please refer to:- How to Create a New Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Let’s first review the build.gradle(module level) 

Remember to double-check this file that everything is included. If something is missing just add those blocks from the below snippets.

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.navigationdrawer'
    compileSdk 33

    defaultConfig {
        applicationId "com.example.navigationdrawer"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.9.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.6.1'


    implementation 'androidx.appcompat:appcompat:1.5.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.0-RC"
    implementation'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.0'
}

Step 3: Now let’s review the build.gradle(project level)

Remember to double-check this file that everything is included. If something is missing just add those blocks from the below snippets.

buildscript {
    ext {
        kotlin_version = '1.0.1-2'
        compose_version = '1.1.0-rc01'
    }
    // Requirements
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version" //dependency
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.

plugins {
    id 'com.android.application' version '7.3.0-alpha01' apply false
    id 'com.android.library' version '7.3.0-alpha01' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.0' apply false
}

Step 4: Now rename MainActivity.kt to DrawerAppActivity.kt

We can put the same code to MainActivity.kt as well, but it’s a good idea to create or rename the file to reflect its role. Once you change this we also need to modify the AndroidManifest.xml activity tag to the renamed file since the default is MainActivity. You can refer to the below snippet of AndroidManifest.xml.

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.NavigationDrawer"
        tools:targetApi="31">
        <activity
            android:name=".DrawerAppActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5: Importing necessary modules

It’s good practice to import only the necessary modules rather than importing all the modules and using only a few. 

Kotlin

// Code For Navigation Drawer in Android Jetpack Compose

// Please replace the name of
// package with your  project name
package com.example.navigationdrawer

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.DrawerValue
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalDrawer
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

Step 6: Implement AppCompatActivity() to class  DrawerAppActivity

Kotlin

class DrawerAppActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // This sets the @Composable function as the
        // root view of the activity.
        // This is meant to replace the .xml file that
        // we would typically set using the setContent(R.id.xml_file) method.
        // The setContent block defines the activity's layout.
        setContent {
            DrawerAppComponent()
        }
    }
}

Step 7: Create a composable function for making NavigationDrawers

Before we go, there are a few things you should be aware of:

Composable annotations: The @Composable annotation is used to indicate a Composable function. Composable functions can only be invoked from other composable functions. Consider composable functions to be comparable to Lego blocks in that each composable function is constructed up of smaller composable functions.

• ModalDrawer: ModalDrawer is a pre-defined composable used to provide access to destinations in the app & is a common pattern used across multiple apps where you see a drawer on the left of the screen.

Kotlin

@Composable
fun DrawerAppComponent() {
    // Reacting to state changes is the core behavior of Compose
    // @remember helps to calculate the value passed to it only
    // during the first composition. It then
    // returns the same value for every subsequent composition.
    // @mutableStateOf as an observable value where updates to
    // this variable will redraw all
    // the composable functions. "only the composable
    // that depend on this will be redraw while the
    // rest remain unchanged making it more efficient".
    val drawerState = rememberDrawerState(DrawerValue.Closed)

    // State composable used to hold the
    // value of the current active screen
    val currentScreen = remember { mutableStateOf(DrawerAppScreen.Screen1) }

    val coroutineScope = rememberCoroutineScope()

    ModalDrawer(
        // Drawer state indicates whether
        // the drawer is open or closed.
        drawerState = drawerState,
        gesturesEnabled = drawerState.isOpen,
        drawerContent = {
            //drawerContent accepts a composable to represent
            // the view/layout that will be displayed
            // when the drawer is open.
            DrawerContentComponent(
                // We pass a state composable that represents the
                // current screen that's selected
                // and what action to take when the drawer is closed.
                currentScreen = currentScreen,
                closeDrawer = { coroutineScope.launch { drawerState.close() } }
            )
        },
        content = {
            // bodyContent takes a composable to
            // represent the view/layout to display on the
            // screen. We select the appropriate screen
            // based on the value stored in currentScreen.
            BodyContentComponent(
                currentScreen = currentScreen.value,
                openDrawer = {
                    coroutineScope.launch { drawerState.open() }
                }
            )
        }
    )
}

Step 8: Create a composable function for making DrawerContentComponent

DrawerContentComponent takes a composable to represent the view/layout to display when the drawer is open. This composable function is used in step 7.

Kotlin

@Composable
fun DrawerContentComponent(
    currentScreen: MutableState<DrawerAppScreen>,
    closeDrawer: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize()) {
        // We want to have 3 rows in this column to
        // represent the 3 screens in this activity.
        for (index in DrawerAppScreen.values().indices) {
            // Box with clickable modifier wraps the
            // child composable and enables it to react to a
            // click through the onClick callback similar
            // to the onClick listener that we are
            // accustomed to on Android.
            // Here, we just update the currentScreen variable
            // to hold the appropriate value based on
            // the row that is clicked i.e if the first
            // row is clicked, we set the value of
            // currentScreen to DrawerAppScreen.Screen1,
            // when second row is clicked we set it to
            // DrawerAppScreen.Screen2 and so on and so forth.
            val screen = getScreenBasedOnIndex(index)
            Column(Modifier.clickable(onClick = {
                currentScreen.value = screen
                // We also close the drawer when an
                // option from the drawer is selected.
                closeDrawer()
            }), content = {
                // bodyContent takes a composable to
                // represent the view/layout to display on the
                // screen.
                Surface(
                    modifier = Modifier.fillMaxWidth(),
                    // We set the color of the row based on whether
                    // that row represents the current
                    // screen that's selected. We only want to
                    // highlight the row that's selected.
                    color = if (currentScreen.value == screen) {
                        MaterialTheme.colors.secondary
                    } else {
                        MaterialTheme.colors.surface
                    }
                ) {
                    Text(text = screen.name, modifier = Modifier.padding(16.dp))
                }
            })
        }
    }
}

Step 9: Create functions for deciding which screen to show when

Returns the corresponding DrawerAppScreen based on the index passed to it.

Kotlin

// Returns the corresponding DrawerAppScreen
// based on the index passed to it
fun getScreenBasedOnIndex(index: Int) = when (index) {
    0 -> DrawerAppScreen.Screen1
    1 -> DrawerAppScreen.Screen2
    2 -> DrawerAppScreen.Screen3
    else -> DrawerAppScreen.Screen1
}

// Passed the corresponding screen composable
// based on the current screen that's active
@Composable
fun BodyContentComponent(
    currentScreen: DrawerAppScreen,
    openDrawer: () -> Unit
) {
    when (currentScreen) {
        DrawerAppScreen.Screen1 -> Screen1Component(
            openDrawer
        )
        DrawerAppScreen.Screen2 -> Screen2Component(
            openDrawer
        )
        DrawerAppScreen.Screen3 -> Screen3Component(
            openDrawer
        )
    }
}

Step 10: Create composable functions for making three screen components

Before we go, there are a few things you should be aware of:

• Column: The column is composable and places its children in a vertical sequence. It is comparable to a LinearLayout in that it is vertically oriented. Additionally, we add a modifier to the column.
• Modifier:  Modifiers serve as examples of the decorator pattern and are used to alter the composable to which they are applied. In this case, we use the Modifier to set the Column up to take up the whole available width and height using the Modifier.fillMaxSize() modifier.
• TopAppBar: TopAppBar is a pre-defined composable that’s placed at the top of the screen.
• Card: Card composable is a predefined composable that represents the card surface as outlined in the Material Design standard. We also apply a modifier and configure it to have rounded corners.
• Surface: It’s typically used to modify the backdrop color, and add elevation, clip, or form to its children’s composable.

Kotlin

@Composable
fun Screen1Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        // TopAppBar has slots for a title, navigation icon,
        // and actions. Also known as the action bar.
        TopAppBar(
            title = { Text("Screen 1 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFffd7d7.toInt()), modifier = Modifier.weight(1f)) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "Geeks for geeks : Geeks learning from geeks")
                }
            )
        }
    }
}

@Composable
fun Screen2Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            title = { Text("Screen 2 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFffe9d6.toInt()), modifier = Modifier.weight(1f)) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "GFG : GeeksforGeeks was founded by Sandeep Jain")
                }
            )
        }
    }
}

@Composable
fun Screen3Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            title = { Text("Screen 3 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFfffbd0.toInt()), modifier = Modifier.weight(1f)) {
            Column(modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "Address: A-143, 9th Floor, Sovereign Corporate Tower Sector-136, Noida, Uttar Pradesh - 201305")
                }
            )
        }
    }
}

Step 11: Creating an enum class for DrawerAppScreen

Enum is a data type in Kotlin that has a fixed set of constants. We utilize ENUM when a preset set of values reflects a specific type of data. When a variable can only accept one of a small number of potential values, we use enums.

Kotlin

// Creating an enum class
// for ModelDrawer screens
enum class DrawerAppScreen {
    Screen1,
    Screen2,
    Screen3
}

Step 12: If you want to preview your ScreenComponents then continue else you can skip it

Significance of @preview and composable annotations :

• Instead of needing to download the app to an Android device or emulator, Android Studio allows you to preview your composable functions within the IDE itself. This is an excellent feature since it allows you to preview every one of your own components—or composable functions—right inside the IDE
  • The composable function cannot accept any parameters, which is the fundamental constraint. You may just include your component within another composable function that doesn’t take any arguments and calls your composable function with the necessary parameters
  • Also, don’t forget to annotate it with @Preview & @Composable annotations

Kotlin

// Significance of @preview and
// composable annotations
@Preview
@Composable
fun DrawerAppComponentPreview() {
    DrawerAppComponent()
}

Step 13: Complete Code Snippet

Kotlin

// Code For Navigation Drawer in Android Jetpack Compose

// Please replace the name of
// package with your project name
package com.example.navigationdrawer

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.DrawerValue
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalDrawer
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

class DrawerAppActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // This sets the @Composable function as the
        // root view of the activity.
        // This is meant to replace the .xml file that
        // we would typically set using the setContent(R.id.xml_file) method.
        // The setContent block defines the activity's layout.
        setContent {
            DrawerAppComponent()
        }
    }
}

@Composable
fun DrawerAppComponent() {
    // Reacting to state changes is the core behavior of Compose
    // @remember helps to calculate the value passed to it only
    // during the first composition. It then
    // returns the same value for every subsequent composition.
    // @mutableStateOf as an observable value where updates to
    // this variable will redraw all
    // the composable functions. "only the composable
    // that depend on this will be redraw while the
    // rest remain unchanged making it more efficient".
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    // State composable used to hold the
    // value of the current active screen
    val currentScreen = remember { mutableStateOf(DrawerAppScreen.Screen1) }

    val coroutineScope = rememberCoroutineScope()

    ModalDrawer(
        // Drawer state indicates whether
        // the drawer is open or closed.
        drawerState = drawerState,
        gesturesEnabled = drawerState.isOpen,
        drawerContent = {
            //drawerContent accepts a composable to represent
            // the view/layout that will be displayed
            // when the drawer is open.
            DrawerContentComponent(
                // We pass a state composable that represents the
                  // current screen that's selected
                // and what action to take when the drawer is closed.
                currentScreen = currentScreen,
                closeDrawer = { coroutineScope.launch { drawerState.close() } }
            )
        },
        content = {
            // bodyContent takes a composable to
            // represent the view/layout to display on the
            // screen. We select the appropriate screen
            // based on the value stored in currentScreen.
            BodyContentComponent(
                currentScreen = currentScreen.value,
                openDrawer = {
                    coroutineScope.launch { drawerState.open() }
                }
            )
        }
    )
}

@Composable
fun DrawerContentComponent(
    currentScreen: MutableState<DrawerAppScreen>,
    closeDrawer: () -> Unit
) {
    Column(modifier = Modifier.fillMaxSize()) {
        // We want to have 3 rows in this column to
          // represent the 3 screens in this activity.
        for (index in DrawerAppScreen.values().indices) {
            // Box with clickable modifier wraps the
            // child composable and enables it to react to a
            // click through the onClick callback similar
            // to the onClick listener that we are
            // accustomed to on Android.
            // Here, we just update the currentScreen variable
            // to hold the appropriate value based on
            // the row that is clicked i.e if the first
            // row is clicked, we set the value of
            // currentScreen to DrawerAppScreen.Screen1,
            // when second row is clicked we set it to
            // DrawerAppScreen.Screen2 and so on and so forth.
            val screen = getScreenBasedOnIndex(index)
            Column(Modifier.clickable(onClick = {
                currentScreen.value = screen
                // We also close the drawer when an
                // option from the drawer is selected.
                closeDrawer()
            }), content = {
                // bodyContent takes a composable to
                // represent the view/layout to display on the
                // screen.
                Surface(
                    modifier = Modifier.fillMaxWidth(),
                    // We set the color of the row based on whether
                    // that row represents the current
                    // screen that's selected. We only want to
                    // highlight the row that's selected.
                    color = if (currentScreen.value == screen) {
                        MaterialTheme.colors.secondary
                    } else {
                        MaterialTheme.colors.surface
                    }
                ) {
                    Text(text = screen.name, modifier = Modifier.padding(16.dp))
                }
            })
        }
    }
}

fun getScreenBasedOnIndex(index: Int) = when (index) {
    0 -> DrawerAppScreen.Screen1
    1 -> DrawerAppScreen.Screen2
    2 -> DrawerAppScreen.Screen3
    else -> DrawerAppScreen.Screen1
}

@Composable
fun BodyContentComponent(
    currentScreen: DrawerAppScreen,
    openDrawer: () -> Unit
) {
    when (currentScreen) {
        DrawerAppScreen.Screen1 -> Screen1Component(
            openDrawer
        )
        DrawerAppScreen.Screen2 -> Screen2Component(
            openDrawer
        )
        DrawerAppScreen.Screen3 -> Screen3Component(
            openDrawer
        )
    }
}

@Composable
fun Screen1Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        // TopAppBar has slots for a title, navigation icon,
        // and actions. Also known as the action bar.
        TopAppBar(
            title = { Text("Screen 1 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFffd7d7.toInt()), modifier = Modifier.weight(1f)) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "Geeks for geeks : Geeks learning from geeks")
                }
            )
        }
    }
}

@Composable
fun Screen2Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            title = { Text("Screen 2 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFffe9d6.toInt()), modifier = Modifier.weight(1f)) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "GFG : GeeksforGeeks was founded by Sandeep Jain")
                }
            )
        }
    }
}

@Composable
fun Screen3Component(openDrawer: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            title = { Text("Screen 3 Title") },
            navigationIcon = {
                IconButton(onClick = openDrawer) {
                    Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu")
                }
            }
        )
        Surface(color = Color(0xFFfffbd0.toInt()), modifier = Modifier.weight(1f)) {
            Column(modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                content = {
                    Text(text = "Address: A-143, 9th Floor, Sovereign Corporate Tower Sector-136, Noida, Uttar Pradesh - 201305")
                }
            )
        }
    }
}

enum class DrawerAppScreen {
    Screen1,
    Screen2,
    Screen3
}

@Preview
@Composable
fun DrawerAppComponentPreview() {
    DrawerAppComponent()
}

If any difficulties are faced check your Gradle files as well android manifest. If the error persists you can refer to this zip file.

Output: