Contextual ActionBar in Android

Android Contextual action bar is a temporary action bar which will appear as an overlay to original actionbar or toolbar. It is mainly used for selecting multiple items in ListView or GridView on the action of long press. When we click on the selected item again, it will get deselected. Finally for doing some operation like deleting items from listview, we can get the selected items from the Listview or Gridview. Here in this example let us see how to implement a contextual ActionBar in android.

Steps

  • Create new project in android studio.
  • Implement menu for contextual action bar.
  • Add the listview widget to layout file.
  • Implement the code for displaying contextual action bar in java file.
  • Styling contextual action bar.
contextualactionbar
contextualactionbar

Before starting please check my tutorial Android Listview which explains how to implement a listview in android. I am using same codes here to show implement listview. And will add the code for contextual action bar which allows to delete the selected items in listview.

Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Implement menu for contextual action bar

For implementing a contextual action bar in android we definitely need a menu file. Menu will contain icons for contextual action bar actions. So we need to create a file under res->menu->menu_contextual_actionbar.xml. Use the following code to  the file which is created.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item
android:id="@+id/menu_delete"
android:orderInCategory="100"
android:showAsAction="ifRoom|withText"
android:title="Delete"
android:icon="@android:drawable/ic_menu_delete"
tools:ignore="AppCompatResource" />
</menu>

Add the listview widget to the layout file

For implementing a contextual action bar you need to have either of listview ,recyclerview or a gridview which will allow you to choose multiple items. Here in this tutorial i will explain it with listview . For  displaying a listview in your activity you need to place the following code in your layout file.

<ListView
android:id="@+id/lv_languages"
android:layout_height="wrap_content"
android:layout_width="match_parent">

Implement the code for contextual action bar in your java file

In this step we will learn the code for displaying contextual actionbar for a listview. The first thing is to get the reference of the listview in your java file.  After that you need to add the following code which will first set the listview choice mode to multiple and then the code for displaying contextual actionbar.

lv_languages.setChoiceMode(AbsListView.CHOICE_MODE_MULTIPLE_MODAL);

lv_languages.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() {
@Override
public void onItemCheckedStateChanged(ActionMode mode, int position, long id, boolean checked) {

mode.setTitle(""+lv_languages.getCheckedItemCount()+" items selected");

}

@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
MenuInflater menuInflater = mode.getMenuInflater();
menuInflater.inflate(R.menu.menu_contextual_actionbar,menu);
return true;
}

@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;
}

@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()){

case R.id.menu_delete:

//action on clicking contextual action bar menu item

SparseBooleanArray checkedItems = lv_languages.getCheckedItemPositions();
for(int i =0;i<checkedItems.size();i++){

if(checkedItems.valueAt(i) == true){

languagesarraylist.remove(i);

}
}
language_adapter.notifyDataSetChanged();

mode.finish();
}
return true;
}

@Override
public void onDestroyActionMode(ActionMode mode) {

}
});

If you are not familiar with implementing a listview ,don’t worry am providing the complete code of your activity’s java file to be implemented. Code contains task for creating and adding data to listview and as well as displaying contextual action bar when multiple items are selected

MainActivity.java

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
ListView lv_languages;
ArrayAdapter<String> language_adapter;
ArrayList<String> languagesarraylist;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//method for initialisation
init();

//setting array adaptet to listview
lv_languages.setAdapter(language_adapter);

//
lv_languages.setChoiceMode(AbsListView.CHOICE_MODE_MULTIPLE_MODAL);

lv_languages.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() {
@Override
public void onItemCheckedStateChanged(ActionMode mode, int position, long id, boolean checked) {

mode.setTitle(""+lv_languages.getCheckedItemCount()+" items selected");

}

@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
MenuInflater menuInflater = mode.getMenuInflater();
menuInflater.inflate(R.menu.menu_contextual_actionbar,menu);
return true;
}

@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;
}

@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()){

case R.id.menu_delete:

//action on clicking contextual action bar menu item

SparseBooleanArray checkedItems = lv_languages.getCheckedItemPositions();
for(int i =0;i<checkedItems.size();i++){

if(checkedItems.valueAt(i) == true){

languagesarraylist.remove(i);

}
}
language_adapter.notifyDataSetChanged();

mode.finish();
}
return true;
}

@Override
public void onDestroyActionMode(ActionMode mode) {

}
});

}

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("CodesFor Languages");
languagesarraylist = new ArrayList<>();

//adding few data to arraylist
languagesarraylist.add("SQL");
languagesarraylist.add("JAVA");
languagesarraylist.add("JAVA SCRIPT ");
languagesarraylist.add("C#");
languagesarraylist.add("PYTHON");
languagesarraylist.add("C++");
languagesarraylist.add("IOS");
languagesarraylist.add("ANDROID");
languagesarraylist.add("PHP");
languagesarraylist.add("LARAVEL");

// initialising array adapter

language_adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_activated_1,languagesarraylist);

lv_languages = (ListView) findViewById(R.id.lv_languages);
}

}

Styling contextual action bar

In this step we will learn how to customize the contextual action bar . First step for customization is we need to define a custom style for the contextual actionbar. For having a custom style just add the following code to your theme in style.xml, if you are using toolbar

<item name="windowActionModeOverlay">true</item>
<!--if you want to style action mode with differnet color -->
<item name="actionModeStyle">@style/styleActionMode</item>

Now in the above step we are referring to a style and in this step we need to create that style . Suppose if you want to  change the color of contextual action bar you can add the following code to the new style,like that you can add more styles based on your requirement.

<item name="background">@color/colorPrimary</item>
<item name="actionMenuTextColor">@color/white</item>

Now Run the code ,you will get the above mentioned output.

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

4 Comments

  1. Pammy December 30, 2017 Reply
    • rameesAuthor December 30, 2017 Reply
  2. nizam October 6, 2016 Reply
    • rameesAuthor October 11, 2016 Reply

Add a Comment

Your email address will not be published. Required fields are marked *