Great User Experience with Contextual Action Bar (CAB)

Android, Mobility, Technology

20 / May / 2015 by Anand Rai 0 comments

Now we are going to learn a new interesting thing. In Android versions before 3.0, we have seen all apps having context menu for showing menu, when user long presses item that means long press is only used for showing contextual menu.

But Android 3.0 changed the long press gesture. It’s used for handling multiple selections.

What is Contextual Action Mode.

This is a syste implemented Action Mode that keep attention towards user interaction while performing contextual actions.
As user perform action for this mode by selection of an item, a contextual action bar shows onthe top of screen with some actions user can perform with the selecte item(s).

Contextual Action bar (CAB)

Contexual action bar is an action bar (not a permanent action bar) i.e. action bar that oerlays default action bar of a particular app for performing aub task.

Mainly it is used for performing for selection of data like cut cope paste and delete or different type of action on a single or multiple item.

As shown in above snap’s user can do following things:

Select additional data items by touching them.
Trigger an action from the CAB that applies to all highlighted data items. The CAB then automatically dismisses itself.
Dismiss the CAB via the navigation bar’s Back button or the CAB’s checkmark button. This removes the CAB along with all selection highlights.

CAB action of own choice:

In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to the selection. Actions that apply to a single selected data item don’t necessarily apply to multiple selected data items of the same kind.

Sometimes you may need to adjust own action in Contextual action bar dynamically as per some dynamic functionality. So this can be done by adding icons in contexual_action_menu.xml and add it’s action like below.

[code]<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

</menu>[/code]

For enabling contextual action bar when user select some view, go through the following steps:

Implement interface ActionModel.CallBack and its methods, so action can be performed for CAB for click events on items respectively and also handling lifecycle of action mode.

Need to call startActionMode(), when need to use CAB like on long click on any view.

[code]class CABCallBackExample implements ActionMode.Callback {

@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
// TODO Auto-generated method stub
mode.getMenuInflater().inflate(R.menu.contextual_action_menu, menu);
return true;
}

@Override
public void onDestroyActionMode(ActionMode mode) {
// TODO Auto-generated method stub

}

@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
// TODO Auto-generated method stub

mode.setTitle("items is selected");
return false;
}

}
[/code]

Call StartActionMode()

[code]CABExampleActivity.this.startActionMode(new CABCallBackExample());[/code]

If you want to invoke the contextual action mode only when the user performs long press gesture on view like ListView or GridView, and want to perform batch actions on multiple selected items then you can implement this, follow the below steps:

Implement the AbsListView.MultiChoiceModeListener and set it to your ViewGroup (e.g. ListView). In its callback methods, you can specify the actions for the contextual action bar, respond to click events on action items, and handle its callback events (Which are actually inherited from ActionMode.Callback interface).
Call setChoiceMode() with the CHOICE_MODE_MULTIPLE_MODAL argument.

[code]mListView.setMultiChoiceModeListener(new MultiChoiceModeListener() {

@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
// TODO Auto-generated method stub
return false;
}

@Override
public void onDestroyActionMode(ActionMode mode) {
// TODO Auto-generated method stub
}

@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
// TODO Auto-generated method stub

MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.contextual_action_menu, menu);
return true;
}

@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
// TODO Auto-generated method stub
return false;
}

@Override
public void onItemCheckedStateChanged(ActionMode mode, int position,
long id, boolean checked) {
// TODO Auto-generated method stub
}
});
[/code]

Call setChoiceMode() with the CHOICE_MODE_MULTIPLE_MODAL argument:

[code]mListView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);[/code]

Enjoy app’s actions with some actions 😉
Ref: http://developer.android.com/design/patterns/selection.html
http://developer.android.com/reference/android/view/ActionMode.html

Anand Rai

My Linkedin
My Stackoverflow
My Twitter

Blogs