Center Columns in RecyclerView

Question

I'm trying to create a dynamic RecyclerView layout. I am using a GridLayoutManager with three columns.

I need to wrap each grid item and center the columns (like attached).

I have tried a StaggeredGridLayout, I have tried a WrapGridLayoutManager but neither of these worked.

Here is my RecyclerView:

 <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/categories_grid"
        android:layout_marginTop="@dimen/feed_item_margin"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

and my RecyclerView item:

 <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="@drawable/first_time_category_unselected"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/category_name"
        android:layout_marginLeft="@dimen/feed_item_margin"
        android:layout_gravity="center_vertical"
        android:textColor="@color/black_colour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/category_status_icon"
        android:layout_gravity="center_vertical"
        android:background="@drawable/icon_follow"
        android:layout_marginLeft="@dimen/feed_item_margin"
        android:layout_marginRight="@dimen/feed_item_margin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

This is the decoration I'm using to implement grid spacing:

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
    private int halfSpace;

    public SpacesItemDecoration(int space) {
        this.halfSpace = space / 2;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

        if (parent.getPaddingLeft() != halfSpace) {
            parent.setPadding(halfSpace, halfSpace, halfSpace, halfSpace);
            parent.setClipToPadding(false);
        }

        outRect.top = halfSpace;
        outRect.bottom = halfSpace;
        outRect.left = halfSpace;
        outRect.right = halfSpace;
    }
}

This is what I'm trying to achieve:

This is what I am getting: If anyone can help on this I'd greatly appreciate it

Looking to achieve a similar thing, did you ever manage to get this to work correctly? — hibob, Nov 28 '16 at 20:04
also trying to do this. i used gridlayout manager and messed with the setSpanSize but then things got evenly spaced for just 2 columns . i wnated it tighter together like how you have it shown. so no one on the internet has been able to solve this. — reidisaki, Dec 10 '20 at 20:58

Amarjit · Answer 1 · 2015-11-09T12:05:02.497

0

You can use Staggered Grid Layout Manager

as

  StagaggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.HORIZONTAL );
        recyclerView.setLayoutManager(gaggeredGridLayoutManager);

Here is Link for reference

edited Nov 09 '15 at 12:05

answered Nov 09 '15 at 11:17

Amarjit

4,327
2
34
51

hi, as I mentioned in my op I have tried staggered grid layout but it didn't work, unless I can wrap the content width, it will have no effect. – DJ-DOO Nov 09 '15 at 11:28

score 0 · Answer 2 · edited May 23 '17 at 12:32

Use this in recyclerView you could not arrange as you shown

<cuneyt.example.com.tagview.Tag.TagView
        android:id="@+id/tag_group"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />

Download repo from GIT https://github.com/Cutta/TagView

TagView tagGroup = (TagView)findviewById(R.id.tag_view);
//You can add one tag
tagGroup.addTag(Tag tag);
//You can add multiple tag via ArrayList
tagGroup.addTags(ArrayList tags);
//Via string array
 addTags(String[] tags);


//set click listener
  tagGroup.setOnTagClickListener(new OnTagClickListener() {
        @Override
        public void onTagClick(Tag tag, int position) {
        }
    });



//set delete listener
        tagGroup.setOnTagDeleteListener(new OnTagDeleteListener() {
        @Override
        public void onTagDeleted(final TagView view, final Tag tag, final int position) {
        }
    });

How do I make WRAP_CONTENT work on a RecyclerView

thank you but I need to use a recycler view and if I can wrap the content correctly I think the staggered layout will work — DJ-DOO, Nov 09 '15 at 14:08

Center Columns in RecyclerView

2 Answers2