How to position below the lowest of two views in ConstraintLayout? How to position below the lowest of two views in ConstraintLayout? android android

How to position below the lowest of two views in ConstraintLayout?


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.


<?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.