PercentFrameLayout (square form asked) in RecyclerView not showing

Question

I try to display an ImageView as a square inside a RecyclerView's element whatever is the element's height.
Here is what I would like to have:

Here is my xml :

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

    <android.support.percent.PercentFrameLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        >
        <ImageView
            android:scaleType="centerCrop"
            app:layout_heightPercent="100%"
            app:layout_aspectRatio="100%"/>
    </android.support.percent.PercentFrameLayout>

    <!-- other views -->
</RelativeLayout>

And here is what i have got (the ImageView disapeared):

(Excuse me if my english is bad)

Answer 1

You need to move your Percent layout one step higher in the hierarchy:

<android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:scaleType="centerCrop"
        app:layout_heightPercent="100%"
        app:layout_aspectRatio="100%"/>

    <!-- other views -->
</android.support.percent.PercentRelativeLayout>

This approach assumes that your other views has a set height - if they have a variable height, then your image is going to also have a variable height (since it is using layout_heightPercent="100%".

If instead you want your images to be a specific size consistently, you'd instead want a layout such as

<android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:scaleType="centerCrop"
        app:layout_widthPercent="20%"
        app:layout_aspectRatio="100%"/>

    <!-- other views -->
</android.support.percent.PercentRelativeLayout>

In this case, the width would be a fixed percentage of your total width (you could also use layout_width="@dimen/fixed_width") and the height would be equal to that width.

Answer 2

Since both PercentFrameLayout and PercentRelativeLayout were deprecated in 26.0.0, you should consider using of ConstraintLayout to size your ImageView in 1:1 ratio.

1) Keep your ImageView in 1:1 ratio with floating width/height

item.xml

<?xml version="1.0" encoding="utf-8"?>
<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/thumbnail_image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="w,1:1" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/subtitle_text" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subtitle"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/description_text" />

    <TextView
        android:id="@+id/description_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toBottomOf="@+id/thumbnail_image" />

</android.support.constraint.ConstraintLayout>

2) Keep your ImageView in 1:1 ratio with fixed width

item.xml

<?xml version="1.0" encoding="utf-8"?>
<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/thumbnail_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="h,1:1" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/subtitle_text" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subtitle"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/description_text" />

    <TextView
        android:id="@+id/description_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toBottomOf="@+id/thumbnail_image" />

</android.support.constraint.ConstraintLayout>

Hope this helps!