Search code examples
androidandroid-layoutandroid-recyclerviewandroid-imageview

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

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 enter image description here

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

Result layout with ImageView. enter image description here

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.

Solution

  • 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>