Complete step-by-step guide to implement a navigation drawer in Android Studio
Open Android Studio and create a new project with Empty Activity template. Name the project "Navigation Drawer".
Define color resources for your app theme.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="lavender">#8692f7</color>
</resources>Define string resources for app text.
<resources>
<string name="app_name">Navigation Drawer</string>
<string name="open_nav">Open Navigation Drawer</string>
<string name="close_nav">Close Navigation Drawer</string>
</resources>Define app themes with custom colors.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.NavigationDrawer" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.MainActivity" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>Update the manifest file with app configuration.
<?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=".MainActivity"
android:theme="@style/Theme.MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data
android:name="android.app.lib_name"
android:value="" />
</activity>
</application>
</manifest>Add images and vector assets to the drawables folder.
Downloads the entire icon_image folder as a ZIP file
Create four blank fragments for navigation.
Create the navigation menu XML file.
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn = "navigation_view">
<group
android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/nav_home"
android:title="Home"/>
<item
android:id="@+id/nav_settings"
android:icon="@drawable/nav_settings"
android:title="Settings"/>
<item
android:id="@+id/nav_share"
android:icon="@drawable/nav_share"
android:title="Share"/>
<item
android:id="@+id/nav_about"
android:icon="@drawable/nav_about"
android:title="About Us"/>
</group>
<item
android:title="">
<menu>
<item
android:id="@+id/nav_logout"
android:icon="@drawable/nav_logout"
android:title="Logout"/>
</menu>
</item>
</menu>Create the drawer header layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="176dp"
android:gravity="bottom"
android:padding="16dp"
android:background="@drawable/headerbkg"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/aklogowhite"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Knowledge"
android:textColor="@color/white"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="contact@androidknowledge.com"
android:textColor="@color/white"
android:textSize="14sp"
android:layout_marginBottom="16dp"/>
</LinearLayout>Create the main activity layout with DrawerLayout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/toolbar"
android:elevation="4dp"
android:background="@color/lavender"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fragment_container"/>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/nav_view"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"
android:background="@drawable/menubkg"
app:itemIconTint="@color/lavender"
app:itemTextColor="@color/lavender"/>
</androidx.drawerlayout.widget.DrawerLayout>Create layout files for all fragments.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home Fragment"
android:textSize="30sp"
android:layout_centerInParent="true"
android:textColor="@color/lavender"/>
</RelativeLayout><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SettingsFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings Fragment"
android:textSize="30sp"
android:layout_centerInParent="true"
android:textColor="@color/lavender"/>
</RelativeLayout><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AboutFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="About Us Fragment"
android:textSize="30sp"
android:layout_centerInParent="true"
android:textColor="@color/lavender"/>
</RelativeLayout><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ShareFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share Fragment"
android:textSize="30sp"
android:layout_centerInParent="true"
android:textColor="@color/lavender"/>
</RelativeLayout>Implement the MainActivity Kotlin code.
package com.example.navdrawerkotpractice
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
private lateinit var drawerLayout: DrawerLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
val navigationView = findViewById<NavigationView>(R.id.nav_view)
navigationView.setNavigationItemSelectedListener(this)
val toggle = ActionBarDrawerToggle(
this, drawerLayout, toolbar,
R.string.open_nav, R.string.close_nav
)
drawerLayout.addDrawerListener(toggle)
toggle.syncState()
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, HomeFragment()).commit()
navigationView.setCheckedItem(R.id.nav_home)
}
}
override fun onNavigationItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.nav_home -> supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, HomeFragment()).commit()
R.id.nav_settings -> supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, SettingsFragment()).commit()
R.id.nav_share -> supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, ShareFragment()).commit()
R.id.nav_about -> supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, AboutFragment()).commit()
R.id.nav_logout -> Toast.makeText(this, "Logout!", Toast.LENGTH_SHORT).show()
}
drawerLayout.closeDrawer(GravityCompat.START)
return true
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
onBackPressedDispatcher.onBackPressed()
}
}
}Your Android app with navigation drawer is now complete!