Android RecyclerView GridLayoutManager center items and keep same width

Question

I'm having this RecyclerView configured with a layout manager as:

recyclerView.setLayoutManager(new GridLayoutManager(this, 3));

My specific case is that the child items don't have a predefined width. Instead, I set their width to

android:layout_width="match_parent"

And then I expect the GridLayoutManager to give each item 1/3 of the available space.

So far so good, but I want that if in the last row there are only 1 or 2 items to show, I want to center them.

I tried this solution but what I get is:

As you can see in the last row, the items are streched to the edges of the layout and the parent 's width is divided between them. This happens because as I said, their width is not predifined.

What I expect is to calculate the items width, as they were shown 3 items per row, and then center them. As in this image:

Is there any way how can I make this with GridLayoutManager or even with FlexboxLayoutManager ?

@DEX7RA Unfortunately this is not a solution for my problem. I want the items to have same size and same distance between each other. Your solution would be acceptable if the items in the last row would be more centred and keep same distance as the items in the 1st row. Thanks for answering. — user677767, May 19 '21 at 15:24

score 0 · Answer 1 · answered May 05 '21 at 20:24

You can achieve that effect by using a LinearLayout inside your GridLayout with some <Space:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        android:layout_marginTop="20dp"
        android:id="@+id/l1">

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000000" />

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000000" />

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000000" />

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>
    </LinearLayout>

    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        android:layout_below="@+id/l1"
        android:layout_marginTop="20dp"
        >

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000000" />

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000000" />

        <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1">
        </Space>
    </LinearLayout>
</RelativeLayout>

That's how it look on my screen:

Android RecyclerView GridLayoutManager center items and keep same width

1 Answers1