Loading...

Android Material Design ActionBar/App Bar: How to Make Custom ActionBar

Google focused on material design in the new operating system Android 5.0 (lollipop). After release of Android 5.0, almost all Google apps have been already updated with the use of material design. Not only Google, others developers also updated their application because good design makes good users experience. Material design brings a lot of new features and in this article I will clarify how to implement material design App Bar/Action Bar, now ActionBar has been replaced with Toolbar/App Bar. We use Toolbar as ActionBar in android application.

Android Material Design ActionBar/App Bar: How to Make Custom ActionBar

Related:
Android Navigation Drawer View: Material Design Support Library
Android Toolbar Example: How to Use Toolbar as ActionBar


How to Implement Material Design ActionBar/App Bar to Android App

 

Android Material Design ActionBar Color
Android Material Design ActionBar Color
Before jumping to our coding part, let’s talk about the color scheme. In this image, you can see some useful places to modify app color to make maderial design app bar. Here, we’ll change color of colorPrimary, colorPrimaryDark and textColorPrimary. colorPrimary denotes primary color of your app and used in ActionBar/App Bar, colorPrimaryDark used as status bar color and textColorPrimary primary text color of your application respectively.

Material design helps android developer to make their application professional looking. You have to add appcompact as a dependency in your build.gradle file to implement material design actionbar/app bar. Let’s start by adding appcompact support library in your build.gradle file.
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
}

Add Color Attribute


You have to create colors.xml file in your values folder to add color attribute then your colors.xml file looks like this.
res/values/colors.xml

Change Your App Theme


You have to change your application theme to make material design action bar. Your styses.xml file seems like this.
res/values/styles.xml

Add Toolbar to Your Activity File


Toolbar is like other android ViewGroup, you can add Toolbar inside your activity layout directly or make separate layout and include that inside your layout. After adding Toolbar, activity layout will look like this.
res/layout/activity_main.xml

Modify Your Java Activity File


To make Toolbar working like an Action Bar, you have to add two lines of code to your activity file and activity file looks like this.
src/MainActivity.java

Add Menu Items


Finally, we have not added menu item in toolbar/app bar. TO add menu item in your app, just add menu item inside your menu file. Don’t forget to add menu item icons ic_action_search and ic_action_share in your drawable folder.
res/menu/menu_main.xml

And update your string.xml file.
res/values/strings.xml
<resources>
<string name="app_name">Material Design ActionBar</string>
<string name="hello_world">Android Material Design App Bar/ActionBar</string>
<string name="action_settings">Settings</string>
<string name="action_share">Share</string>
<string name="action_search">Search</string>
</resources>

Android Material Design ActionBar/App bar
Android Material Design ActionBar/App bar
We have done all things. Now, run your material design actionbar application that looks what we expected.
Tutorial 6338728705412751351
Home item