Material Design Component Top App Bar in Android

A Material Top App Bar is a UI element located at the top of the screen, typically used for displaying the app title, navigation icon, and actions. It helps maintain consistency across an application while improving usability and accessibility. It works like a toolbar that includes navigation controls, action buttons, and branding elements. In this article, we will explore the Material Top App Bar, its benefits, best practices, and implementation.

Why Top App Bar used?

The top app bar appears on top of every activity of the application and disappears when scrolled. The top app bar displays the title of the activity and selected primary actions to be taken on the particular activity or the screen in the application. It can also be used for branding, screen titles, navigation, and actions.

Anatomy of Top Action Bar

In the below anatomy of Material Design Top App bar Navigation Icon, Title, Action Menu, Overflow Menu are optional.

Steps to Implement the Material Top App Bar:

Step 1: Create an empty activity project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add Required Dependency

Include google material design components dependency in the build.gradle.kts file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner.

implementation ("com.google.android.material:material:1.12.0")

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

Step 3: Creating menu items for Top App Bar

Navigate to app > res and create a menu resource folder inside the res folder.

Right Click on the menu directory and create a new menu resource file in the menu folder with the name top_app_bar_menu.xml.

This is how the directory should look like:

Invokes the following code inside the top_app_bar_menu.xml file.

top_app_bar_menu.xml:

Step 4: Working with the activity_main.xml file

The main layout of the application contains only the top bar. First of all the AppBarLayout needs to be nested inside the coordinator layout and inside the AppBarLayout, MaterialToolbar needs to be invoked. And the size of the MaterialToolbar needs to be the size of actionBarSize. To implement the same invoke the following code inside the activity_main.xml file.

activity_main.xml:

Design UI:

Step 5: Working with the MainActivity file

In the MainActivity file, a simple on menu item click listener is assigned to the instance of the material toolbar. To implement the same invoke the following code. However, one can also implement the navigation drawer for the toolbar, refer to Navigation Drawer in Android.

MainActivity file:

Output: