RecyclerView Android with Dividers and Contextual Toolbar With Examples

Today we’ll be developing a RecyclerView Android app with contextual toolbar to let us select, delete or mark the rows of a RecyclerView. Furthermore, we’ll place dividers between RecyclerView rows.

RecyclerView Android with Dividers and Contextual Toolbar Demo

We’ll be developing an application that displays the number of rows selected. Our app will allow us to delete, mark, refresh and select all rows.

A preview of what we’ll going to achieve by the end of this tutorial is given below.

android-recyclerview-contextual-toolbar-demo-253x450

RecyclerView Android Example

ActionMode is used to display the contextual toolbar when a row is long pressed in the list. This enables us to provide a set of alternative toolbar icons.

We’ll be implementing the four action modes present on the top right.

  1. Reload list
  2. Mark row text
  3. Delete row
  4. Select all rows

To implement the Contextual Toolbar and the above actions, we’ll need to implement the ActionMode.Callback interface in our MainActivity.java class.

The ActionMode.Callback interface consists of 4 methods that we’ll be overriding.

  1. onCreateActionMode: The menu.xml file is inflated in this method.
  2. onPrepareActionMode: This is called every time the Contextual Toolbar is shown.
  3. onActionItemClicked: This is invoked every time a menu item from the Contextual Toolbar is clicked.
  4. onDestroyActionMode: This is invoked when the Contextual Toolbar is closed.

RecyclerView android dependencies

Let’s start off by adding the following dependencies in our gradle build file.

Set the activity’s theme to AppTheme.NoActionBar in the Manifest.xml file as shown below.

RecyclerView Android Example Project Structure

android-recyclerview-contextual-toolbar

The code for activity_main.xml is given below.

The code for content_main.xml is given below:

The layout code for each row of the RecyclerView is given in the file recyclerview_list_row.xml.

The background of the RelativeLayout is a StateListDrawable (bg_list_row.xml) that’ll change its background when the row is selected/deselected.

The code for bg_list_row.xml is given below:

The menu that’ll be displayed inside the Contextual Toolbar is defined in the file menu_action_mode.xml as shown below.

We’ve created a custom ItemDecoration for displaying dividers for each of the rows. The code for DividerItemDecoration.java is given below.

The above code creates a divider line (similar to ListView) after each RecyclerView row based on the orientation.

The code for Model.java that holds the data for each row is given below.

The code for RecyclerViewAdapter.java is given below:

The following code snippet is used to change the state of the StateListDrawable.

The methods selectAll(), removeData() and updateData() would be invoked from the MainActivity.java based on the menu item clicked.

The code for MainActivity.java is given below.

The following code is used to add dividers between the rows.

onRowClicked() and onRowLongClicked() are called every time a RecyclerView row is clicked.

enableActionMode() is used to show the Contextual Toolbar.

The Contextual Toolbar displays the number of rows selected based upon the getSelectedItemCount() from the adapter class.

If all the rows are deleted, we show a floating action button that lets the user populate the RecyclerView with dummy data once again.

The output of the above application in action is given below.
android recyclerview contextual toolbar app

Contextual Toolbar is commonly seen in applications like Whatsapp and Inbox.

This brings an end to the RecyclerView Android example with divider and selectors. You can download the final Android RecyclerViewDividersAndSelectors Project from the link below.

Reference: Android Doc

By admin

Leave a Reply