Android ActionMode Toolbar or Contextual Toolbar

In This Tutorial

Here, we are going to learn how to implement ActionMode toolbar on RecyclerView item selection. In our demo we have two options, delete(to delete selected row) and flag(to flag selected row), which got activated on long press of an RecyclerView item. In The end it’s looking like this.

actionmode toolbar

Prerequisite

This tutorial required a knowledge of the working of RecyclerView. Please read through working of recyclerview and implementing OnItemClickListener on RecyclerView.


Download

The source code for this post is available at GitHub. You can download/checkout this from here


What is ActionMode toolbar?

ActionMode Toolbar represents a contextual toolbar or an alternate mode of user interface. It can be used to provide alternative interaction modes having some more options and is visible over an normal toolbar until finished. You have seen ActionMode toolbar in many apps like Gmail, WhatsApp etc. which is visbile on long press of email/chat ans allow you to select multiple emails/chats i.e. called Action Mode. You can learn about an ActionMode in detail from here

Gmail ActionMode ToolBar

gmail actionmode toolbar

How to use ActionMode toolbar?

For using ActionMode toolbar, we need to implement ActionMode.Callback. It’s a Callback interface for action modes, supplied to startSupportActionMode(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:
1. onCreateActionMode(ActionMode, Menu) – called once on creation.
2. onPrepareActionMode(ActionMode, Menu) – called after creation when an ActionMode is invalidated.
3. onActionItemClicked(ActionMode, MenuItem) – called any time a contextual action button is clicked.
4. onDestroyActionMode(ActionMode) – called when the action mode is destoryed.

Adding Toolbar and RecyclerView Widgit

1. build.gradle

Adding support library dependency for RecyclerView

2. activity_main.xml

In your layout file, add custom toolbar and RecyclerView Widget.

Model Class

1. Item.java

A model class is created to hold data for specific row.

Row Layout

1. item.xml

To render recyclerView single row.

RecyclerView Adapter

1. RecyclerViewAdapter.java

Menu

1. menu_more.xml

Create menu inside res=>menu to show option when an ActionMode Toolbar is activated.

Activity

1. MainActivity.java

Create inner class name ActionModeCallBack.java which implement ActionMode.Callback interface. To start showing ActionMode Toolbar you need to call startSupportActionMode(new ActionModeCallBack()).

Issue

When you run the app you will see the action mode above your toolbar.

actionmode-toolbar-above-actual-toolbar

Fix

To fix above issue you need to add windowActionModeOverlay attribute and set it to true in your style.xml

1. style.xml


Customizing ActionMode Toolbar

1. style.xml

Changing ActionMode Toolbar color, open res=>values

2. MainActivity.java

To change status bar color, when an ActionMode toolbar is activated you need to set it inside OnCreateActionMode

About Jitendra Singh

Hi there, I'm a founder at androidfizz and a career oriented entity in an area of development of android based mobile applications.

View all posts by Jitendra Singh →

Leave a Reply

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