Toolbar in Android Application Using Material Components & Material3

Introduction

In this article, we will learn how to create a Toolbar - Action Bar in our Android Application.

The ToolBar provides content & actions related to the current screen.

Using Material Component Library

Replacing the parent attribute in the themes.xml file in the res/values/themes directory to Theme.MaterialComponents.DayNight.DarkActionBar and defining the Primary and secondary Colors as items.

 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
     <style name="Base.Theme.Toolbar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Customize your light theme here. -->

 <!-- specifying the 3 primary colours -->
         <item name="colorPrimary">@color/purple500</item>
         <item name="colorPrimaryVariant">@color/purple700</item>
         <item name="colorOnPrimary">@color/white</item>
 <!-- specifying the 3 secondary colours -->
         <item name="colorSecondary">@color/teal200</item>
         <item name="colorSecondaryVariant">@color/teal700</item>
         <item name="colorOnSecondary">@color/black</item>
 <!-- putting the status bar color same as our color primary variant -->
 <!-- ?attr/ stands for attribute -->
 <!-- ?attr/colorPrimaryVariant means the value corresponding to colorPrimaryVariant -->
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>

     </style>
     <style name="Theme.Toolbar" parent="Base.Theme.Toolbar" />
 </resources>

Defining the Colours in the colors.xml file in the res/values directory

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
     <color name="purple200">#FFBB86FC</color>
     <color name="purple500">#FF6200EE</color>
     <color name="purple700">#FF3700B3</color>
     <color name="teal200">#FF03DAC5</color>
     <color name="teal700">#FF018786</color>
 </resources>

Using Material3 Library

Define the usage of Material3 Library in the themes.xml file

 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
     <style name="Base.Theme.Toolbar" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your light theme here.
         <item name="colorPrimary">@color/purple500</item>
         <item name="colorPrimaryVariant">@color/purple700</item>
         <item name="colorOnPrimary">@color/white</item>

         <item name="colorSecondary">@color/teal200</item>
         <item name="colorSecondaryVariant">@color/teal700</item>
         <item name="colorOnSecondary">@color/black</item>

         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         -->
     </style>

     <style name="Theme.Toolbar" parent="Base.Theme.Toolbar" />
 </resources>

Defining the Colours in the colors.xml file in the res/values directory

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
     <color name="purple200">#FFBB86FC</color>
     <color name="purple500">#FF6200EE</color>
     <color name="purple700">#FF3700B3</color>
     <color name="teal200">#FF03DAC5</color>
     <color name="teal700">#FF018786</color>
 </resources>

Adding a Vector asset named baseline_menu_24 for the menu icon in the res/drawable directory

Creating the Toolbar manually, using the AppBarLayout View.

 <androidx.constraintlayout.widget.ConstraintLayout 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"
     tools:context=".MainActivity">

     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="?attr/colorPrimary"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">

         <com.google.android.material.appbar.MaterialToolbar
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:title="Heading"
             app:titleTextColor="?attr/colorOnPrimary"
             app:subtitle="SubHeading"
             app:subtitleTextColor="?attr/colorOnPrimary"
             app:navigationIcon="@drawable/baseline_menu_24"
             app:navigationIconTint="?attr/colorOnPrimary" />

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

 </androidx.constraintlayout.widget.ConstraintLayout>

Using Primary and Secondary Colors given by the Android, helps us to manage both the Light and dark themes of the Application at once, the Primary and secondary colors are adjusted by the Android OS, based on the theme applied by the user.

However, we can override Android's Primary & Secondary colours, in the colors.xml file, as we did in the MaterialComponent method.

Adding Vector Asset for Menu Icons in the res/drawable directory & changing their tint color to our OnPrimary color

 <vector android:height="24dp" android:tint="?attr/colorOnPrimary"
     android:viewportHeight="24" android:viewportWidth="24"
     android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
     <path android:fillColor="@android:color/white" android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
 </vector>
 <!-- baseline_share_24.xml -->
 <!-- similarly, change tint mode for baseline_edit_24.xml baseline_more_24.xml-->

Create an Android Resource Directory named menu of the type XML in the res directory, add a toolbar_menu.xml file in the directory.

Add Our Menu Items in the toolbar_menu.xml file

 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:android="http://schemas.android.com/apk/res/android">

     <item
         android:id="@+id/settingsBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:title="Settings" />
     <item
         android:id="@+id/signOutBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:title="Sign Out" />
     <item
         android:id="@+id/editBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:icon="@drawable/baseline_edit_24"
         android:title="Edit"
         app:showAsAction="always" />
     <item
         android:id="@+id/shareBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:icon="@drawable/baseline_share_24"
         android:title="Share"
         app:showAsAction="always" />
 </menu>

Where each item represents a menu icon, items without attribute showAsAction, are represented in the More Items section.

Link the toolbar_menu.xml file to our activity_main.xml files toolbar, using the app:menu attribute

 <androidx.constraintlayout.widget.ConstraintLayout 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"
     tools:context=".MainActivity">

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

         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:title="Heading"
             app:titleTextColor="?attr/colorOnPrimary"
             app:subtitle="SubHeading"
             app:subtitleTextColor="?attr/colorOnPrimary"
             app:navigationIcon="@drawable/baseline_menu_24"
             app:navigationIconTint="?attr/colorOnPrimary"
             app:menu="@menu/toolbar_menu"/>

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

 </androidx.constraintlayout.widget.ConstraintLayout>

Demonstration of Toolbar methods, in the Kotlin code:

 import android.os.Bundle
 import android.util.Log
 import androidx.appcompat.content.res.AppCompatResources
 import com.google.android.material.appbar.MaterialToolbar

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

         val toolbar = findViewById<MaterialToolbar>(R.id.toolbar)
 //links toolbar view to the toolbar variable
         toolbar.overflowIcon = AppCompatResources.getDrawable(this, R.drawable.baseline_more_vert_24)
 //overrides the more icon
         toolbar.setNavigationOnClickListener{
             Log.d("Clicked","Navigation Icon")
         }
 //Event Handler when Menu Button is Clicked
         toolbar.setOnMenuItemClickListener{
             when(it.itemId){
                 R.id.editBtn -> Log.d("Clicked","Edit Icon")
                 R.id.shareBtn -> Log.d("Clicked","Share Icon")
                 R.id.settingsBtn -> Log.d("Clicked","Settings Icon")
                 else -> Log.d("Clicked","Sign Out Icon")
             }
             return@setOnMenuItemClickListener true
         }
 //Event Handler when any of the Menu Items is Clicked
     }
 }