Android ToolBar Tutorial With Material Design

Android ToolBar Tutorial with Material Design

In this tutorial we are going to learn how to create android ToolBar with Material Design support. In android 5, android ToolBar was introduce.

Although, the new android ToolBar can sit in the same application with the ActionBar. The android Toolbar is very flexible because its sizes, color and position can be easily changed.

The ToolBar can be place anywhere in an app and it can also server as a standalone view. The android ToolBar is a ViewGroup which can contain other View controls.

The recent android AppCompat support libraries V7, supports android API level 7 and up

In this tutorial, we will create a new ToolBar and used it to replace our app ActionBar. We will also go ahead and add other action views and our application logo icon.

If you don’t know much about android Material Design, I will suggest you read the documentation and Google Material here.

android Material Design

If you are using a version of android Studio without support for updated version of appcompat V7 library, you should endeavor to add the compile dependency to your project build.gradle file.

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'

}

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidToolBar

Package: com.inducesmile.androidtoolbar

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

We are going to change our parent theme for our application to Theme.AppCompat.Light.NoActionBar  in our project styles.xml file location in the resource folder. NoActionBar implies that our theme will not have any ActionBar. That will give so the room so that we can replace the ActionBar with the ToolBar ViewGroup.

We are going to add color resources in colors.xml file. If you don’t have this file in your resources folder, kind create it. In Material Design, there are three important colors necessary for app design.

1. Color Primary – The primary color of your application. This color will form the background color for our ToolBar.

2. Color Primary Dark – The dark version of the primary color is usually use for the status bar. This will afford a slight distinction between the StatusBar and ToolBar

3. Accent ColorAccent colors are colors that are used for emphasis in a color scheme.

This color resources are add to the style which will be use in our app. The colors.xml code snippet is shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#2196F3</color>
    <color name="color_primary_dark">#1976D2</color>
    <color name="accent_color">#536DFE</color>
</resources>

The corresponding styles.xml file code is as shown.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary_dark</item>
        <item name="colorAccent">@color/accent_color</item>
    </style>
</resources>

The strings.xml resources that holds reference to our application string resources is as shown below.

<resources>
    <string name="app_name">Android Toolbar</string>
    <string name="action_settings">Settings</string>
    <string name="action_refresh">Settings</string>
    <string name="action_new">Settings</string>
    <string name="logo_desc">App logo</string>
</resources>

Now, lets focus our attention on how to create our ToolBar ViewGroup. Since the ToolBar is in the support library, open your activity_main.xml file and add the following code to your layout file.

<RelativeLayout 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=".MainActivity">
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/color_primary"
        android:layout_width="match_parent"
        android:layout_height="64dp">
    </android.support.v7.widget.Toolbar>

</RelativeLayout>

We will ahead over to our MainActivity.java file to instantiate an object of the ToolBar. This is done with the Activity class method findViewById(int resourcesId) . The resources ID is the corresponding Id of the ToolBar.

Once we have an instance of the ToolBar, we will call the setSupportActionBar(topToolBar)  and pass our ToolBar object to it.

The complete code for the class is shown below. Note that we have add our app logo brand by calling topToolBar.setLogo(R.drawable.logo)  with and image resources id.

package inducesmile.com.androidtoolbarexample;

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


public class MainActivity extends ActionBarActivity {

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

        setTitle(null);

        Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(topToolBar);
        topToolBar.setLogo(R.drawable.logo);
        topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc));
    }

    @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_main, 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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        if(id == R.id.action_refresh){
            Toast.makeText(MainActivity.this, "Refresh App", Toast.LENGTH_LONG).show();
        }
        if(id == R.id.action_new){
            Toast.makeText(MainActivity.this, "Create Text", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

Finally, we added some action view in our Toolbar by updating our project menu_main.xml file. The update version of the file is as shown.

<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=".MainActivity">
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item android:id="@+id/action_refresh"
        android:title="@string/action_refresh"
        android:icon="@drawable/ic_action_refresh"
        android:orderInCategory="200"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_new"
        android:title="@string/action_new"
        android:icon="@drawable/ic_action_new"
        android:orderInCategory="300"
        app:showAsAction="ifRoom" />
</menu>

Save the file and run your project. If everything works for you, the project will appear like this in your device.

Android ToolBar Tutorial with Material Design

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

No Responses

Add a Comment