Recycler View with multiple rows and columns - AutoFit like Flow Layout [Android]

Question

I'm in a challenge to build a layout like this:

My first insight was to use a RecyclerView with an adapter that can deal with each item and inflate its layout.

So far, not so good.

I got this layout so far:

I can felling that I'm almost there, but really... I spend a week think about how to make it better, or just like the UI propose.

Some of my tries were

1. Use a grid layout and change max columns number depending on how many items there are on the list
2. StaggeredGridLayoutManager sounded like a powerful candidate to fix it and make me happy, but unfortunately when I tried to use it I realize that we need to pass a number of spanCount (columns) on constructor and I found some ways to work around this limitation changing the number of columns of each row, but I didn't like the final result, was not like I saw in other apps like Foursquare when you setup your interests.
3. I checked out this library Flow Layout, but I not even started to use it, because I don't want to lose the whole recycler view power and I believe that there is a way to make it works! .....Even knowing that the library do exactly what I need.

Guys, I'm not here looking for some already done peace of code or someone to do my job. Actually I am looking for the light at the end of the tunnel.

Answer 1

Hello if you dnt want to use recyclerview there is another example using custom Library which acts like List GitHubLibrary TagLayout

• Sample Code:

  mFlowLayout.setAdapter(new TagAdapter<String>(mVals)
     {
         @Override
         public View getView(FlowLayout parent, int position, String s)
         {
             TextView tv = (TextView) mInflater.inflate(R.layout.tv,
                     mFlowLayout, false);
             tv.setText(s);
             return tv;
         }
     });
  

Using below code you can pre set selection you wanted:

mAdapter.setSelectedList(1,3,5,7,8,9);

Will show result like below:-

Answer 2

It's easy to get this done using the new google material design library which contains a component called Chips. So you don't have to use a RecyclerView.

A Chip represents a complex entity in a small block, such as a contact. It is a rounded button that consists of a label, an optional chip icon, and an optional close icon. A chip can either be clicked or toggled if it is checkable.

HOW TO USE THE COMPONENT :

1. Import the library

implementation 'com.google.android.material:material:1.1.0'

2. Use code below

 <com.google.android.material.chip.ChipGroup
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

 <!-- Your items here -->

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 1"/>

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 2"/>

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 3"/>

 <!-- End -->

</com.google.android.material.chip.ChipGroup>

You can find more details here : Material components