Android Contextual Action Mode Over Toolbar

Android Contextual Action Mode Over Toolbar

You have seen Action Mode Menu in many apps like Whatsapp, Hike, Gmail, etc. while selecting multiple chats/emails on long press i.e. called Action Mode

What is Action Mode?

It represents a contextual mode of the user interface. Action modes can be used to provide alternative interaction modes and replace parts of the normal UI until finished. Examples of good action modes include text selection and contextual actions.

How to Use?

For Using Action Mode we need to extend our class with ActionMode.Callback. Its a Callback interface for action modes. Supplied to startSupportActionMode(Callback) (Callback)}, a Callback configures and handles events raised by a user’s interaction with an action mode.

An action mode’s lifecycle is as follows:

Example

In this tutorial, we are going to learn how to implement Action Mode on ListView and RecyclerView item selection.

Prerequisite:

  1. ListView
  2. RecyclerView
  3. Toolbar
  4. Tab Bar Layout

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

3. Open strings.xml located under res=>values folder and add following strings.

4. Create new xml file naming colors.xml  under res=>values folder and add the following colors.

5. Open styles.xml located under res=>values folder and add following styles.

Some important part about above styles.xml:

  • windowActionModeOverlay should be true otherwise you will get action mode above toolbar not overlays the toolbar.
action mode above toolbar

action mode above toolbar

  • actionModeBackground is used to set custom background to your action mode menu else it will take default theme color.
default theme action mode

default theme action mode

6. Create activity_main.xml and add the following code. In this i am using Tab Bar Layout for creating tabs.

7. Create list_view_fragment.xml for ListView fragment and add ListView to it.

8. Like above we also need to create recycler_view_fragment.xml for RecyclerView fragment and add the RecyclerView to it.

9. Now we need to create custom row for both ListView and RecyclerView. So we can use same xml for both, so create new xml file naming item_row.xml.

10. Now come to MainActivity.java and add the following code for adding tabs and fragments to it.

11. Create new ViewPagerAdapter.java class for ViewPager tab fragments.

12. For Custom ListView and RecyclerView we need to create getter and setter class naming Item_Model.java.

13. Now create ListView_Fragment.java and add the following code. In this i am implementing ActionMode on ListView long click item and starting Action Mode.

14. Now for ListView adapter create new adapter class naming ListView_Adapter.java and add the following code. In this last some methods do the main thing for item selection.

15. Now this is main class in which Action Mode things happen. So create new class name Toolbar_ActionMode_Callback.java  and add the following code. In this we are inflating action mode menu and implementing click listener over menu items.

16. For action mode menu create menu inside menu folder and add the following menus to it.

17. Now for RecyclerView create new java class naming RecyclerView_Fragment.java and add the following code. It is mostly same as ListView_Fragment.java.

18. Create ViewHolder for RecyclerView adapter naming DemoViewHolder.java and add the following code.

19. For RecyclerView adapter create new java class naming RecyclerView_Adapter.java and add the code.

20. For RecyclerView click listener we need to create a interface naming RecyclerClick_Listener.java and the following code.

21. Now for implementing touch listener over Recycler View create RecyclerTouchListener.java and implement the interface that we created and add the following code to it.

22. Finally, all done – now you can also create ActionMode.

Thanks. 🙂

Download Source Code – >

 

 

 

About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.

COMMENTS (12)
Reply

Nice Example ! Thanks !

Reply

Thanks for this excellent tutorial!

Reply

How can I save the selected items? So that when I rotate the phone they are selected correctly.

      The problem is that when selecting multiples items from the listview or recyclerview, and then changing the orientation (example: portrait to landscape) of the device, the items are no longer selected. How do I keep them selected?

      tks,

    Hi Ralf,

    For saving listview/recyclerview selection you need to save the selection state in onSaveInstanceState(Bundle outState) method only and get it back in
    onCreate(Bundle state){
    if( state != null ){
    //Get your selected state.
    }
    }

    There are so many solutions available over stackoverflow.
    Thanks

      Hi Dr.Droid,

      Thanks for help! =)

Reply

Hi,

Is there any property to change the background colour of toolbar when action mode enabled. I mean dynamically change toolbar color when action mode enabled.

    Hi Bibin,

    In above article if you see the video, in video if user enable action mode then toolbar color is changing.
    If you mean something different then let me know.

    Thanks

Reply

private void implementListViewClickListeners() {
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
//If ActionMode not null select item
if (mActionMode != null)
onListItemSelect(position);
}
});
listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView parent, View view, int position, long id) {
//Select item on long click
onListItemSelect(position);
return true;
}
});
}

i was told that i need an identifier in the AdapterView in ListView.java class

    Hi Johnson,

    Sorry!! But i didn’t get your problem. Can you please make your question clear?

    Thanks

Reply

Hello there,

I have looked on your tutorial and I have concerned with other tutorials too. The code implementation is slightly different than yours but the concept is same.
I also have two tabs and I am trying to handle all possible touch given by the user. Suppose I am selecting items from the recycler view list of one tab & accidently or for purpose I click on the another tab. Then I have implemented action mode to be destroyed. And returning to previous tab gives me the recycler view items, on long press of the items shows the action mode too but the items are not selectable. But if again I click on the another tab & return back to previous tab, the selection is working properly. The selection of items is working in alternate fashion when I click in another tab.
Can you figure out something???

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)