Android Material Design Toolbar Example

Android material design is a new design pattern which google recommend. And google provide some built-in widget 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 suggest you use Toolbar to replace ActionBar in your android app.

1. Add Material Design Support Library.

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

  1. In android studio, choose Project view in left project panel.
    android studio project view's sub view dropdown list
  2. Click and open app —> build.gradle file.change android min sdk version in build.gradle
  3. Make sure add below compile command ( red color text ) in 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.

android material design toolbar example

2.1 Define Activity And Toolbar Custom Theme Style.

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

android toolbar color style definition

2.1.1 Application Or Activity Custom Theme Definition.
<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>

This 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. It’s parent is Theme.AppCompat.NoActionBar which means it will not show action bar. Below is theme items description.

  1. colorPrimaryDark : Green color in screen header.
  2. colorPrimary : Blue color for toolbar background. We will use this color for our toolbar background later in 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"/>
  3. android:textColorPrimary : Orange color for activity text.
  4. android:windowBackground : Yellow color for activity background area.
  5. android:navigationBarColor : Purple color for app navigation area.
READ :   Android AppBarLayout And Toolbar Example
2.1.2 Toolbar Popup Menu Theme Definition.

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

It’s parent is Theme.AppCompat.Light.NoActionBar this will make the popup menu background color grey, and the text color is orange, 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 above custom popup theme in Toolbar definition, use 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 below configuration in 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 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 activity layout xml file, apply the toolbar custom theme in toolbar definition. We use new app namespace to configure 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 toolbar menu item definition xml file.

Right click app / res / menu folder ( if menu folder do not exist then create one), click New —> Menu resource file in popup menu list. Input file name and add below menu item definition xml code.

READ :   Android OkHttp3 Http Get Post Request Example

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 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);
    }
}
(Visited 289 times, 1 visits today)

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.