How to center RecyclerView items horizontally with vertical GridLayoutManager

Question

I have a vertical RecyclerView using a GridLayoutManager. I want each column to be centered, but the columns begin all the way on the left. In the following picture you can see what I'm talking about. I used the ugly color scheme to illustrate the columns and background. The green is the background for each item in the RecyclerView, the red is the background of the RecyclerView itself:

https://i.sstatic.net/DGGTY.jpg

I'm setting it up with:

mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));

Here's the column_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="120dp"
              android:layout_height="180dp"
              android:orientation="vertical"
              android:padding="4dp">

    <ImageView
        android:id="@+id/movie_column_photo"
        android:layout_width="80dp"
        android:layout_height="120dp"/>

    <TextView
        android:id="@+id/movie_column_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Here's the recyclerview xml:

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/company_details_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical">
    </android.support.v7.widget.RecyclerView>
</LinearLayout>

Jase

Answer 1

Try letting the column item fill the width of the column while centering everything inside:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="180dp"
              android:orientation="vertical"
              android:padding="4dp">

    <ImageView
        android:id="@+id/movie_column_photo"
        android:layout_width="80dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/movie_column_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
</LinearLayout>

Phlegmy

Item with filled width solved the issue to me! thanks – Sgraffito

Also, if you have another nested cointainer like a constraintLayout that should use android:layout_width="match_parent" to keep the same – Hexavalent

What if I want to column item height to fill screen? – Gaberlunzie

Answer 2

To restate @kris larson's answer;

If you are using ConstraintLayout, adding android:layout_gravity="center" or android:layout_gravity="center_horizontal" to the parent layout in item's XML would be enough (the first parent in hierarchy).

In your case, the codes would be something similar to this:

<android.support.constraint.ConstraintLayout
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:orientation="vertical"
        android:padding="4dp"
        android:layout_gravity="center">

        <ImageView

            android:id="@+id/movie_column_photo"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="80dp"
            android:layout_height="120dp"/>

        <TextView
            android:id="@+id/movie_column_title"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

Menace

Answer 3

Simply set the width of the root layout for your column_item.xml to match_parent will center RecyclerView items horizontally.

Virtuoso

Answer 4

Wrap your recyclerview inside the constraintlayout, something like this:

<androidx.constraintlayout.widget.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/book_list"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:spanCount="2" />

Hope it helps!!

Epimenides