ConstrainLayout: How to constrain a View's top to the bottom of the view of largest height?

Question

I am currently trying ConstraintLayout in our project.

The layout I would like to implement can be simplified as following:

There are two views (say TopA and TopB) on the top of the layout, and there is another view (say BottomC) positioned below them.

TopB have changeable height, in different situations TopB's height may be larger or smaller than TopA's.

My questions is: how to constrain BottomC to the bottom of the Top view who has a larger height, so that BottomC won't be overlapped by the view with a larger height. (Screenshot attached below)

I can do that by adding TopA and TopB to an extra ViewGroup (LinearLayout for example) and constrain BottomC to the bottom of that ViewGroup. But is it possible to achieve that without introducing an extra layer of ViewGroup?

Answer 1

Actually this one is the common problem with the ConstraintLayout so basically there are two options, one is that if your imageview is of fixed height then set TextView minheight as imageview's height else ConstraintLayout is now introduced Barrier but this is in the Beta version if you want to use it with beta version set up as follow

This is new feature introduced in ConstraintLayout which is currently in Beta version.

How to add beta ConstraintLayout to project follow steps below

add maven support in project gradle file as below

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
        jcenter()
    }
}

then in app gardle dependencies add ConstarintLayout library dependency

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'

add barrier in layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/barrier1"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView2, imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintTop_toBottomOf="@id/barrier1"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

Now Beta3 is released with some fixes and new features https://androidstudio.googleblog.com/2017/10/constraintlayout-110-beta-3-is-now.html

Answer 2

3 minutes after posting the question, I just found that recently released version 1.1.x of ConstrainLayout has a new feature called Barrier, and the official training doc of ConstrainLayout has been updated to introduce it.

This is exactly what I was looking for. Hope this can help guys like me.

The actual layout code looks like this (notice the android.support.constraint.Barrier node):

<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" >

    <ImageView
        android:id="@+id/topA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/topB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="24dp"
        android:text="Text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.75"
        app:layout_constraintStart_toEndOf="@+id/topA"
        app:layout_constraintTop_toTopOf="@+id/topA"
        />

    <android.support.constraint.Barrier
        android:id="@+id/barrier4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="topA,topB"
        tools:layout_editor_absoluteY="16dp"/>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier4"/>

</android.support.constraint.ConstraintLayout>

Answer 3

Option 1: I recommend to do the following by adding the two views(Image, TextView) to a viewgroup(Any can do) then constraint the progressbar to the bottom of the viewgroup.(Edit:Just read the part were you said no view group so option 2)

Option 2: But if u have to do it programmatically for animation or other reasons i recommend reading about:

https://developer.android.com/reference/android/support/constraint/ConstraintSet.html

and

https://developer.android.com/reference/android/transition/TransitionManager.html