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)

Could you post the XML for your 'other views'? The layout width for those views might be 'match_parent', which might make them overlay the ImageView. — DrNightmare, Jun 28 '16 at 20:12
They are just TextViews. All placed `layout_toEndOf="@id/picture"` (when picture is the ImageView hidden, i removed the `android:id` attribute from the ImageView in my question in order to be clearer). All TextViews are well displayed. But the ImageView is hidden. — Yairopro, Jun 29 '16 at 11:28

score 2 · Answer 1 · answered Jun 28 '16 at 20:18

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.

Putting Percent layout one step higher in the hierarchy didn't seem to change a thing. The imageView is still hidden. I setted all the other views' height to 60dp (just to have a set height for them). — Yairopro, Jun 29 '16 at 11:23
I like the option to use a percentage of the total width (in your 2nd solution) but it doesn't solve my problem which is to make a square that its height is equal to the final layout's heights. — Yairopro, Jun 29 '16 at 12:36

score 2 · Answer 2 · answered Aug 31 '17 at 16:36

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!

Thanks bro. I didn't know PercentLayouts were deprecated. I will see how to use the ConstraintLayout. It's new to me. Thanks — Yairopro, Aug 31 '17 at 17:03
Google's [Codelab step-by-step tutorial](https://codelabs.developers.google.com/codelabs/constraint-layout/#0) is really good starting point to explore ConstraintLayout. — Eugene Brusov, Aug 31 '17 at 18:13

PercentFrameLayout (square form asked) in RecyclerView not showing

2 Answers2

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

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