RecyclerView item ConstraintLayout messing up while using GridLayoutManager

Question

I'm using GridLayoutManager in my RecyclerView with a spanCount of 2. Following is the layout of RecyclerView item. It is a ConstraintLayout which is wrapped up in a CardView:

<android.support.v7.widget.CardView
    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"
    android:layout_margin="@dimen/cardview_margin"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="4dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="Title"
            android:textAllCaps="true"
            android:textColor="@color/colorPrimary"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_sub_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Subtitle"
            android:textAllCaps="false"
            android:textSize="14sp"
            app:layout_constraintEnd_toEndOf="@+id/tv_title"
            app:layout_constraintStart_toStartOf="@+id/tv_title"
            app:layout_constraintTop_toBottomOf="@+id/tv_title" />

        <ImageView
            android:id="@+id/iv_favorite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:scaleX="1.07"
            android:scaleY="1.07"
            android:src="@drawable/ic_star_blank_grey"
            app:layout_constraintBottom_toBottomOf="@+id/iv_locked"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/iv_locked"/>

        <ImageView
            android:id="@+id/iv_locked"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:scaleX="1.0"
            android:scaleY="1.0"
            android:src="@drawable/ic_lock_open_grey"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/iv_favorite"
            app:layout_constraintTop_toBottomOf="@+id/tv_sub_title" />
    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

The problem arises when GridLayoutManager tends to increase the height of a RecyclerView item according to the height of the item in second column. Both the ImageView icons leave the parent bottom and tend to stick to the TextView tv_sub_title as in the screenshot below:

Kindly let me know how to fix this such that both the icons stay at the bottom when the height of the item layout is increased by the GridLayoutManager.

Thanks

Answer 1

Ok, with some hit & trial and taking @Pawel Laskowski answer a bit further, here is what solved the issue:

1. Add app:layout_constraintVertical_bias="1" attribute to iv_locked
2. Change android:layout_height of the ConstraintLayout from wrap_content to match_parent.

ConstraintLayout is pretty easy to get started with but quite hard to master. Thanks for the help @Pawel Laskowski.

Answer 2

To keep the iv_locked aligned to the bottom between its vertical constraints you need to set the maximum vertical bias by adding the app:layout_constraintVertical_bias="1" attribute to it. Since the iv_favorite is vertically constrained to the iv_locked, it will automatically be in the appropriate position.