RecyclerView item ConstraintLayout messing up while using GridLayoutManager

user_7983864 0
Viewed 849

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

android-constraintlayout gridlayoutmanager android-recyclerview android
2 Answers

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.

user_79838640

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.

user_44995760
Related