105

I have two header views, HeaderViewA and HeaderViewB. These views can have any combination of visibility visible or gone.

I need BigView to be positioned under the lowest of either HeaderViewA/HeaderViewB.

Is this possible without nesting in ConstraintLayout?

enter image description here

6
  • I'd love to hear a different answer, but afaik this is not possible.
    – F43nd1r
    Feb 21, 2017 at 1:31
  • Interesting, but doesn't look possible just through XML. You don't want nested views, but if you are open to programmatic manipulation you may be able to use ConstraintSet.
    – Cheticamp
    Feb 21, 2017 at 15:17
  • Why is nesting a ConstraintLayout a deal-breaker?
    – Alex Meuer
    Jul 28, 2017 at 9:31
  • @AlexMeuer Nested layouts negatively impact on performance (see this report Understanding the performance benefits of ConstraintLayout). So that's the main goal to keep your layout as flat as possible and ConstraintLayout has all the necessary features for it. Oct 4, 2017 at 10:35
  • 1
    @EugeneBrusov So I discovered. I believe my comment was before the barrier capability was release. Here is a slightly different take on a similar problem.
    – Cheticamp
    Oct 5, 2017 at 16:07

2 Answers 2

163

Now it's possible with Barrier class, introduced in constraint-layout v1.1.0.

So here's the solution for your particular case:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_height="match_parent"
    tools:context="com.example.eugene.test10.MainActivity">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#EEEEEE"
        android:text="TEXT_VIEW_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#DDDDDD"
        android:text="TEXT_VIEW_2"
        android:visibility="gone"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:id="@+id/labelBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView1,textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#CCCC00"
        android:text="TEXT_VIEW_3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/labelBarrier" />

</android.support.constraint.ConstraintLayout>

Here're results for using this layout:

View on simulator

You can refer this step-by-step guide on Codelab https://codelabs.developers.google.com/codelabs/constraint-layout/#10.

5
  • 1
    Is there anything I need to to first in my project in order to implement Barriers?
    – Zerato
    Nov 15, 2017 at 13:57
  • 2
    @Zerato you need to add 'com.android.support.constraint:constraint-layout:1.1.0-beta3' dependency to your module's gradle file and also add maven repository to project's gradle file. You can find all the dependencies in this GitHub project github.com/googlecodelabs/constraint-layout Nov 15, 2017 at 14:56
  • For those looking to access these barriers via the GUI tool, it's not searchable over with the textview, imageview, etc, but rather in the I-beam looking icon drop down that has guide lines. Jul 22, 2018 at 19:29
  • 4
    its androidx.constraintlayout.widget.Barrier for androidx
    – Mussa
    Sep 4, 2019 at 19:53
  • app:i_love_these="android_x,constraint_layout" /> Jun 20, 2020 at 11:04
2
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:layout_height="match_parent">

    <TextView
        android:id="@+id/header_view_a"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_light"
        android:gravity="center"
        android:text="HeaderViewA "
        android:layout_marginBottom="@dimen/sixteenDP"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/header_view_b"
        app:layout_constraintEnd_toStartOf="@+id/header_view_b"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/header_view_b"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:text="HeaderViewB"
        android:textAlignment="center"
        android:textSize="30sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintStart_toEndOf="@+id/header_view_a"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4"/>

    <TextView
        android:id="@+id/big_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center"
        android:text="BigView"
        android:textAlignment="center"
        android:textSize="@dimen/list_item_height"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="1.0"/>

</android.support.constraint.ConstraintLayout>

Watch out for app:layout_constraintWidth_default="wrap" (with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them) and app:layout_constraintVertical_bias="1.0". Use bias to pull BigView to the bottom of its parent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.