Skip to main content
Android UI Design with Kotlin
CHAPTER 11 Beginner

AppBar, Toolbar, and Navigation Drawer Design

Updated: May 31, 2026
5 min read

# CHAPTER 11

AppBar, Toolbar, and Navigation Drawer Design

1. Introduction

Every great app needs a way for users to find their way around. The Top App Bar (often containing a Toolbar) is a critical UI component that displays information and actions relating to the current screen. It's where the app title lives, where search icons reside, and where the famous "Hamburger" menu icon sits to open a Navigation Drawer. In this chapter, we will design these essential top-level navigation structures.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Differentiate between the legacy ActionBar and the modern Toolbar.
  • Customize a Toolbar using XML layout files.
  • Implement an AppBarLayout for scrolling behaviors.
  • Design a NavigationView to act as a side drawer menu.
  • Build a News App navigation UI.

3. ActionBar vs Toolbar

In the past, Android provided a default ActionBar at the top of the screen. However, it was rigid and hard to customize. Google introduced the Toolbar. A Toolbar is just a ViewGroup that you can place *anywhere* in your XML layout, just like a LinearLayout. This gives you total control over its design, size, and content.

Step 1: To use a custom Toolbar, you must first disable the default ActionBar in your themes.xml:

xml
123 
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Theme attributes -->
</style>

4. Customizing the Toolbar

Let's build a custom Toolbar in XML. We place it inside an AppBarLayout, which is a special layout designed to handle scrolling effects (like hiding the toolbar when the user scrolls down).
xml
12345678910111213 
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/myToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@color/white"
        app:title="News Today" />

</com.google.android.material.appbar.AppBarLayout>

5. Adding Menu Icons (Actions)

To add icons (like Search or Settings) to the right side of the Toolbar, you create a Menu XML file in res/menu/.
xml
123456789 
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
</menu>

You then inflate this menu in your Kotlin Activity using onCreateOptionsMenu.

6. The Navigation Drawer

The Navigation Drawer is a panel that slides in from the left edge of the screen. It is typically used for top-level navigation destinations.

To implement a drawer, your entire layout must be wrapped in a DrawerLayout.

xml
1234567891011121314151617181920212223242526272829303132333435 
<?xml version="1.0" encoding="utf-8"?>
<!-- The Root must be DrawerLayout -->
<androidx.drawerlayout.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 1. The Main Content (Toolbar + FrameLayout for Fragments) -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <!-- Include the Toolbar we built earlier -->
        <include layout="@layout/my_toolbar" />

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

    <!-- 2. The Navigation View (The sliding menu) -->
    <!-- layout_gravity="start" tells it to slide from the left -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

7. Designing the Drawer Header

A Drawer usually has a beautiful header at the top (e.g., showing the user's profile picture and email). You design this just like any other XML layout (e.g., nav_header.xml) and link it to the NavigationView using the app:headerLayout attribute.

8. Common Mistakes

  • Forgetting NoActionBar theme: If you try to add a custom Toolbar while your app theme still provides a default ActionBar, the app will crash or display two toolbars.
  • Wrong layout_gravity in Drawer: If you don't set android:layout_gravity="start" on the NavigationView, the DrawerLayout will throw an exception.

9. Best Practices

  • Don't overload the Drawer: The drawer should only contain top-level destinations (Home, Profile, Settings). Don't put deep, specific actions inside it.
  • Use standard icons: Use familiar vector icons for your menu items so users instantly know what they do without reading the text.

10. Exercises

  1. 1. Create a nav_header.xml layout containing an ImageView for a profile picture and a TextView for an email address.
  1. 2. Create a drawer_menu.xml with three items: Home, Favorites, and Settings. Attach both to your NavigationView.

11. UI Design Challenges

Challenge: Design a "Collapsing Toolbar". Use CollapsingToolbarLayout so that the app bar starts large (showing a big hero image) but shrinks down into a normal Toolbar when the user scrolls the content upwards.

12. MCQ Quiz with Answers

Question 1

What layout must wrap your entire screen to implement a sliding side menu?

Question 2

What must you change in your themes.xml to successfully use a custom XML <Toolbar>?

13. Interview Questions

  • Q: What is the structural difference between an ActionBar and a Toolbar?
  • Q: How does the AppBarLayout enhance the functionality of a standard Toolbar?

14. FAQs

Q: Are Navigation Drawers still popular? A: Yes, but they are often replaced by Bottom Navigation for apps with 3 to 5 main destinations, as Bottom Navigation is easier to reach on tall phones. Drawers are still ideal for apps with many complex navigation options (like Gmail).

15. Summary

In this chapter, we stripped away the restrictive legacy ActionBar and took full control of our top-level UI using the modern Toolbar. We learned how to add action icons and built a comprehensive DrawerLayout that provides a sliding NavigationView with a custom header, giving our users a clear map of the application.

16. Next Chapter Recommendation

Navigation Drawers are great, but reaching the top-left corner of a 6.7-inch phone to open the menu is difficult with one hand. In Chapter 12: Bottom Navigation and Tab Layouts, we will explore the modern, thumb-friendly way to navigate mobile applications.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Material Design Principles
Next Chapter Bottom Navigation and Tab Layouts

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5