Material Design Color & Toolbar Customization

Hi guys, in previous tutorial we have learned how to setup material design in android studio. In this tutorial we’ll learn how to customize material design colors and toolbar . So lets talk first thing first.

In order select your colors you can go through this material design color patterns and choose the one that suits your app. After selecting primary color scroll down a bit to UI Color Application section and read guide lines carefully. That says

Your toolbars and larger color blocks should use the 500 color of the primary color of your app. The status bar should be the darker 700 tint of your primary color.

Use the accent color very thoughtfully for your primary action button and components like switches or sliders. Follow the Do’s & Don’ts mentioned in the design guide lines.




Lets move further and talk about app bar/toolbar. Google design guide lines structure section is covering complete details of toolbar, if we scroll down further to app bar section where they talked very specifically about app bar. The most important part is metrics, lets take a look at default values:

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

style_color_ui_application_primary

style_color_ui_application_accent
layout_structure_appbar_metrics

Enough talk, lets do some practical. Select colors and add Toolbar, i’ve selected following colors and pasted in res ⇒ values ⇒ colors.xml. If you don’t find colors.xml, create a new resource file with that name.

<color name="colorPrimary">#4ec07e</color>
<color name="colorPrimaryDark">#3b925f</color>
<color name="colorAccent">#4a90e2</color>


Following steps are required to setup Toolbar
 

  1. Use the Theme.AppCompat.Light.NoActionBar or Theme.AppCompat.NoActionBar to hide system action bar.
  2. Define a layout toolbar.xml containing ToolBar
  3. Use <include> in your activity layout.xml file to add the ToolBar
  4. Instantiate the Toolbar using findViewById inside Activity
  5. Call setSupportActionBar() and pass your Toolbar object inside
  6. Customize different properties of the Toolbar either using toolbar object directly or getSupportActionBar()
  7. Customize the app:theme and app:popupTheme if necessary

Add the Toolbar (Action Bar)

Adding toolbar is very easy you just have to add android.support.v7.widget.Toolbar element where you want to use it or create an xml file named toolbar.xml under res ⇒ layout and paste below code in it. Now you can include this layout file where you want to use.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Open the layout file of your main activity (activity_main.xml) and add the toolbar using <include/>tag.

<LinearLayout 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=".HomeActivity">
 
   <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
 
</LinearLayout>

Open  HomeActivity.java and do following changes in it.

⇒ Extend the activity from AppCompatActivity
 Pass the toolbar object in setSupportActionBar()

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
 
public class HomeActivity extends AppCompatActivity {
 
    private Toolbar toolbar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
 
        toolbar = (Toolbar) findViewById(R.id.toolbar);
 
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }
}

Run the app and see if the toolbar displayed on the screen or not.

toolbar_output

Adding the Toolbar Action Items and Title

To import the Image Asset in Android Studio, right click on res ⇒ New ⇒ Image Asset. It will show you a popup window to import the resource. Select Action Bar and Tab Icons for Asset Type and then Clipart and choose icons.

import_image_assets

Once the icons are imported, open menu_main.xml located under res ⇒ menu and add the search menu item as mentioned below.

<menu 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"
    tools:context=".HomeActivity">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_sort"
        android:orderInCategory="200"
        android:icon="@drawable/ic_action_sort"
        android:title="@string/action_sort"
        app:showAsAction="always" />

</menu>




Add following strings under  res ⇒ values ⇒ strings.xml as action items titles.

<string name="action_sort">Sort</string>
<string name="action_search">Search</string>

Now Override onCreateOptionsMenu() and onOptionsItemSelected() methods in HomeActivity.java to enable toolbar action items as below.

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_home, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        if (id == R.id.action_sort) {
            Toast.makeText(this, "You clicked on sort", Toast.LENGTH_LONG).show();
            return true;
        }

        if (id == R.id.action_search) {
            Toast.makeText(this, "You clicked on search", Toast.LENGTH_LONG).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

Now if we run the app we’ll see action items are visible on toolbar.

action_items_output

Hurrah!!! There you have action items but wait a second. Our action bar/toolbar title is black that doesn’t match icons or app theme. Lets change actionbar them to Dark and pop theme to Light by adding following two lines of code in toolbar.xml.

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Now run the app and see the magic.

Is it looking better?? Enough magic for today, so in this tutorial we learned how to customize material design, toolbar and action items. In next tutorial we’ll learn about navigation drawer and navigation view of design support library. Meanwhile please don’t forget to share it, like it, leave any suggestions, comments, criticisms, or feature requests too. 🙂


This article has 1 comments

Leave a Comment

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