Select Page

In this post, you will learn how to select multiple items from the list (recyclerview) like WhatsApp, using contextual action mode.

Contextual action mode displays a contextual action bar at the top of the screen with action items such as “copy, edit, delete, share,..etc” that affect the selected item.

First, create an application with recycler view and load the items using an adapter.

For implementing multi-selection, you need to follow these steps

  1. Create/Show the contextual action mode
  2. Item long click allows the user to select multiple items
  3. Change the state of the item
  4. Get the selected data and process it based on the menu action picked by the user
  5. Finally, refresh the list

 

multiselect

1. Create/Show the contextual action mode

Create a menu with the needed options,


<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

<item android:id="@+id/action_delete" android:icon="@drawable/ic_delete" android:title="@string/menu_item_delete" app:showAsAction="always"/>

</menu>

Inflate this menu in Action Mode and connect it with ActionMode callback


private ActionMode.Callback mActionModeCallback = new ActionMode.Callback() {

    @Override
    public boolean onCreateActionMode(ActionMode mode, Menu menu) {
        // Inflate a menu resource providing context menu items
        MenuInflater inflater = mode.getMenuInflater();
        inflater.inflate(R.menu.menu_multi_select, menu);
        context_menu = menu;
        return true;
    }

    @Override
    public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
        return false; // Return false if nothing is done
    }

    @Override
    public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
        return false;
    }

    @Override
    public void onDestroyActionMode(ActionMode mode) {

}
};


2. Item long click allows the user to select multiple items

AddOnItemTouchListener with the recycler view then only you can listen to the click and long click action.Here you need to activate the multi-select mode while the user long clicks any of the items from the list , Then add this selected item into a separate list then only you can remove the already selected data while the user clicks again on the same item.


// Listening the click events

recyclerView.addOnItemTouchListener(new RecyclerItemClickListener(this, recyclerView, new RecyclerItemClickListener.OnItemClickListener() {
    @Override
    public void onItemClick(View view, int position) {
        if (isMultiSelect)
            multi_select(position);
        else
            Toast.makeText(getApplicationContext(), "Details Page", Toast.LENGTH_SHORT).show();
    }


    @Override
    public void onItemLongClick(View view, int position) {
        if (!isMultiSelect) {
            multiselect_list = new ArrayList&lt;SampleModel&gt;();
            isMultiSelect = true;


        if (mActionMode == null) {
                mActionMode = startActionMode(mActionModeCallback);
            }
        }
        multi_select(position);
    }
}));

// Add/Remove the item from/to the list

public void multi_select(int position) {
    if (mActionMode != null) {
        if (multiselect_list.contains(user_list.get(position)))
            multiselect_list.remove(user_list.get(position));
        else
            multiselect_list.add(user_list.get(position));


        if (multiselect_list.size() > 0)
            mActionMode.setTitle("" + multiselect_list.size());
        else
            mActionMode.setTitle("");


        refreshAdapter();
       }
     }


3. Change the state of the item

Based on the selected items list you need to differentiate the selected item from the list then user can identify the selected items for this, you need to change the background color of the item or change the opacity of the list item



@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    if(selected_usersList.contains(usersList.get(position)))
        holder.ll_listitem.setBackgroundColor(ContextCompat.getColor(mContext, R.color.list_item_selected_state));
    else
        holder.ll_listitem.setBackgroundColor(ContextCompat.getColor(mContext, R.color.list_item_normal_state));
}

4. Get the selected data and process it based on the option picked by the user

Next, you need to do the operation which is selected by the user.You already have the selected item into a separate list so you can easily apply the operation on that selected item (for example if the user selects the option “ Delete “ you just get the confirmation from the user with the help of AlertDialog and then removes those data from the list )




if(multiselect_list.size()>0)
{
    for(int i=0;i<multiselect_list.size();i++)
        user_list.remove(multiselect_list.get(i));


    multiSelectAdapter.notifyDataSetChanged();


    if (mActionMode != null) {
        mActionMode.finish();
    }
    Toast.makeText(getApplicationContext(), "Delete Click", Toast.LENGTH_SHORT).show();
}


5. Updating the list

After performing all these things you need to refresh the list then only the user can see the changes.

public void refreshAdapter()
{
    multiSelectAdapter.selected_usersList=multiselect_list;
    multiSelectAdapter.usersList=user_list;
    multiSelectAdapter.notifyDataSetChanged();
}

View on GithubDownload .zip

 

 

Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere