Android ToolBar

Android ToolBar

Android’s new operating system named Android Lollipop, is highly focused on rich user experience and what they called it as material design. In this example we will take a look at the new Actionbar replacement called Toolbar.

What is Toolbar?

Toolbar is a complete replacement to Android ActionBar. It provides greater control to customize its appearance unlike old ActionBar. Using Toolbar, application developer can now, show multiple toolbars on the screen, spanning only part of the width, etc.

It is introduced in Android Lollipop, API level 21 (Android 5.0 Lollipop) release, and hence it is available to use, out of box for the application that are targeted to 21 and above. However, as always Google provides fully supported Toolbar features to lower android os devices via AppCompact support library. In AppCompat, Toolbar is implemented in the android.support.v7.widget.Toolbar class.

A Toolbar can be used in two ways.

  1. Use a Toolbar as an replacement to ActionBar. In this you can still continued to use the ActionBar features such as menus, selections, etc.
  2. Use a standalone Toolbar, where ever you want to place in your application.

If you are on the latest version of Android SDK you don’t have to add library of Appcombat v7 21 if not then please make sure you add that library to use ToolBar.

Example

In this example I will show you how to implement ToolBar with ActionBar and without ActionBar (standalone).

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java).

2. Open your your AndroidManifest.xml file and set TargetSDK to 21 or 22 according to Lollipop and I had added two more activities because i am using three activities.

3. Create a layout file for splash screen under res ⇒ layout folder. I named the layout file as activity_main.xml. This layout contains two buttons both to open different activities.

4. Now, for button selector we have to create a new xml file in  drawable directory under res directory naming button_selector.xml and set it to button background.

5. Following is strings.xml, the strings that i used in this exmple.

6. Now, for material designing we have to select some primary colors and put it in our xml file by creating a new xml file naming colors.xml. You can select this colors palette from this link.

Now what the use of this colors, you can see the image below

material_designing

 

7. Now, we have to customize the theme also so go to values directory and add these code to your styles.xml file. In this we set all the colors and set actionbar false.

8. Now, create a layout naming toolbar.xml in this layout create a toolbar set background and theme to it and this layout we are going to use in our other layouts.

9. Now, for other two activities we create two layouts containing toolbar. The include tag is used to include the other layouts in a layout. This make the layout reusable.

First layout name is toolbar_actionar.xml. This layout is for toolbar with actionbar.

Second layout name is toolbar_noactionar.xml. This layout is for toolbar without actionbar.

10. Now, come to MainActivity.java and add the following code to that activity, in this activity i just call different activity on button clicked.

11. For menu items on toolbar we have to make a new xml file under menu directory naming main.xml.

12. Now, for ToolBar with ActionBar we have to find the id of toolbar and add this line :

For inflating menu items we can inflate like we are inflating in our Android Menus Tutorial and other methods also.

13. Now, for ToolBar without ActionBar i.e. standalone toolbar, we have to find the id of toolbar and use all the methods of toolbar only below code contains mostly all the code of toolbar like inflating menu and click listener over it.

14. Finally, all done  –  run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

 

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)