Side menu in Android Studio: a complete guide to creating a Navigation Drawer

Creating a layout with Navigation Drawer

Now let's move on to practice. The main layout file is activity_main.xml. Open it and replace the content with the following code:

<?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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>


<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

Pay attention to the key elements:

• DrawerLayout — the root container that controls the slide-out of the menu.
• Toolbar — the toolbar, on which the menu icon will be displayed.
• FrameLayout — a container for dynamically loading fragments.
• NavigationView —the side menu itself with links to nav_header (header) and nav_menu (menu items).

Now create two new ones file:

1. res/layout/nav_header.xml — menu title layout (for example, with a user avatar).
2. res/menu/nav_menu.xml — XML file with menu items.

Add DrawerLayout to activity_main.xml|

Create Toolbar for menu icon|

Add FrameLayout for fragments|

Create NavigationView with links to nav_header and nav_menu|

Check library connection Material Components-->

Setting menu items and header

File nav_menu.xml defines which items will be displayed in the side menu. An example of a simple menu with three sections:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_home"
android:title="Home"/>
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_gallery"
android:title="Gallery"/>
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_slideshow"
android:title="Slideshow"/>
</group>


<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_share"
android:title="Share"/>
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_send"
android:title="Send feedback"/>
</menu>
</item>
</menu>

Key attributes:

• android:checkableBehavior="single" — allows you to highlight the currently selected item.
• android:icon — icon for menu item (must be in the folder res/drawable).
• android:title —the text that will be displayed.

For the menu title (nav_header.xml) you can use the following template:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="?attr/colorPrimary"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
android:id="@+id/imageView"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ic_profile"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Username"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="user@example.com"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textColor="@android:color/white"/>
</LinearLayout>

Important: height header (android:layout_height) is better to set fixed (for example, 180dp) to avoid problems with display on different devices.

Integration with MainActivity

Now Let's connect the layout with the application logic. Open the file MainActivity.kt (or MainActivity.java) and add the following code:

class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
private lateinit var navView: NavigationView

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

// Initializing Toolbar
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)

// Initializing DrawerLayout and NavigationView
drawerLayout = findViewById(R.id.drawer_layout)
navView = findViewById(R.id.nav_view)

// Setting the menu icon
toolbar.setNavigationIcon(R.drawable.ic_menu)
toolbar.setNavigationOnClickListener {
drawerLayout.openDrawer(GravityCompat.START)
}

// Processing clicks on menu items
navView.setNavigationItemSelectedListener { menuItem ->
when (menuItem.itemId) {
R.id.nav_home -> {
supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, HomeFragment())
.commit()
menuItem.isChecked = true
}
R.id.nav_gallery -> {
supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, GalleryFragment())
.commit()
menuItem.isChecked = true
}
R.id.nav_slideshow -> {
supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, SlideshowFragment())
.commit()
menuItem.isChecked = true
}
}
drawerLayout.closeDrawer(GravityCompat.START)
true
}
}

// Processing clicks on the "Back" button
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
super.onBackPressed()
}
}
}

In this code:

• 🔧 It is initialized Toolbar and set as ActionBar.
• 📌 The menu icon (ic_menu) and the handler for its click are configured.
• 🔄 The logic of switching between fragments when selecting menu items is implemented.
• 🔙 Adds processing for the "Back" button to close the menu.

Don't forget to create fragment classes (HomeFragment, GalleryFragment, SlideshowFragment) or replace them with your own. Example of a simple fragment:

class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}
}

Adding animations and customization

Standard Navigation Drawer can be improved with animations and styles. For example, to make the menu slide out smoothly, add the following style to styles.xml following style:

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>

Then apply it to the menu icon in MainActivity:

val toggle = ActionBarDrawerToggle(
this, drawerLayout, toolbar,
R.string.navigation_drawer_open,
R.string.navigation_drawer_close
)
drawerLayout.addDrawerListener(toggle)
toggle.syncState()

To customize the appearance NavigationView use attributes in activity_main.xml:

<com.google.android.material.navigation.NavigationView
...
app:itemIconTint="@color/nav_menu_icon_color"
app:itemTextColor="@color/nav_menu_text_color"
app:itemBackground="@drawable/nav_menu_item_background"/>

Where:

• nav_menu_icon_color — icon color (for example, @color/black).
• nav_menu_text_color — text color.
• nav_menu_item_background — menu item background when hovering (you can use selector).

Example file res/drawable/nav_menu_item_background.xml to change the background when when pressed:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorPrimaryLight" android:state_pressed="true"/>
<item android:drawable="@android:color/transparent"/>
</selector>

Typical mistakes and how to avoid them

When working with Navigation Drawer developers often encounter the following problems:

Another common mistake is memory leak when opening/closing the menu frequently. To avoid this, always close DrawerLayout after selecting an item:

drawerLayout.closeDrawer(GravityCompat.START)

Also make sure that fragments are not duplicated when you repeatedly click on the same menu item. To do this, add a check:

if (menuItem.itemId != navView.menu.findItem(R.id.nav_home).itemId) {
// Loading a new fragment
}

• 📱 For smartphones: use the standard menu width (wrap_content or a fixed value, for example 320dp).
• 🖥️ For tablets: you can increase the menu width to 400dp or make it always open (mode locked open).
• 🔄 For folding devices: check the behavior of the menu when changing the screen orientation.

<style name="NavigationViewStyle" parent="@style/Widget.Design.NavigationView">
<item name="android:layout_width">400dp</item>
</style>