Centering RecyclerView Items in ConstraintLayout

Question

I have a number of Images displayed in my RecyclerView and I can't quite figure out how to get them centered. The view itself is centered but the Images inside are not. I'm using Constraint Layout with a number of other Widgets along with the RecyclerView. Here is my code:

<android.support.constraint.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="blah">

    <ImageView
        android:id="@+id/mainBackground"
        android:src="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="contentDescription" />

    <ImageView
        android:id="@+id/mainBackgroundImage"
        android:background="@drawable/theatre"
        android:alpha="0.5"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/mainBackground"
        app:layout_constraintBottom_toBottomOf="@id/mainBackground"
        tools:ignore="contentDescription" />

    <ImageView
        android:id="@+id/divider"
        android:src="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="3dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintTop_toBottomOf="@+id/mainBackground"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore = "ContentDescription"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp" />

    <ImageView
        android:id="@+id/moviesLabel"
        android:src="@drawable/rectangle"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintTop_toBottomOf="@+id/divider"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/movieTextInLabel"
        android:text="@string/movie_text_in_label"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        style="@style/wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/moviesLabel"
        app:layout_constraintRight_toRightOf="@id/moviesLabel"
        app:layout_constraintTop_toTopOf="@id/moviesLabel"
        app:layout_constraintBottom_toBottomOf="@id/moviesLabel" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:background="@color/accent_dark_red"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/moviesLabel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/divider"
        app:layout_constraintRight_toRightOf="@id/divider">

    </android.support.v7.widget.RecyclerView>

    <TextView
        android:id="@+id/tv_error_message_display"
        android:padding="16dp"
        android:text="@string/error_message"
        android:textSize="20sp"
        android:layout_gravity="center_horizontal"
        android:visibility="invisible"
        style="@style/wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ProgressBar
        android:id="@+id/pb_loading_indicator"
        android:layout_height="48dp"
        android:layout_width="48dp"
        android:layout_gravity="center"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

And Here is what the images look like:

score 0 · Answer 1 · answered Mar 01 '17 at 16:43

0

What is the layout of your list item used by the RecyclerView ? To center your images (one per line), the list item layout have to be a ConstraintLayout, and ImageView inside it have left and right constraints set to parent.

answered Mar 01 '17 at 16:43

sargentin

11
1

Eugene Brusov · Answer 2 · 2017-10-16T14:35:08.260

It doesn't matter what layout your RecyclerView placed on, but it matters what layout you use for items inside RecyclerView. It's obviously that you should use GridLayoutManager for you RecyclerView and you should use custom ItemDecoration for spacing between your items.

ITEM LAYOUT

<android.support.constraint.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="wrap_content">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="h,4:5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/text_view"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

RECYCLER VIEW INITIALIZATION

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);

GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(layoutManager);

recyclerView.addItemDecoration(new SpacesItemDecoration());

ITEM DECORATION

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        outRect.bottom = 40;

        if (parent.getChildLayoutPosition(view) % 2 == 0) {
            outRect.right = 20;
        } else {
            outRect.left = 20;
        }
    }
}

As a result all the items are centered within RecyclerView:

EDIT 10/16/2017 4:32pm

Instead of hardcoded pixel values in SpacesItemDecoration use context.getResources().getDimensionPixelSize(spacingDimen) You can find more details Android Recyclerview GridLayoutManager column spacing

Centering RecyclerView Items in ConstraintLayout

2 Answers2