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?

conect top of Detail view to bottom of last textview of OrderCollectedbyBy — Pemba Tamang, Sep 27 '19 at 07:34
If I give top constraint of Detail view as bottom of OrderCollectedbyBy TextView, It will overlap (as below image) the view of OrderTakenBy Textview if it gets more lines. — Pratik Butani, Sep 27 '19 at 07:38
use a container like a linear layout on the tvs below ordercollected maybe also a scrollview and add your textviews there — Pemba Tamang, Sep 27 '19 at 07:39
or you need to set contrainst while adding the tvs like this https://stackoverflow.com/a/45264822/8528047 — Pemba Tamang, Sep 27 '19 at 07:40
ya sure with constraint layout I am saying either wrap the tvs under ordercollected in a linear layout or set the constraints progmatically — Pemba Tamang, Sep 27 '19 at 07:41
you have to use barrier for that. If you share some code I will add answer using barrier. — Shweta Chauhan, Sep 27 '19 at 07:44
barrier take top constraint automatically as per height of that view — Shweta Chauhan, Sep 27 '19 at 07:47

score 10 · Accepted Answer · answered Sep 27 '19 at 07:48

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:

Shweta Chauhan · Answer 2 · 2019-09-27T08:19:37.803

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>

this is exactly what i want although the above answer is same but was unable to get from that answer thanks — raj, Aug 03 '22 at 12:25

score -1 · Answer 3 · answered Sep 27 '19 at 07:43

-1

I think you can wrap order taken by and order collected by in another constraint layout or to check programmatically the height(after setting the text) of the TextView's and change programmatically the top constraint.

answered Sep 27 '19 at 07:43

Pavel Poley

5,307
4
35
66

Android ConstraintLayout - Top constraint for two layout

Edited:

3 Answers3