Creating Contextual Action Bar – CAB
Before starting all about the action bar and Contextual Action bar concept and coding, I will explain you 2 ways to show contextual actions:
1. Floating Context Menu
2. Contextual Action Mode
You can check my previous tutorial on Action Bar and Action bar Search View to read more on Action bar before starting CAB.
1. Floating Context Menu
In earlier versions of Android, we were used to see almost all the apps having context menu ready for showing options (menu items) whenever user performs a long press on any element. Now, since from Android 3.0, the purpose of Long press gesture has changed, its now used to handle multi-select and contextual actions.
2. Contextual Action Mode
The contextual action mode is a system implementation of ActionMode that focuses user interaction toward performing contextual actions. When a user enables this mode by selecting an item, a contextual action bar appears at the top of the screen to present actions the user can perform on the currently selected item(s).
How to use/implement Contextual Action bar (CAB):
There are 2 designs by which you can implement Contextual Action bar:
1.) Enable CAB when user selects a particular view
2.) Enable CAB whenever user performs a long press gesture on particular view
In this tutorial we will talk about the first method of implementing CAB. The second method I will explore in my next tutorial.
Steps:
1.) Implement the ActionMode.Callback interface. In its callback methods, you can specify the actions for the contextual action bar, respond to click events on action items, and handle other lifecycle events for the action mode.
class ActionBarCallBack 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_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("CheckBox is Selected");
return false;
}
}
2.) Call startActionMode() when you want to show the bar (such as when the user long-clicks the view).
MainActivity.this.startActionMode(new ActionBarCallBack());
Let’s build an example to enable Contextual action mode on the CheckBox selection. Write below code in your MainActivity.java:
package com.contextualactionbarsingle;
import android.app.Activity;
import android.os.Bundle;
import android.view.ActionMode;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
public class MainActivity extends Activity {
private ActionMode mActionMode;
private CheckBox checkBox1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getActionBar().setTitle("CAB demo - Particular view");
checkBox1 = (CheckBox) findViewById(R.id.checkBox1);
checkBox1.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
if(isChecked)
mActionMode = MainActivity.this.startActionMode(new ActionBarCallBack());
else
mActionMode.finish();
}
});
}
class ActionBarCallBack 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_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("CheckBox is Selected");
return false;
}
}
}
Create and run the above code to check the results.
Related Posts
Contextual Action Bar (CAB) – Part2
Creating Bar Chart Using GraphView
Action Bar Search View
Creating A Custom Title Bar
Action Bar
Top 10 Android App Development Trends | 2020 Guide
5 Best Resources to Get Started with Android Nougat
Android Studio Introduction