Android ConstraintLayout - Top constraint for two layout

Question

I am stuck with ConstraintLayout and confused to use which property to do as I want.

As per the following image, I wanted to give top-constraint of Details to either TextView of OrderTakenBy or OrderCollectedBy as per the height of that view.

Scenario:

If I give top constraint of Detail view as the bottom of OrderTakenBy TextView, It will overlap (as below image) the view of OrderCollectedBy Textview if it gets more lines. Vice versa.

Note: Order Taken By or Order Collected By may contain two or three lines.

So what can I do for top constraints which can work for both dynamic heights?

Edited:

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                tools:context=".activity.AccountMasterAddActivity"
                tools:showIn="@layout/activity_account_master_add">

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="4dp"
                    android:text="@string/hint_order_no"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="@+id/supplierNameTextView"
                    app:layout_constraintTop_toBottomOf="@+id/supplierNameTextView" />

                <TextView
                    android:id="@+id/orderNoTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView2"
                    app:layout_constraintStart_toStartOf="@+id/textView2"
                    app:layout_constraintTop_toBottomOf="@+id/textView2"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:text="@string/hint_supplier_name"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/supplierNameTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView4"
                    app:layout_constraintStart_toStartOf="@+id/textView4"
                    app:layout_constraintTop_toBottomOf="@+id/textView4"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="4dp"
                    android:gravity="end"
                    android:text="@string/hint_order_date"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/supplierNameTextView"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/textView2" />

                <TextView
                    android:id="@+id/orderDateTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:gravity="end"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView6"
                    app:layout_constraintStart_toStartOf="@+id/textView6"
                    app:layout_constraintTop_toBottomOf="@+id/textView6"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="4dp"
                    android:text="@string/hint_order_taken_by"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="@+id/orderNoTextView"
                    app:layout_constraintTop_toBottomOf="@+id/orderNoTextView" />

                <TextView
                    android:id="@+id/orderTakenByTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="TextView TextView"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView8"
                    app:layout_constraintStart_toStartOf="@+id/textView8"
                    app:layout_constraintTop_toBottomOf="@+id/textView8" />

                <TextView
                    android:id="@+id/textView10"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="end"
                    android:text="@string/hint_order_collected_by"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/orderDateTextView"
                    app:layout_constraintStart_toStartOf="@+id/orderDateTextView"
                    app:layout_constraintTop_toTopOf="@+id/textView8" />

                <TextView
                    android:id="@+id/orderCollectedByTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:gravity="end"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView10"
                    app:layout_constraintStart_toStartOf="@+id/textView10"
                    app:layout_constraintTop_toBottomOf="@+id/textView10"
                    tools:text="TextView TextView TextView TextView TextView" />

                <TextView
                    android:id="@+id/textView12"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="@string/hint_details"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/orderCollectedByTextView"
                    app:layout_constraintStart_toStartOf="@+id/orderTakenByTextView"
                    app:layout_constraintTop_toBottomOf="@+id/orderCollectedByTextView" />

                <TextView
                    android:id="@+id/detailsTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:autoLink="phone"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView12"
                    app:layout_constraintStart_toStartOf="@+id/textView12"
                    app:layout_constraintTop_toBottomOf="@+id/textView12"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/productLabel"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Products"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/detailsTextView"
                    app:layout_constraintStart_toStartOf="@+id/detailsTextView"
                    app:layout_constraintTop_toBottomOf="@+id/detailsTextView" />

                <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintGuide_percent="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recyclerView"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginTop="2dp"
                    android:layout_marginBottom="4dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="@+id/productLabel"
                    app:layout_constraintStart_toStartOf="@+id/productLabel"
                    app:layout_constraintTop_toBottomOf="@+id/productLabel" />

            </androidx.constraintlayout.widget.ConstraintLayout>

Anyone can help?

Answer 1

You can use the Barrier To overcome this issue.

A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.

Here is the Documentation for Barrier

Add Order Taken By or Order Collected By as app:constraint_referenced_ids="view1,view2" and set the Detail view top to the bottom of the Barrie.

XML Reference:

 <androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="411dp"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="order_taken_by,order_collected_by"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="21dp"/>


<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/detail"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="New"
    android:textSize="@dimen/_16sp"
    app:layout_constraintTop_toBottomOf="@+id/barrier"/>

Here is the output:

Answer 2

Use bottom barrier Use Deatils textview top constraint to barrier and barrier reference to OrderTakenBy, OrderCollectedBy textview.

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.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="match_parent">

        <TextView
            android:id="@+id/OrderTakenBy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:text="warehouse sdgjklsdj jgkjskg"
            app:layout_constraintEnd_toStartOf="@+id/OrderCollectedBy"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OrderCollectedBy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:text="hospital fhkhsf "
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/OrderTakenBy"
            app:layout_constraintTop_toTopOf="parent" />

        <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="OrderCollectedBy, OrderTakenBy" />

        <TextView
            android:id="@+id/Details"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="10dp"
            android:text="lorem_ipsum"
            android:gravity="center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/barrier" />

    </androidx.constraintlayout.widget.ConstraintLayout>