Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center RecyclerView items horizontally with vertical GridLayoutManager

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> 
like image 961
JackTheCripple Avatar asked Jul 27 '16 23:07

JackTheCripple


People also ask

How do I make staggered RecyclerView?

In order to use RecyclerView for creating staggering grid views, we need to use StaggeredGridLayoutManager. LayoutManager is responsible for measuring and positioning item views in the RecyclerView and also recycle the item views when they are no longer visible to the user.


1 Answers

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> 
like image 190
kris larson Avatar answered Sep 28 '22 08:09

kris larson