androidandroid-constraintlayoutandroid-xml

Android ConstraintLayout: View overlap when constraint to the bottom of a horizontal chain

I wanna view3 directly below view1 and txt1 with no gap.

The text value of txt1 is dynamic at runtime. When txt1 takes multiple lines, all views are correct. But when txt1 takes only one line, view1 and view3 overlap.

Also I wanna use only ConstraitLayout, do not use LinearLayout or other layouts inner ConstraintLayout. And only modify in XML not in Java/Kotlin code

How can I fix it? Thank you!!

view1 and view3 ovelap when txt1 takes one line

all views are correct

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--other views-->
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@android:color/black"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/txt1"
        />
    <TextView
        android:id="@+id/txt1"
        android:text="lorem"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/view1"
        />

    <View
        android:id="@+id/view3"
        android:background="@android:color/holo_green_light"
        android:layout_width="400dp"
        android:layout_height="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/txt1"
        />
    <!--other views-->
</androidx.constraintlayout.widget.ConstraintLayout>
Solution

  • Ahhhh .. here is the scenario where barrier comes into the picture

    Kindly check more detail about barrier in this link

    https://developer.android.com/reference/androidx/constraintlayout/widget/Barrier

    and here is the code that you can use

    <androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--other views-->
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@android:color/black"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/txt1"
        />
    <TextView
        android:id="@+id/txt1"
        android:text="lorem"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/view1"
        />

   <androidx.constraintlayout.widget.Barrier
             android:id="@+id/barrier"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:barrierDirection=“bottom”
             app:constraint_referenced_ids="view1,txt1" />

    <View
        android:id="@+id/view3"
        android:background="@android:color/holo_green_light"
        android:layout_width="400dp"
        android:layout_height="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier"
        />
    <!--other views-->
</androidx.constraintlayout.widget.ConstraintLayout>