app:layout_marginBottom is not working well with android constraint layout

Viewed 19034

Is there any reason why the following layout_marginBottom is not working? However, if I use layout_marginTop on the second view it does work well

<android.support.constraint.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"
    android:background="#ade4ad">
    <TextView
        android:id="@+id/first"
        android:layout_width="90dp"
        android:layout_height="40dp"
        app:layout_marginBottom="10dp"
        android:background="#000"/>
    <TextView
        android:id="@+id/second"
        android:layout_width="90dp"
        android:layout_height="40dp"
        android:background="#fff"
        app:layout_constraintTop_toBottomOf="@+id/first"/>
</android.support.constraint.ConstraintLayout>
4 Answers

In order to

android:layout_marginBottom="20dp" 

work well, you should use

app:layout_constraintBottom_toBottomOf="parent"

Layout top/bottom margin works only when:

  1. constraints in the same direction need to connect with their next neighbor child, like a unidirectional linked list.
  2. last constraint in the direction must be set.

In your case, you need to set "layout_constraintBottom_toXXXXX" for each view in the chain, and last view set bottom to parent.

<android.support.constraint.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="wrap_content"
    android:background="#ade4ad">
    <TextView
        android:id="@+id/first"
        android:layout_width="90dp"
        android:layout_height="40dp"
        app:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@+id/second"
        android:background="#000"/>
    <TextView
        android:id="@+id/second"
        android:layout_width="90dp"
        android:layout_height="40dp"
        app:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@+id/third"
        android:background="#fff"/>
    <TextView
        android:id="@+id/third"
        android:layout_width="90dp"
        android:layout_height="40dp"
        android:background="#fff"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

Moreover, reverse dependency is not required except you want "layout_marginTop" works.

you can use that trick, create a space bellow, align to parent bottom

<Space
   android:id="@+id/space"
   android:layout_width="wrap_content"
   android:layout_height="80dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent" />

and align your view on top of the space app:layout_constraintBottom_toTopOf="@+id/space" like so

<TextView
    android:id="@+id/howNext"
    style="@style/white_action_btn_no_border"
    android:layout_width="344dp"
    android:layout_height="60dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:text="@string/got_it_next"
    app:layout_constraintBottom_toTopOf="@+id/space"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
Related