Android Material Design Toolbar Example Windows Tricks

Android material design is a new design pattern which google recommends. And Google provides some built-in widgets in it’s design support library to follow this pattern. android.support.v7.widget.Toolbar is just one commonly used widget in that library, it behaves like ActionBar, and google suggests you use Toolbar to replace ActionBar in your android app.

Table of Contents

1. Add Material Design Support Library.

Before you can use those built-in widgets, you should add the support library in your android project follow the below steps.

In the android studio, choose Project View in the left project panel.
Click and open app —> build.gradle file.

Make sure to add the below compile command in the android project build.gradle file dependencies section.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:design:26.+'
    testCompile 'junit:junit:4.12'
}

2. Android Material Design Toolbar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/yBHzliuzlYU

2.1 Define Activity And Toolbar Custom Theme Style.

To introduce how Toolbar custom theme color behaves, we use some light colors in this example. All above activity-related colors are defined in the app/res/values/styles.xml like below.

styles.xml file content.

<resources>

    <style name="CustomToolbarTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimaryDark">@color/colorGreen</item>
        <item name="colorAccent">@color/colorRed</item>
        <item name="colorPrimary">@color/colorBlue</item>
        <item name="android:textColorPrimary">@color/colorOrange</item>
        <item name="android:windowBackground">@color/colorYellow</item>
        <item name="android:navigationBarColor">@color/colorPurple</item>
    </style>

    <style name="CustomPopupTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColorPrimary">@color/colorOrange</item>
        <item name="android:textSize">20dp</item>
    </style>

</resources>

2.1.1 Application Or Activity Custom Theme Definition.

The below custom theme style is used by the main activity in AndroidManifest.xml definition. It’s name CustomToolbarTheme, we will reference it use this name later.

<style name="CustomToolbarTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimaryDark">@color/colorGreen</item>
    <item name="colorAccent">@color/colorRed</item>
    <item name="colorPrimary">@color/colorBlue</item>
    <item name="android:textColorPrimary">@color/colorOrange</item>
    <item name="android:windowBackground">@color/colorYellow</item>
    <item name="android:navigationBarColor">@color/colorPurple</item>
</style>

The CustomToolbarTheme‘s parent is Theme.AppCompat.NoActionBar which means it will not show the action bar. Below is the theme items description.
colorPrimaryDark: Green color in screen header.

colorPrimary: Blue color for toolbar background. We will use this color for our toolbar background later in the app layout XML toolbar definition like below.

<android.support.v7.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/CustomPopupTheme"/>

android:textColorPrimary: Orange color for activity text.
android:windowBackground: Yellow color for activity background area.

android:navigationBarColor: Purple color for app navigation area.

2.1.2 Toolbar Popup Menu Theme Definition.

There are three menu items in our example, the third menu item will be shown in a popup window, the below custom theme will define how the popup menu looks like.

The CustomPopupTheme‘s parent is Theme.AppCompat.Light.NoActionBar, this will make the popup menu background color grey, and the text color is orange, the text size is 20dp.

<style name="CustomPopupTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColorPrimary">@color/colorOrange</item>
    <item name="android:textSize">20dp</item>
</style>

To use the above custom popup theme in the Toolbar definition, use the below code.

<android.support.v7.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/CustomPopupTheme"/>

Now we have defined application or activity custom theme with required colors, we also defined toolbar popup menu custom theme color and text size, next, we will tell you how to use them.

2.2 Apply Custom Activity And Toolbar Theme.

2.2.1 Apply Activity Custom Theme.

First, create an empty android activity then you can find the below configuration in the AndroidManifest.xml file.

Edit the activity’s android:theme attribute value to use activity custom theme defined in 2.1. You can also apply this theme in the application’s android:theme property.

AndroidManifest.xml

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

    <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">
        <activity android:name=".material_design.ToolbarActivity"
        android:theme="@style/CustomToolbarTheme"
        android:label="Code Center">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

2.2.2 Apply Toolbar Custom Theme.

In the activity layout XML file, apply the toolbar custom theme in the Toolbar definition. We use a new namespace app to configure the Toolbar properties.

activity_toolbar.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" 
    app:popupTheme="@style/CustomPopupTheme"/>

2.2.3 Create Toolbar Menu Item Xml File.

This action will create a toolbar menu item definition XML file.
Right-click the app/res/menu folder ( if the menu folder does not exist then create one).

Click New —> Menu resource file in the popup menu list. Input file name and add below menu item definition XML code.

custom_toolbar_example.xml

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

    <item
        android:id="@+id/menu_add"
        android:icon="@drawable/add_icon"
        android:title="Add"
        app:showAsAction="always|withText" />

    <item
        android:id="@+id/menu_edit"
        android:icon="@drawable/edit_icon"
        android:title="Edit"
        app:showAsAction="ifRoom|withText" />

    <item
        android:id="@+id/menu_delete"
        android:icon="@drawable/delete_icon"
        android:title="Delete"
        app:showAsAction="never|withText" />


</menu>

2.2.4 Main Activity.

All the above toolbar menu-related components will be used in the main activity class to implement this example.

Please note the override methods onCreateOptionsMenu(Menu menu) and onOptionsItemSelected(MenuItem item) method.

ToolbarActivity.java

package com.dev2qa.example.material_design;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

import com.dev2qa.example.R;

public class ToolbarActivity extends AppCompatActivity {

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

        // Get the toolbar component.
        Toolbar toolbar = (Toolbar)findViewById(R.id.custom_toolbar);

        // Replace current action bar use toolbar.
        setSupportActionBar(toolbar);
    }

    /* Use custom menu items to inflate activity menu. */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Get menu inflater.
        MenuInflater menuInflater = getMenuInflater();

        // Inflate the menu with custom menu items.
        menuInflater.inflate(R.menu.custom_toolbar_example, menu);
        return super.onCreateOptionsMenu(menu);
    }

    /* Triggered when use click menu item. */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Get menu item id.
        int itemId = item.getItemId();

        if(itemId == R.id.menu_add)
        {
            Toast.makeText(this, "Add menu clicked", Toast.LENGTH_LONG).show();
        }else if(itemId == R.id.menu_edit)
        {
            Toast.makeText(this, "Edit menu clicked", Toast.LENGTH_LONG).show();
        }else if(itemId == R.id.menu_delete)
        {
            Toast.makeText(this, "Delete menu clicked", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }
}