Android Material Design ActionBar/App Bar: How to Make Custom ActionBar
http://www.viralandroid.com/2015/08/android-material-design-actionbar-appbar.html
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.
Related:
Android Navigation Drawer View: Material Design Support Library
Android Toolbar Example: How to Use Toolbar as ActionBar
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.
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
You have to change your application theme to make material design action bar. Your styses.xml file seems like this.
res/values/styles.xml
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
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
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
We have done all things. Now, run your material design actionbar application that looks what we expected.
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 |
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
Material Design ActionBar Android Material Design App Bar/ActionBar Settings Share Search
Android Material Design ActionBar/App bar |