How to center items of a recyclerview?

Question

I need to center elements in each row so they will be like in this mockup. I've been searching if there is any layout that works that way without look. items are centered in their rows.

mockup

This is how it looks now in my code. enter image description here

It sounds pretty similar to http://stackoverflow.com/questions/34206078/center-a-cardview-in-a-recyclerview-with-only-one-element — Konstantin Loginov, Jan 13 '16 at 17:30
you might just need to make a custom layoutManager since the GridLayoutManager does not help with this. I did post an answer but I'm not sure if its exactly what you're looking for. — Mo1989, Jan 18 '16 at 11:16

score 84 · Answer 1 · edited Feb 14 '18 at 08:12

84

Make recyclerview width to wrap_content and its container's layout_gravity to center_horizontal

 <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <android.support.v7.widget.RecyclerView
           android:id="@+id/recycrer_view"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:paddingLeft="16dp"
           android:paddingRight="16dp" />
 </LinearLayout>

edited Feb 14 '18 at 08:12

Johnny Five

987
1
14
29

answered Jan 27 '17 at 12:59

Ravi Yadav

2,296
3
25
32

11

This will prevent scrolling the RecyclerView from the sides. – frankish May 18 '19 at 20:58

Rajesh Jadav · Answer 2 · 2017-07-10T09:10:23.497

Take LinearLayout in your RecyclerView's item row layout then give android:layout_gravity="center" to LinearLayout.

For each row of images you have to take different LinearLayout.

Here is example code:

 <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:orientation="horizontal">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="@drawable/image1" />

            <ImageView
                android:id="@+id/image2"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="@drawable/image2" />

           <ImageView
                android:id="@+id/image3"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:src="@drawable/image3" />

  </LinearLayout>

I had to modify the RecyclerView layout_width="wrap_content" rather than match_parent as well — jernkuan, Oct 26 '16 at 21:00
@jemkuan That will disable scrolling when the user swipes on the edge or outer region of the parent, as the width of the RecyclerView will be less than the width of the parent. — Elliott Beach, Jun 01 '17 at 18:10
The problem with this approach is that the recycler view will register a click event when user will touch outside of the image views. — Izak, Feb 17 '19 at 22:21

score 37 · Accepted Answer · edited Sep 09 '22 at 10:37

Achieved with:

recyclerView.adapter = MyAdapter()
val layoutManager = FlexboxLayoutManager(context).apply {
    justifyContent = JustifyContent.CENTER
    alignItems = AlignItems.CENTER
    flexDirection = FlexDirection.ROW 
    flexWrap = FlexWrap.WRAP
}
recyclerView.layoutManager = layoutManager

You need to add FlexboxLayout to your gradle:

implementation 'com.google.android.flexbox:flexbox:3.0.0'

enter image description here

score 8 · Answer 4 · answered May 02 '15 at 22:01

8

I am assuming that you are using a LinearLayoutManager with a RecyclerView for a ListView-style effect. In that case, use a horizontal LinearLayout for each row, with android:gravity="center" to center its contents.

answered May 02 '15 at 22:01

CommonsWare

986,068
189
2,389
2,491

1

Actually i'm using gridlayout but let me try that. – Chris Gomez May 02 '15 at 22:04
3

@cgomezmendez: I presume that there would be some way to do that via `GridLayoutManager`, or else via a custom `RecyclerView.LayoutManager`. I do not see, at a quick glance, how to do it with `GridLayoutManager`. – CommonsWare May 02 '15 at 22:06
did you fixed the problem? – Cristian Holdunu Dec 05 '15 at 00:11
For my project using recycler view with grid layout, where items are centered using gravity attribute works fine. – MikeL Nov 29 '16 at 01:04
1

this did not help :( – Quick learner Jul 11 '19 at 06:58

score 6 · Answer 5 · answered Oct 17 '18 at 13:44

Use FlexboxLayout from com.google.android:flexbox library. Note the flexwrap and justifyContent property values. Then, set layout_wrapBefore = true on the view that you want to wrap the line of items before.

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:justifyContent="center">

        <View ... />

        <View app:layout_wrapBefore="true" ... />

        <View ... />

    </com.google.android.flexbox.FlexboxLayout>

I would like to add this is a very clean way to do this. Specially you can use the library as a `layoutManager` for `recyclerview`. All you have to do is set up the layout manager with direction and alignment requirements. No need to make a two dimensional recyclerview as mentioned by third top answer. — Juan Mendez, Jun 07 '19 at 18:20

score 4 · Answer 6 · edited Dec 31 '16 at 07:37

Use the gridLayoutManager = new GridLayoutManager(context,6) and override setSpanSizeLookup.

Example:

int totalSize=list.size();
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                    @Override
                    public int getSpanSize(int position) {
                        int span;
                        span = totalSize % 3;
                        if (totalSize < 3) {
                            return 6;
                        } else if (span == 0 || (position <= ((totalSize - 1) - span))) {
                            return 2;
                        } else if (span == 1) {
                            return 6;
                        } else {
                            return 3;
                        }
                    }
                });

This will work if you want to display 3 items in a row and remaining in the center of the grid.

Change the grid layout manager span counts accordingly your requirement.

score 4 · Answer 7 · answered Aug 17 '17 at 09:22

4

you can use the new layoutManager from google FlexLayoutManager it will gives you a lot of control and flexibility over the recyclerView items

answered Aug 17 '17 at 09:22

Omar Abdan

1,901
17
29

score 3 · Answer 8 · answered Jan 17 '16 at 09:12

you can add some layouts dynamically, for example:

adapter object can be a horizontal LinearLayout

1- create a LinearLayout in java code and customize it (gravity,...)

2- add some icons to linearLayout

3- add linearLayout to your adapter

4- repeat 1,2,3

    // : declare new horizontal linearLayout
    ImageView myIcons[nomOfIcons];
    // : add all icons to myIcons
    for(int i=1; i<=nomOfIcons; i++){
        linearLayout.addView(myIcons[i - 1]);
        if(i%numOfIconsInOneHorizontalLinearLayout==0) {
            results.add(linearLayout); // add linearLayout to adapter dataSet
            // : declare new horizontal linearLayout
        }
    }
    if(n%numOfIconsInOneHorizontalLinearLayout!=0) // add last linearLayout if not added in the loop
        results.add(linearLayout);
    mAdapter.notifyDataSetChanged(); // update adapter

score 2 · Answer 9 · answered Jan 08 '22 at 02:29

Trust me, this gonna work. In your main xml file where you've put the recycler view, copy my code.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/_50sdp"
        android:gravity="center">

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="wrap_content"
            android:layout_height="@dimen/_50sdp"/>

    </LinearLayout>

score 1 · Answer 10 · answered Sep 30 '20 at 09:48

Currently, I think we need to write our own custom view for it because Android has not supported this feature as we expected yet.

It is the Sample I made in case someone needs it: https://github.com/mttdat/utils

(Try the CenterGridActivity.kt by adjusting Manifest file to start this activity as default)

score 0 · Answer 11 · answered Jul 29 '23 at 15:14

In case you need the Java Version of AskQ's reply:

    // Set layout manager to position the items
    FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(this);
    layoutManager.setJustifyContent(JustifyContent.CENTER);
    layoutManager.setAlignItems(AlignItems.CENTER);
    layoutManager.setFlexDirection(FlexDirection.ROW);
    layoutManager.setFlexWrap(FlexWrap.WRAP);
    adapter.setLayoutManager(layoutManager);

How to center items of a recyclerview?

11 Answers11

Linked