android -> set height of ImageView to dynamic height of parent

Question

I have recyclerview with cells of dynamic height. Height of cell depends on length of text.

I want to set background cover for this cells. Height of ImageView have to be same as height of parent view. Surprisingly it is really hard to achieve this task.

This is result layout without ImageView

As you can see height of cell depends on length of text.

Result layout with ImageView.

As you can see the height of cell depends on Image height.

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    app:cardBackgroundColor="#FF6B6B"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="16dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/universe1"
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop">
        </ImageView>
        <LinearLayout
            android:id="@+id/layout_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_marginLeft="8dp"
                android:textColorLink="@color/white"
                android:layout_marginBottom="8dp"
                android:id="@+id/text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:ellipsize="end"
                android:fontFamily="@font/compact_text_regular"
                android:maxLines="4"
                android:text="This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah"
                android:textColor="@color/white"
                android:textSize="14sp"
                android:lineSpacingExtra="4dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <LinearLayout
                    android:visibility="gone"
                    android:id="@+id/like_icon_wrap"
                    android:clickable="true"
                    android:layout_gravity="center"
                    android:layout_width="40dp"
                    android:layout_height="30dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_marginLeft="8dp"
                        android:id="@+id/like_icon"
                        android:layout_gravity="center_vertical"
                        android:layout_width="16dp"
                        android:layout_height="16dp"
                        app:srcCompat="@drawable/heart_white" />

                    <TextView
                        android:id="@+id/likes_count"
                        android:layout_gravity="center"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/compact_text_regular"
                        android:textColor="@color/white"
                        android:textSize="16sp"
                        android:text="0" />
                </LinearLayout>

                <TextView
                    android:layout_marginRight="8dp"
                    android:layout_gravity="center"
                    android:id="@+id/more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif"
                    android:textColor="@color/colorPrimary"
                    android:gravity="right"
                    android:text="show more"
                    android:textSize="12sp"
                    android:visibility="invisible" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>
</androidx.cardview.widget.CardView>

I tried also to set height of image from recyclerview adapter but with no success.

Answer 1

With ConstraintLayout you can match another views height by setting the height to 0dp and constraining the top/bottom to the other view you want to match

I cut out the other parts of your layout, so you'll have to add those, but below is the code for the image and text. Produce this

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cardview"
    app:cardBackgroundColor="#FF6B6B"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="16dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/background"
            android:layout_width="0dp"
            android:layout_height="0dp"

            tools:src="@tools:sample/avatars"
            android:scaleType="centerCrop"

            app:layout_constraintStart_toStartOf="@id/text"
            app:layout_constraintEnd_toEndOf="@id/text"
            app:layout_constraintTop_toTopOf="@id/text"
            app:layout_constraintBottom_toBottomOf="@id/text" />

        <TextView
            android:id="@+id/text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"

            android:ellipsize="end"
            android:lineSpacingExtra="4dp"
            android:maxLines="4"
            android:text="This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah"
            android:textSize="14sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Answer 2

Right way is to use @Håkon Schia code. But incase if you want to use FrameLayout then add that inside RelativeLayout like this, and add ImageView inside that with "alignBottom" constraint :

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    app:cardBackgroundColor="#FF6B6B"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="16dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp">

    <!--
        Code added here...
    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/background"
        android:background="@drawable/universe1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/frameLayout"
        android:scaleType="centerCrop">
    </ImageView>

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--<ImageView
            android:src="@drawable/universe1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop">
        </ImageView>-->
        <LinearLayout
            android:id="@+id/layout_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_marginLeft="8dp"
                android:textColorLink="@color/white"
                android:layout_marginBottom="8dp"
                android:id="@+id/text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:ellipsize="end"
                android:fontFamily="@font/compact_text_regular"
                android:maxLines="4"
                android:text="This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah This sounded nonsense to Alice, so she said nothing, but set off at her being blah blah"
                android:textColor="@color/white"
                android:textSize="14sp"
                android:lineSpacingExtra="4dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <LinearLayout
                    android:visibility="gone"
                    android:id="@+id/like_icon_wrap"
                    android:clickable="true"
                    android:layout_gravity="center"
                    android:layout_width="40dp"
                    android:layout_height="30dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_marginLeft="8dp"
                        android:id="@+id/like_icon"
                        android:layout_gravity="center_vertical"
                        android:layout_width="16dp"
                        android:layout_height="16dp"
                        app:srcCompat="@drawable/heart_white" />

                    <TextView
                        android:id="@+id/likes_count"
                        android:layout_gravity="center"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/compact_text_regular"
                        android:textColor="@color/white"
                        android:textSize="16sp"
                        android:text="0" />
                </LinearLayout>

                <TextView
                    android:layout_marginRight="8dp"
                    android:layout_gravity="center"
                    android:id="@+id/more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:fontFamily="sans-serif"
                    android:textColor="@color/colorPrimary"
                    android:gravity="right"
                    android:text="show more"
                    android:textSize="12sp"
                    android:visibility="invisible" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>
    </RelativeLayout>
</androidx.cardview.widget.CardView>