Toolbar - Action Bar in Android Application: A Guide Using Material Component and Material3 Library

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

1. 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>
   

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

1. 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>
   

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

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

4. 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 Menu Items to the Toolbar

1. 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-->
   

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

3. 

   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.

   

4. 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>
   

   

5. 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
        }
    }