Material Design App Bar Android

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use Material Design Component Top App bar. Have a look at the following image to get an overview of the discussion.

Material Design Component Top App Bar in Android

Want a more fast-paced & competitive environment to learn the fundamentals of Android?

Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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.

Add Required Dependency

Include google material design components dependency in the build.gradle 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.4.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.

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

Anatomy of Top Action Bar

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

Steps to Implement the MDC Top App Bar in Android

Step 1: Creating menu items for Top App Bar

Create a menu resource folder inside the res folder invokes the following code inside the top_app_bar_menu.xml file:

XML

<? xml version = "1.0" encoding = "utf-8" ?>

< item

android:id = "@+id/favorite"

android:icon = "@drawable/ic_favorite"

android:title = "Favourites"

app:showAsAction = "ifRoom" />

< item

android:id = "@+id/search"

android:icon = "@drawable/ic_search"

android:title = "Search"

app:showAsAction = "ifRoom" />

< item

android:id = "@+id/more"

android:icon = "@drawable/ic_more"

android:title = "More Options"

app:showAsAction = "never" />

</ menu >

Step 2: 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.

XML

<? xml version = "1.0" encoding = "utf-8" ?>

< androidx.coordinatorlayout.widget.CoordinatorLayout

android:layout_width = "match_parent"

android:layout_height = "match_parent"

tools:context = ".MainActivity" >

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

android:layout_width = "match_parent"

android:layout_height = "wrap_content" >

< com.google.android.material.appbar.MaterialToolbar

style = "@style/Widget.MaterialComponents.Toolbar.Primary"

android:layout_width = "match_parent"

android:layout_height = "?attr/actionBarSize"

app:menu = "@menu/top_app_bar_menu"

app:navigationIcon = "@drawable/ic_menu"

app:title = "GeeksforGeeks" />

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

</ androidx.coordinatorlayout.widget.CoordinatorLayout >

Output UI:

Step 3: Working with the MainActivity.kt file

In the MainActivity.kt 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.

Kotlin

import android.os.Bundle

import android.widget.Toast

import androidx.appcompat.app.AppCompatActivity

import com.google.android.material.appbar.MaterialToolbar

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super .onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val materialToolbar: MaterialToolbar = findViewById(R.id.material_toolbar)

materialToolbar.setOnMenuItemClickListener {

when (it.itemId) {

R.id.favorite -> {

Toast.makeText( this , "Favorites Clicked" , Toast.LENGTH_SHORT).show()

true

}

R.id.search -> {

Toast.makeText( this , "Favorites Clicked" , Toast.LENGTH_SHORT).show()

true

}

else -> false

}

Output: