Canarys | IT Services

Blogs

Material Design in Android – Working with Toolbar

Date:
Author:
Share

Introduction to Material Design

Material Design is a comprehensive guide for visual, motion and interaction design across platforms and devices. Material Design is the new “user experience philosophy” for Android apps. In this article we will take a look at the new Actionbar replacement called Toolbar.

Toolbar

A Toolbar is similar to an Actionbar and can be a complete replacement to Android Actionbar. The Toolbar was initially introduced in Android Lollipop version. Along with the release of Android Lollipop and material design, Android has also updated the AppCompat Support Libraries so that we can use Toolbars on devices running API Level 7 and above (Android versions 2.1.x and above).

For implementing the Toolbar in your app, please follow the steps detailed below:

  1. Create a new Android project using Eclipse
    • In the Project Explorer, right-click your project and select Properties.
    • In the Properties window Library pane, click Add.
    • Select the Library Project and click Ok.
    • Click Ok to close the Properties window..
  2. Set the app styling in the file res/values/styles.xml. It is important that the theme extends Theme.AppCompat as it includes everything that is needed to support material design in earlier versions of Android. Set the necessary attributes as shown.

res/values/styles.xml

  1. Set the app colors in the file res/values/colors.xml as shown.

res/values/colors.xml

  1. Create the Toolbar using android.support.v7.widget.Toolbar viewgroup in your layout. The layout file should resemble the code as shown.

Toolbar in layout

  1. Implement the Activity.. The activity needs to be extended from AppCompatActivity as the ActionBarActivity is now deprecated.

MainActivity

  1. Add the Toolbar menu options using the file res/menu/main.xml as shown. Two menu options have been created in the xml
    • Search – always shown on the Toolbar.
    • Settings – always hidden on the Toolbar. Will be displayed when the more icon is clicked.

Menu options

  1. To implement On Click() event on Toolbar options in the Activity class, add the following code after setContentView(layoutResid) as shown.

Click action

  1. The completed source file should resemble the code depicted below:

complete code part 1

  1. When the app is run, we will be able to see the Toolbar with menu icons as shown.

App first screen

  1. Clicking the Search icon will display the message “You Clicked Search”.

App second screen

  1. Click the more icon in the Toolbar will display the Settings menu as shown.

App third screen

  1. Clicking the Settings menu will display the message “You Clicked Settings” and hide the Settings menu.

App fourth screen

  1. This concludes the current article on using the Toolbar provided as part of the Material Design. We will be introducing the other interesting capabilities in the Material Design in our upcoming blogs.

Leave a Reply

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

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.