Create a navigation drawer in Android (Kotlin)

Greetings of the day.

Let’s create a navigation drawer in the Android with kotlin. First of all, we will understand the navigation drawer.

Navigation Drawer

It is a sliding menu that appears on the left side of the Android app screen. It can be opened by sliding from the left or clicking its ActionBar icon. Below example.

Navigation Drawer

To create a drawer we need some resources like an activity/layout file, menu file and theme. we will follow some steps to fill our requirements.

Step 1. Create a empty activity file with xml layout.

In the new project, we have MainActivity.kt and activity_main.xml files.

Step 2. Convert ConstantLauout (Other parent layout) to DrawerLayout for drawer in the activity_main.xml.

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

  </androidx.constraintlayout.widget.ConstraintLayout>

To

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/myDrawer_layout"
    tools:context=".MainActivity">
  
  </androidx.drawerlayout.widget.DrawerLayout>

give an id for drawer layout “android:id=@+id/myDrawer_layout to access in the kt.file.

MainActivity.kt

class MainActivity : AppCompatActivity() {
    lateinit var drawerLayout: DrawerLayout
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        drawerLayout = findViewById(R.id.myDrawer_layout)
    }
}

create a lateinit variable for drawer layout and initializes that variable in the onCreate() method.

Step 3. Create a menu directory and code for our menu items.

To create a menu directory go to res>new> android resource directory and select menu from resource type and click ok.

create a menu directory

Select a menu resource type

now we will create a menu file and code for our menu items. go to the menu directory the new and select menu resource file. our file name will be my_drawer_menu.xml.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:title="Home"
        android:id="@+id/home_nav_menu"/>
    <item
        android:title="Profile"
        android:id="@+id/profile_nav_menu"/>
</menu>

In the menu tag use item tag for the item name (Home) and item id (home_nav_menu). Here we have two items only for drawer items. now we are ready to create a navigation and connect them. Add the below code to the activity_main.xml file.

<com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/grey"
        android:layout_gravity="start"
        app:menu="@menu/my_drawer_menu"/>

Here android:layout_gravity=”start” is responsible for opening the drawer from the left side of the app screen. and app:menu=”@menu/my_drawer_menu” for connecting our menu item with the navigation view that we have already created above. Now we are ready with the UI part.

Step 4. Create do our programming for opening and closing drawer in the .kt file

Open your MainActivity.kt file and start coding like below.

MainActivity.kt (full code)

class MainActivity : AppCompatActivity() {
    lateinit var drawerLayout: DrawerLayout
    lateinit var  actionBarDrawerToggle: ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // init drawer layout
        drawerLayout = findViewById(R.id.myDrawer_layout)
        // init action bar drawer toggle
        actionBarDrawerToggle = ActionBarDrawerToggle(this,drawerLayout,R.string.nav_open,R.string.nav_close)
        // add a drawer listener into  drawer layout
        drawerLayout.addDrawerListener(actionBarDrawerToggle)
        actionBarDrawerToggle.syncState()

        // show menu icon and back icon while drawer open
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // check conndition for drawer item with menu item
        return if (actionBarDrawerToggle.onOptionsItemSelected(item)){
            true
        }else{
            super.onOptionsItemSelected(item)
        }

    }
}

create a lateinit variable for the action bar drawer toggle like lateinit var actionBarDrawerToggle: ActionBarDrawerToggle and initialize that variable with ActionBarDrawerToggle(). This class need an Activity (context), DrawerLayout (view), int (open), and int (close), ActionBarDrawerToggle(this,drawerLayout,R.string.nav_open,R.string.nav_close). then add the action bar drawer toggle into the drawer layout and sync the state of the toggle. finally, we will call the override function for the menu item called onOptionsItemSelected(item:MenuItem) and return a boolean. Here we will check if drawer item is the same as the menu item given by the function if yes the return is true otherwise return super. That’s all, we are ready with our navigation drawer.

In case your theme does not allow you to show the menu icon on the action bar (app bar).

Step 5. Mange our app theme to the app bar (action bar).

Go to the res, values, themes, themes.xml convert your theme with the below code.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.NavigationDrawer" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.NavigationDrawer" parent="Base.Theme.NavigationDrawer" />
</resources>

to

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.NavigationDrawer" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.NavigationDrawer" parent="Base.Theme.NavigationDrawer" />
</resources>

change your parent theme noActionbar to ActionBar with the above code. The style name is “Theme.NavigationDrawer”. Set that theme in the application section in the AndroidManifest.xml file.

AndroidManifest.kt

<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">
        <activity
            android:name=".MainActivity"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

android:theme=”@style/Theme.NavigationDrawer” set your theme style name in this line. Finally, we are with our navigation drawer. If you want to check the code open this GitHub repo.

Thank me later😉.