How to center RecyclerView items horizontally with vertical GridLayoutManager

JackTheCripple picture JackTheCripple · Jul 28, 2016 · Viewed 46.2k times · Source

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:

http://imgur.com/a/J3HtF

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>

Answer

kris larson picture kris larson · Jul 28, 2016

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>