In the previous version of Phimpme a user had to use the traditional popup view to navigate the image to the Edit Activity or to the share activity or move and copy the image. We implemented an additional toolbar on the bottom of the screen to have quick access to the buttons for the said features.

First implementation with popup view

In the first version, we were using popup view to navigate the image while viewing it from the gallery. This is a traditional but rather confusing way for any new user to figure how to choose the edit option or share the image from the gallery.                       

                           
Adding ActionMenuView on the bottom of the screen

Let’s add action menu view to the xml file. To place the ActionMenuView at the bottom of the screen we set android:background to true. By default the color of the bottom action bar to be default color of the application. We want to make the color of the bottom bar to be transparent in order to see the image behind it. To set the color of the bottom bar translucent we append #59 with the color hex code. For example-  android:background=”#59000000”

<android.support.v7.widget.ActionMenuView
         android:id="@+id/toolbar_bottom"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:layout_alignParentBottom="true"
         android:background="#59000000"
         android:elevation="4dp"/>

Add items in the menu to be displayed on the bottom bar

Add menu.xml in res->menu. We need to add items in the menu.xml in order inflate in the bottom bar.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto">
     <item
         android:id="@+id/action_edit"
         android:orderInCategory="200"
         app:showAsAction="always"
         android:icon="@drawable/ic_mode_edit_white"
         android:title="Edit"/>
     <item
         android:id="@+id/action_copy"
         android:orderInCategory="150"
         app:showAsAction="always"
         android:icon="@drawable/ic_content_copy_white"
         android:title="Copy"/>
     <item
         android:id="@+id/action_move"
         android:orderInCategory="100"
         app:showAsAction="always"
         android:icon="@drawable/ic_folder_open_white"
         android:title="Move"/>
     <item
         android:id="@+id/action_details"
         android:orderInCategory="110"
         app:showAsAction="always"
         android:icon="@drawable/ic_info_white"
         android:title="Move"/>
 </menu> 

Inflating Bottom ActionMenuView

In your main activity get the id of the ActionMenuView and typecast it:

ActionMenuView bottomBar = (ActionMenuView) findViewById(R.id.toolbar_bottom);

Inflate the bottomBar with the menu.xml

Menu bottomMenu = bottomBar.getMenu();

getMenuInflater().inflate(R.menu.menu_bottom_view_pager, bottomMenu);

ActionMenuView shares the same onOptionItemSelected function with toolbar of the application. We will send the each item from the action menu bar onOptionItemSelected in a for loop. The loop will run till bottomMenu.size. This enables onClick of the navigation button.

for (int i = 0; i < bottomMenu.size(); i++){
             bottomMenu.getItem(i).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener(){
                 @Override
                 public boolean onMenuItemClick(MenuItem item) {
                     return onOptionsItemSelected(item);
                 }
             });
         } 

Conclusion

While using two toolbars on the application we use ActionMenuView for the second toolbar which is at the bottom. ActionMenuView evenly spaces the button on the bottom toolbar.

Link:

https://github.com/fossasia/phimpme-android

Resources

• http://www.vogella.com/tutorials/AndroidActionBar/article.html
• https://developer.android.com/reference/android/widget/Toolbar.html