15

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

enter image description here

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:

enter image description here

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.

Hardy
  • 2,576
  • 1
  • 23
  • 45
Renan Nery
  • 3,475
  • 3
  • 19
  • 23
  • The staggered grid view effect... is that what you're missing here? Or is there more? – JanithaR Aug 20 '15 at 05:03
  • The staggered grid view constructor needs a span count when we instantiating, I don't want to fix a number of columns, I would like to fit layout according to item width row by row – Renan Nery Aug 20 '15 at 05:08
  • Try this. `public final void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) { StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams(); layoutParams.setFullSpan(true); }` – JanithaR Aug 20 '15 at 05:18
  • I am not in my laptop right now but I've tried this approach earlier and I realized that each item fit the whole row width – Renan Nery Aug 20 '15 at 05:23
  • Did you try staggering horizontally? – JanithaR Aug 20 '15 at 05:33
  • Yes I tried, but I lost the vertically scrolling and I have to set a number of spanCount. I'm thinking about to develop a custom LayoutManager of StaggedGridLayoutManager – Renan Nery Aug 21 '15 at 20:49
  • One of [these](https://android-arsenal.com/tag/41) might help you. – JanithaR Aug 22 '15 at 02:32
  • have you got your solution ? – MrDumb Sep 24 '15 at 10:11
  • Not yet, right know I am using recycler view with 2 columns. I saw many libraries that make exactly what I want, but I have not had the time to working it. – Renan Nery Sep 25 '15 at 16:12
  • Were you able to get a solution of this using `RecyclerView`. – Shubham Dec 09 '15 at 07:34
  • @RenanNery Have you got solution for this with RecyclerView ? I'm too looking for a Custom LayoutManager but didn't get it right enough. – Gilad Eshkoli Mar 01 '16 at 13:14
  • Sorry @Gil nothing yet, still using grid – Renan Nery Mar 04 '16 at 19:53
  • Did you ever solve this? – Joaquin Iurchuk Mar 17 '16 at 14:36
  • Renan, could you post your code? I'm trying to do exactly what you are doing (a recyclerview with 3 items per line aligned on center – E.Akio Feb 27 '20 at 18:21

3 Answers3

5

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:-

enter image description here

Jossef Harush Kadouri
  • 32,361
  • 10
  • 130
  • 129
Hardy
  • 2,576
  • 1
  • 23
  • 45
4

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

Badr
  • 2,021
  • 1
  • 21
  • 27
0

It may now be too late, but you can also use google's FlexBoxLayout

Demo

Jean Nelson
  • 1
  • 1