android toolbar Archives

Please Share On:

In this tutorial, I am going to show you how can you show a toolbar menu in Android. First, you need to understand the toolbar.

Toolbar is a ViewGroup that can be placed anywhere in your layout. By default, Android uses an action bar. You need to replace the action bar with a toolbar to use a toolbar.

You can easily replace Actionbar into Toolbar by using setSupportActionBar() method. The below code helps to replace ActionBar into ToolBar.

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

See an image below. I am going to show you how you can achieve this type of toolbar output.

Let start from the beginning to create toolbar into Action bar.

Step 1: Add support library

To use the Toolbar you need to add supporting dependencies in your app’s build.gradle file.

Android -> Gradle Scripts -> build.gradle (Module:app)

implementation 'com.google.android.material:material:1.2.1' //design support library for AndroidX

Step 2: Change App Theme ActionBar

Here, you have to disable your App Theme ActionBar from your style.xml resource file.

Your style.xml resource file before disable AppTheme ActionBar

<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="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>

    </style>
</resources>

After disable your style.xml App theme ActionBar

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 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="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>

    </style>
</resources>

Step 3: Design your Toolbar with icon and Toolbar title

Create a xml file and named as toolbar.xml. And add a menu icon and toolbar title “Toolbar”.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/blue"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:navigationIcon="@drawable/ic_baseline_menu_24"
            app:title="Toolbar"/>
        </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Step 4: Toolbar Activity

Add the below code inside your activity OnCreate() method.

 Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(mToolbar); // Setting replace toolbar as the ActionBar

That’s it. Now run your program and see the output. A toolbar with menu icon and title will shown on the top of your app.

Donate to support writers

You may interest on the following topics:

4) Select Icon

Now, from the list of available vector images, choose your app required icon and click OK. In the below image, I have selected the menu, you can see a light blue background color surrounds the icon.

Now, your selected icon will be added under your drawable folder with the name ic_baeline_menu_24.xml.

5) Use in your .xml file

Now, it’s time to use your vector asset in your .xml file. Open your.xml file and add your vector image in your location with a reference @drawable/ic_baseline_menu_24 like the below example.

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/blue"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:navigationIcon="@drawable/ic_baseline_menu_24"
            app:title="Toolbars"/>

Step 1: Add support library

Step 2: Change App Theme ActionBar

Step 3: Design your Toolbar with icon and Toolbar title

Step 4: Toolbar Activity

1) Open your project

2) Select Vector Assets

3) Click on Clip Art Icon

4) Select Icon

5) Use in your .xml file

Output:

Copyright @2023. All Right Reserved.