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 ?

Answer 1

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: