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 – >

 

 

 

COMMENTS (2)
Reply

Nice Example ! Thanks !

Reply

Thanks for this excellent tutorial!

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)