The Android Material Toolbar is a versatile and powerful component that every Android app developer should be familiar with. It offers a clean, modern design and a convenient space for branding, navigation, and user interaction. In this comprehensive guide, you’ll learn everything you need to know about customizing the Material Toolbar to suit the needs of your app and your users. From selecting the right colors and elevations to adding buttons, icons, and a search bar, we’ll cover all the essentials to help you create an engaging and user-friendly app that stands out from the crowd. So, let’s dive in and explore the full potential of the Android Material Toolbar!

What is material Toolbar in Android?

The Android Material Toolbar is a type of toolbar that is part of the Material Design system for Android apps. It is a navigation component that provides a space for branding, navigation, and user interaction, and can include buttons, icons, and a search bar. The Material Toolbar replaces the traditional ActionBar in Android and is typically placed at the top of an app’s screen. The Material Toolbar can be customized with colors, elevation, and other styles to match an app’s visual style, making it a flexible and powerful tool for Android app development.

How to implement a material toolbar in android studio?

Here’s a step-by-step guide on how to implement a Material Toolbar in Android Studio:

1. Create a new project or open an existing one.
2. Add the Material Design library to your app-level build.gradle file:

   implementation 'com.google.android.material:material:1.3.0-alpha01'
   

3. Create a new XML layout file for the toolbar. You can name it toolbar.xml. In this file, add the following code:

   <com.google.android.material.appbar.MaterialToolbar
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="?attr/colorPrimary"
       app:title="Your Toolbar Title"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
   

    

4. In your activity’s layout file, include the toolbar layout file as follows:

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

    

5. In your activity’s Java code file, initialize the toolbar and set it as the app bar using the following code:

   MaterialToolbar toolbar = findViewById(R.id.toolbar);
   setSupportActionBar(toolbar);
   

    

6. (Optional) To add menu items to the toolbar, create a menu XML file and inflate it in your activity’s onCreateOptionsMenu method:

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.menu_toolbar, menu);
       return true;
   }
   

    

7. (Optional) To handle menu item clicks, override the onOptionsItemSelected method in your activity’s Java code:

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       switch (item.getItemId()) {
           case R.id.action_settings:
               // handle settings action
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
   }
   

   And that’s it! You have now successfully implemented a Material Toolbar in your Android app using Android Studio.

How to customize Material Toolbar?

You can customize the Android Material Toolbar in the following ways:

1. Change the background color: You can set the background color of the Material Toolbar to match the color scheme of your app using the app:background attribute in your XML layout.
2. Add a logo or image: You can add a logo or image to the Material Toolbar using the app:logo attribute in your XML layout.
3. Add buttons and icons: You can add buttons and icons to the Material Toolbar using menu items and the app:showAsAction attribute in your XML menu file.
4. Add a search bar: You can add a search bar to the Material Toolbar by including a SearchView widget in your XML layout and implementing a searchable configuration in your AndroidManifest.xml file.
5. Set elevation: You can set the elevation of the Material Toolbar using the app:elevation attribute in your XML layout.
6. Style text and title: You can style the text and title in the Material Toolbar using the app:titleTextAppearance and app:subtitleTextAppearance attributes in your XML layout.

To make these customizations, you will need to write code in the XML layout file and the Java code file of your app.

Change the background color.

To customize the background color of the Android Material Toolbar, you need to set the app:background attribute in your XML layout. Here’s an example:

<com.google.android.material.appbar.MaterialToolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:background="@color/your_color"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

In this example, the background color is set using the @color/your_color resource. You can replace your_color with the color you want to use for the background. You can define colors in the res/values/colors.xml file in your project.

For example, to set the background color to red, you can add the following to the colors.xml file:

<color name="your_color">#FF0000</color>

Note that you can also set the background color programmatically in your Java code file. To do this, you can use the setBackgroundColor method on the MaterialToolbar object.

Add a logo or image.

To add a logo or image to the Material Toolbar, you can use the setLogo or setNavigationIcon method in your Java code file.

Here’s an example using setLogo:

MaterialToolbar toolbar = findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.your_logo);

In this example, your_logo is the name of your drawable resource that you want to use as the logo.

Here’s an example using setNavigationIcon:

MaterialToolbar toolbar = findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.your_image);

In this example, your_image is the name of your drawable resource that you want to use as the navigation icon.

Note that you can also set the logo or image programmatically in your Java code file using the setLogo or setNavigationIcon method.

Add buttons and icons.

To add buttons and icons to the Material Toolbar, you can use the inflateMenu method and pass it the menu resource id to inflate. Here’s an example:

MaterialToolbar toolbar = findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.your_menu);

In this example, your_menu is the name of your menu resource that you want to inflate into the toolbar. The menu resource should be defined in an XML file in the res/menu directory of your project.

Here’s an example menu resource file:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="ifRoom" />
</menu>

In this example, the menu contains two items with icons and titles. The app:showAsAction attribute determines how the items will be displayed in the toolbar. If set to ifRoom, the items will only be shown in the toolbar if there is enough room. If there isn’t enough room, they will be moved to the overflow menu.

You can handle the clicks of these buttons or icons by setting an OnMenuItemClickListener on the MaterialToolbar object. Here’s an example:

MaterialToolbar toolbar = findViewById(R.id.toolbar);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_search:
                // Handle search action
                return true;
            case R.id.action_settings:
                // Handle settings action
                return true;
            default:
                return false;
        }
    }
});

Add a search bar.

To add a search bar to the Material Toolbar, you can use the MenuItem class and inflate a menu resource that contains a search action view. Here’s an example:

1. Create a menu resource file in res/menu directory:

   <menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto">
       <item
           android:id="@+id/action_search"
           android:title="Search"
           app:actionViewClass="androidx.appcompat.widget.SearchView"
           app:showAsAction="always" />
   </menu>
   

   In this example, the menu resource contains a single item with an id of @+id/action_search and a title of “Search”. The app:actionViewClass attribute specifies the class of the action view to be used, in this case a SearchView. The app:showAsAction attribute specifies that the search action view should be displayed in the toolbar always.

2. Inflate the menu resource in the onCreateOptionsMenu method:

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.your_menu, menu);
       return true;
   }
   

   In this example, the your_menu is the name of the menu resource that you want to inflate into the toolbar.

3. Find the SearchView and customize it as desired:

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       if (item.getItemId() == R.id.action_search) {
           SearchView searchView = (SearchView) item.getActionView();
           searchView.setQueryHint("Search");
           searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
               @Override
               public boolean onQueryTextSubmit(String query) {
                   // Handle submit action
                   return false;
               }
               @Override
               public boolean onQueryTextChange(String newText) {
                   // Handle text change
                   return false;
               }
           });
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
   

    

In this example, the code first checks if the selected item is the search action view, and then finds the SearchView and sets a query hint and an OnQueryTextListener. The listener can be used to handle the text change and submit events.

Set elevation.

To set the elevation of the Material Toolbar, you can use the setElevation method. The elevation value is specified in pixels and represents the distance of the toolbar from the surface. Here’s an example:

Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setElevation(8);

In this example, the code first finds the Toolbar by its id, and then sets its elevation to 8 pixels. The value of 8 pixels is just an example, you can use any value that you desire.

Style text and title.

To style the text and title in the Material Toolbar, you can use the setTitle and setTitleTextColor methods. Here’s an example:

Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitle("Your Title");
toolbar.setTitleTextColor(Color.WHITE);

In this example, the code first finds the Toolbar by its id, and then sets its title text and title text color. The title text is set to “Your Title” and the title text color is set to white. The values in this example are just examples, you can use any values that you desire.

5 resources to know more about the material toolbar.

if you want to read our other posts you can check our blog section.