Android Custom Action Bar – Action bar Logo and Title click events handling

5th February, 2023

Hello Android developer, Android toolbar (formerly known as action bar) is an important android design element. It is used to provide better user interaction and experience. In this android toolbar example, , I’m going to cover how to handle toolbar logo and toolbar title click events as well.

Step 1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 2: Add Material design dependency

Open app level Gradle and add or update Material design dependency to the latest version.

Project ⇒ app ⇒ build.gradle

dependencies 
{
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
}

Step 3: Set A Custom Theme to Activity

Add a custom theme in the styles.xml, Open AndroidManifest.xml and set that theme to the Activity.

Project ⇒ app ⇒ src ⇒ main ⇒ res ⇒ values ⇒ styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <style name="MyCustomAppTheme" parent="Theme.AppCompat.Light">
        <item name="android:background">@android:color/transparent</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorControlNormal">@android:color/black</item>
        <item name="contentInsetStartWithNavigation">5dp</item>
    </style>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.codestringz.testapp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="AllowBackup">
        <activity android:name=".MainActivity"
            android:theme="@style/MyCustomAppTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 4: Create custom toolbar layout

Create a layout resource. This layout resource is our custom toolbar. We will set that layout as our toolbar in upcoming steps. Keep the excitement going..!

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:title="">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_margin="5dp"
        tools:ignore="UseCompoundDrawables">

        <ImageView
            android:id="@+id/toolbar_app_icon"
            android:layout_width="wrap_content"
            android:clickable="true"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            tools:ignore="ContentDescription"
            android:focusable="true" />

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:clickable="true"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:focusable="true" />
    </LinearLayout>

</androidx.appcompat.widget.Toolbar>

Step 5: Update activity xml resource layout

Next, open activity layout and modify it as below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:id="@+id/toolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include
            android:id="@+id/my_toolbar"
            layout="@layout/my_toolbar" />

    </com.google.android.material.appbar.AppBarLayout>
    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbarLayout">
        <TextView
            android:id="@+id/sample_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
    </RelativeLayout>
</RelativeLayout>

Step 6: Update activity

Last step, open the activity file and set our toolbar layout resource as action bar. Add click event handling for the action bar logo and title.

package com.codestringz.testapp;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setCustomActionbar();
    }

    private void setCustomActionbar()
    {
        Toolbar toolbar = findViewById(R.id.my_toolbar);
        setSupportActionBar(toolbar);

        //Handle App icon clicks
        ImageView appIcon = toolbar.findViewById(R.id.toolbar_app_icon);
        appIcon.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                Toast.makeText(MainActivity.this, "App icon clicked", Toast.LENGTH_SHORT).show();
            }
        });

        //Handle app title clicks
        TextView appTitle = toolbar.findViewById(R.id.toolbar_title);
        appTitle.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                Toast.makeText(MainActivity.this, "App title clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Happy coding!