Free Android app covering all aspects of addiction, including prevention and treatment

Android RecyclerView. Multiple selections. Part 1

  • Written by  Clive

Choosing multiple items in a RecyclerView list: part 1

Android RecyclerView choice mode tutorial icon

We’re going to show you how to select multiple items in a RecyclerView list and then save all the selected items’ details at the press of a button.

You’ll easily be able to customise the code to suite your needs.

RecyclerView choice mode selections

Like Google’s Photos app, our tutorial enables the user to select multiple items in a RecyclerView list. Pressing an action menu item in the toolbar performs an action on the selected items

Let’s start with some background stuff.

So what’s action mode and contextual actions?

Most apps using ListView or GridView allow the user to make multiple selections. They can then perform an action, like save or delete, on that collection of selected items.

These apps are probably using Android’s contextual action mode which implements the ActionMode class.

Typically this is how it works:

  • The user long-presses an item which enables action mode. They can now select or deselect  multiple items
  • A contextual action bar appears at the top of the screen. This action bar contains action items such as save or delete buttons which, when pressed, perform these actions on the selected items
  • The action mode is disabled and the contextual action bar disappears when the user clicks on an action item, such as Save to save the selected items, deselects all the items, presses either the Back button or Done action button

To achieve this, the apps implement the AbsListView.MultiChoiceModeListener and ActionMode.Callback interfaces. Calling setChoiceMode() with the CHOICE_MODE_MULTIPLE_MODAL argument enables the user to select multiple items.

This way of handling multiple selections won’t work when using the RecyclerView. We’ll show you how easy it is to take care of this yourself.

In the meantime you may want to check out this tutorial, Using the contextual action mode for contextual menus in your apps: A tutorial

So what does our tutorial app do?

We use a RecyclerView to display a list of items.

  • Selecting an item for the first time enables action mode
  • The toolbar changes from a normal toolbar to an action mode toolbar, making the user aware that they can now select multiple items
  • The counter increases as items are selected and decreases when items are deselected
  • Pressing the save action item saves all the selected items and the toolbar changes back to normal
  • Pressing the cancel icon (X), cancels the selections and returns the toolbar back to normal

Note that we’re using the support library so the app will run on devices using Jelly Bean (Api 16) and up.

Google’s Photos app

You’ve probably seen Google’s Photos app:

RecyclerView action mode selections tutorial google photos

Long-pressing an image puts the app into action mode. This changes the toolbar, reduces the size of the selected image and displays an empty ring in the top-left corner of the image. The user now knows that they can make multiple selections

Our tutorial app may look different but essentially it behaves the same:

RecyclerView action mode selections tutorial app

Long-pressing an item puts the app into action mode. This changes the toolbar, and displays an asterisk (*) on the right of the selected text. The user now knows that they can make multiple selections

Let’s look at our Toolbar

The toolbar shows you where you are, what’s happening and what you can do.

We won’t be covering how to include the toolbar in our app. Check out, Using Toolbars in your apps if you want to know how to do that.

We have one toolbar which replaces the Action Bar. We use it to show either the Normal toolbar or the Action mode toolbar.

RecyclerView action mode selections toolbar tutorial app

The Toolbars: The normal toolbar at the top and the choice or action mode toolbar at the bottom

The normal toolbar

  • The Home icon on the left  - triggers onOptionsItemSelected() where you can include your code to handle this event
  • The Options or overflow menu appears on the right of the toolbar. This triggers the setOnMenuItemClickListener() which is attached to the toolbar. Include your code here to handle these menu items selections

The action mode toolbar

  • The Home icon on the left  - triggers onOptionsItemSelected() where you can include your code to handle this event
  • We have two text views:
    • The X which we use to cancel the selections
    • The counter which shows the number of selected items
  • The action menu item icon – the save icon: pressing this performs an action on ALL the selected items, in this case we save the selected items

Want to know more about action menu items? Check out this great tutorial, Using menus in your apps: a tutorial

RecyclerView action mode selections noormal toolbar tutorial app

The default screen: The normal toolbar is displayed at the top and a scrollable list of items displayed below in a RecyclerView list

The Items

Our items are displayed in a list using a RecyclerView.

Each item is displayed in a row and consists of an id and associated text string. We use our custom ItemData class to build an item object.

Android RecyclerView action mode choice selected items

Selecting items changes the normal toolbar to the action mode toolbar and changes the selected text colour to red. A green asterisk (*) is also displayed, indicating that the app is in action mode. The selected items counter increases as items are selected and decreases as items are deselected

Selecting an item

  • Long-pressing an item enables action mode - The normal toolbar changes to the action mode toolbar and a green asterisk (*) appears on each row. The user can now select multiple items. The selected text also changes colour to red
  • Single touching an item selects it or deselects it if it is already selected
  • The counter in the toolbar increases with each additional selection and decreases with each deselection
  • Press X to cancel the selection. All selected items are deselected, the action mode indicator (the green asterisk) disappears and the action mode toolbar changes back into a normal toolbar
  • Pressing the save action menu item, saves the selected items. The action mode toolbar changes back into the normal toolbar, all selected items are deselected and the action-mode indicator (asterisk) disappears

Show me how: How do we do this?

The main player: looking at the MainActivity activity

Everything happens in the MainActivity activity.

Got some spare time? Why not check out these useful Activity tutorials?

The MainActivity’s layout, activity_main.xml contains a RecyclerView and also includes the toolbar.xml layout. (By the way, have you seen this tutorial? Improve layout performance: Use include and merge)

Taking the lid off the MainActivity’s onCreate() method

This is where we:

  • set up the toolbar
  • set our defaults

We use the RecyclerView to display a list of text and id numbers. The text and id number are contained in an array list.

The data displayed in the RecyclerView

Making it easy: Our dummy data

We’re using dummy data.

We create a class for our data, called ItemData.

An ItemData item contains:

  • itemId  - an int variable containing the item’s id
  • itemText  - a String variable containing the item’s text string

The text is contained in a resource String array, itemsArray.

We build an item in the MainActivity’s onCreate() method, by looping through the string array, using the loop’s index as the item’s id.

The list of items is then passed on to our RecyclerView adapter. The adapter is responsible for passing the data to the RecyclerView which displays the text in a scrollable list.

Here’s the code for creating the dummy data:

Android RecyclerView action mode multiple selection adapter data

Build the ItemData list by looping through the string array, using the index as the items’ id number

The Toolbar

Get your tools: Setting up the Toolbar

Calling setUpToolbar() builds and returns a toolbar object.

Here’s what happens in the setUpToolbar() method:

  • We get a reference to the toolbar view
  • Call setSupportActionBar(toolbar) to replace the action bar with our toolbar
  • We’ve included a Home icon in the toolbar so we set it up here
  • We also attach a click listener to the toolbar to listen for when the user selects any of the menu items

Note that we’re using the support library and have to use the correct theme, Theme.AppCompat.Light.NoActionBar.

Want to brush up on using styles and themes in your apps? Then you may want to check out this tutorial, Keep up with the fashion:  Using Styles and Themes in your apps.

The menu: Selecting menu items in the toolbar

We’ve got two menus defined in xml files:

  • action_mode_menu.xml – contains the save action menu item
  • menu_main.xml – contains the overflow menu items

Selecting either of the menu items triggers the OnMenuItemClickListener’s onMenuItemClick() method where we match the selected menu item’s id to that of our menu items. The appropriate if statement is then executed.

Let’s look at the save action item selection.

Saving your multiple selections: The Save action menu item

Here’s the code:

Android RecyclerView action mode multiple selection toolbar action menu item

The code for handling the action mode toolbar’s save action menu item

So what happens in the if statement?

  • We use an if statement to check whether or not the selected menu item’s id matches the save action menu item
  • saveSelectedIdList - we create a new list of selected items, loading it with the items from the original list (selectedItemIdList), so that we can clear the original list and retain its’ values
  • isInChoiceMode – we set this to false as we are about to exit action mode
  • showNormalToolbar() – we call showNormalToolbar() to replace the action mode toolbar with the normal toolbar
  • thread – we’re going to simulate saving the selected items and do so in a separate thread so as not to block the main thread

Want to know more about threads? Check out these tutorials:

  • cancelSelections() – we call this method to:
    • Clear the selected items list
    • Notify the adapter (by calling notifyDataSetChanged() ) that the we need to reset the item display to normal.  The layout manager is then forced to rebind and re-layout all the visible views

Showing the normal toolbar: Our showNormalToolbar() method

Calling this method replaces the action mode toolbar with a normal toolbar.

Here’s the code:

Android RecyclerView action mode multiple selection show normal toolbar

Call showNormalToolbar() to show the normal toolbar

So what happens here?

  • We hide the two text views (the X and the counter) by making them invisible
  • Then we clear the save action menu item from the menu so that we can display the options menu
  • Finally we inflate the overflow menu
  • And set the tag for the toolbar (which isn’t necessary here as we don’t use the tag)

Showing the action mode toolbar:  Our showActionModeToolbar() method

Calling this method replaces the normal toolbar with an action mode toolbar.

Here’s the code:

Android RecyclerView action mode multiple selection show action mode toolbar

Call showActionModeToolbar() to show the action mode toolbar

So what happens here?

  • We show the two text views (X and the counter) by making them visible
  • Then we clear the options menu items from the menu so that we can display the action mode menu
  • Next, we inflate the action mode menu so that we can display the save icon
  • And set the tag for the toolbar (which isn’t necessary here as we don’t use the tag)
  • Finally we get a reference to the action_mode_menu_save menu item and set it to display the save icon

Coming up in part 2

In the next tutorial, we will discuss the RecyclerView, our custom RecyclerView.Adapter, our custom RecyclerView.ViewHolder and how we put everything together to enable the user to make multiple selections.

When you’re finished working through both tutorials, you’ll be able to modify your apps so that your users can:

  • Long-press a RecyclerView list item to enable action mode
  • Single-press a RecyclerView list item to select or deselect multiple items
  • Replace the Action Bar with your customised Toolbar
  • Display a counter and cancel TextView view in your custom toolbar
  • Display an action item in your custom toolbar
  • Perform an action on your collection of selected items

Look out for part 2! Check out part 2 here