Life of Apps

Moving to Material Design: Changing the Action Bar and Components

Taking cue from Google's Contacts, Gmail and other apps, I moved the main actions such as Edit, Delete and Save to the ActionBar. The buttons at the bottom of the screen were replaced with corresponding menu actions on the ActionBar or AppBar as it is now called.

The Preferences in the main screen moved into the overflow menu in the ActionBar. The screen before material design was also shown in a previous post.

Main screen before (left) and after (right)

Main-before   Main-after

Preferences/settings screen before (left) and after (right)

settings-before   settings-after

Add screen before (left) and after (right). Taking inspiration from the "Add Event" screen in the Google Calendar app, I did away with the static labels and just left them as hints in the corresponding text fields. The icons are also refreshed from the Material Icons 2.0 library.

Add-before   Add-After

The Edit screen looks similar to the Add screen but comes with the values pre-populated. Before (left) and after (right)

Edit-before   Edit-After

View screen before (left) and after (right). With the title and buttons moving to the ActionBar, there is more room for the image to be displayed.

View-before   View-After

Date pickers before (left) and after (right)

Date picker-before   Date picker - after

From a code point of view, adding menu actions to the AppBar is not unique to Material Design; just create the Menu Items and add them to the Menu component.
//menu items for edit and delete
public boolean onCreateOptionsMenu(Menu menu)



return true;


To get the changed look for ActionBar and all the other UI components, all you need to do is choose the higher max target API version and change the theme for the application to Material in the android manifest file. There is no code change required to be made to get the material look.


Visit for apps developed by Danesh

No comments :

Post a Comment

Leave a Comment...