Constraint Layout is taking full width when a child is wrap_content in height

Question

I want the test view to take only as much height as occupied by the rest of the card. (See images at the end of code snippet) But it is pushing the height of the view to the entire screen.

It works as we want only after supplying 0 height, which doesn't seem right. What can be done apart from providing 0 height to achieve this behavior?

<RelativeLayout 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:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">


        <TextView
            android:id="@+id/dialog_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="60dp"
            android:layout_marginEnd="8dp"
            android:background="@android:color/holo_red_light"

            android:text="Dialog title"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="HardcodedText" />


        <View
            android:id="@+id/test"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="5dp"
            android:layout_height="wrap_content"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>```


 what I want   [1]: https://i.stack.imgur.com/8NU4d.png
 what shows up [2]: https://i.stack.imgur.com/K6qEn.png

Answer 1

Try this, you need to change the bottom constraint for your View and make the height of the View a 0dp.

<RelativeLayout 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:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/echo">


        <TextView
            android:id="@+id/dialog_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="60dp"
            android:layout_marginEnd="8dp"
            android:background="@android:color/holo_red_light"

            android:text="Dialog title"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="HardcodedText" />


        <View
            android:id="@+id/test"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/black"
            app:layout_constraintBottom_toBottomOf="@+id/dialog_title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="5dp"
            android:layout_height="0dp"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>

Output: