RecyclerView Selection —Easily make your adapter items selectable

This article is part of the MultiViewAdapter cookbook series. With this Cookbook series, you can learn about various recipes of building most complex RecyclerView adapters.

Adding the selection/choice mode to an adapter is complex. It is more complex when you have to implement both single-selection and multi-selection into a single adapter. Not anymore. With MultiViewAdapter you can build the most complex selection mode inside a single adapter. In this cookbook recipe, we will learn how to build the following screen.

Bob is working in a product based start-up. The start-up is fast-moving place where people are building different products and everyday there is a release for one product or another. Bob is currently responsible for building a news feed app. In this app users will be able to see news headlines from different news sources. Bob’s product manager, Alice, asked him to build a preference screen.

Iteration 1 :

Alice : Currently our system supports only one news source. Users can see feed from that one news source. So we need to build a preference screen, where the user can select a news source of their choice. The screen has to display list of news sources grouped into two sections. News sources will be grouped and sent through API.

Bob noted the requirement and looked at the design. He thought to himself, ‘the data is sent from server and its dynamic, so building a static layout will not make sense’. He broke down this feature into two tasks. Task 1 is to display the items using an recyclerview adapter. Task 2 is to allow the users to select an item. He evaluated various libraries and in-house solutions and finally chose — MultiViewAdapter.

Task 1

Bob identified there are two view types in the design, Header and NewsSource. So he has to build two ItemBinders using MultiViewAdapter library. Finally, he wrote the following code to display adapter.

Task 2

Now, Bob has to make the adapter selectable. There are two viewtypes, Header and NewsSource, out of which only NewsSource needs to have click listener. Also the choice mode should be ‘Single’. So he made the following changes.

Inside NewsSourceBinder’s viewholder he added the click listener,

public ViewHolder(View itemView) {
      super(itemView);
      imageView = itemView.findViewById(R.id.image_view);
      cardView = (CardView) itemView;
      textView = itemView.findViewById(R.id.text_view);
      itemView.setOnClickListener(view -> toggleItemSelection());    }

Now he set selection mode to the adapter.

adapter.serSelectionMode(Mode.SINGLE);

Ha! It’s done. Bob went home happily!

Iteration 2 :

Alice : Our system is now upgraded. Users can choose one news source from each section.

Bob understood the requirement. So he made the following changes.

adapter.setSelectionMode(Mode.MULTIPLE);
newsPaperSources.setSelectionMode(Mode.SINGLE);
newsChannelSources.setSelectionMode(Mode.SINGLE);

Ha! Bob went home early that day as well!

Iteration 3 :

Alice : Our backend team made few more changes. Now the users can select multiple sources from news paper section and one source from channels section.

Bob : …

Alice : This is tough to achieve, so you can take as much time for this change. But please make sure we release it today by EOD.

Bob smiled to himself and made a single change. It was done.

adapter.setSelectionMode(Mode.MULTIPLE);
newsPaperSources.setSelectionMode(Mode.MULTIPLE);
newsChannelSources.setSelectionMode(Mode.SINGLE);

Iteration 4 :

Alice : This is an obvious change. Now our system supports multiple sources. So we need to change our preference screen again. After this we will work on new screen.

Bob knew this was coming.

adapter.setSelectionMode(Mode.MULTIPLE);
newsPaperSources.setSelectionMode(Mode.MULTIPLE);
newsChannelSources.setSelectionMode(Mode.MULTIPLE);

New Screen :

Alice : Our news feed screen shows news headlines from all news sources. So we have decided to build a new filter screen. It will be exactly similar to preference screen. But we need to add ‘Not Interested’ option to each section.

Bob : But why we need to add ‘Not Interested’ option? If user doesn’t choose any option, it means ‘Not Interested’ right?

Alice explained : No, it is only valid for preference screen. But inside filter screen, if the user doesn’t choose an option it means that no filter is applied and all sources will be displayed.

Bob : Got it. So by selecting ‘Not Interested’ the user can filter out the news sources from that section right.

Alice : Yes!

Bob thought hard about this new filter screen. He knew that he can use the same ItemBinders which he created for the preference screen. No changes are needed in those binders, after that is the major advantage of using MultiViewAdapter library. But he needs to figure out the selection process.

For example, if the user selects multiple option in a section and then chooses ‘None’ then it should de-select all the selected items in that section.

He went to the MultiViewAdapter Documentation in a hope to find some solution to his problem. He learned about NestedSection which is exactly the solution he was looking for. He re-wrote the parts of setUpAdapter method.

Another productive day for Bob!

If you want to be like Bob, you can use this library to create complex RecyclerView adapters easily.

DevAhamed/MultiViewAdapter

You can also install the sample app to learn all the features supported by MultiViewAdapter.

https://play.google.com/store/apps/details?id=dev.ahamed.mva.sample