app:layout_marginBottom is not working well with android constraint layout

Question

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>

I add exactly the same problem, and I fixed it by adding to your first textView the following constraint : app:layout_constraintBottomToBottomOf="@+id/second". Then the marginBottom worked well — Rémi P, Jul 07 '17 at 07:32
You need to have a constraint to have a margin. For eg., for bottom margin bottom constraint is must. Similar for other sides also. — Siva Prakash, Jul 28 '18 at 06:43

score 64 · Answer 1 · edited Feb 20 '19 at 12:31

64

In order to

android:layout_marginBottom="20dp"

work well, you should use

app:layout_constraintBottom_toBottomOf="parent"

edited Feb 20 '19 at 12:31

Vadim Kotov

8,084
8
48
62

answered May 01 '18 at 09:24

Ucdemir

2,852
2
26
44

15

You have to apply constraints to the top and bottom of all views if you want top and bottom margins to be respected. The same goes with left and right constraints and left and right margins. – Etienne Lawlor Apr 13 '19 at 19:53

superuser · Answer 2 · 2019-08-28T10:39:13.273

Layout top/bottom margin works only when:

constraints in the same direction need to connect with their next neighbor child, like a unidirectional linked list.
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.

Got it. Simple said: A view's constraints only respect the margins that the view defines itself. — Anticro, Mar 03 '21 at 08:00

score 11 · Answer 3 · answered May 01 '18 at 09:56

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

Mehul Kabaria · Answer 4 · 2017-07-05T16:29:03.420

This is not LinearLayout or RelativeLayout, its ConstraintLayout so you have to give Left, Right, Bottom, Top Constraint to Relevant Layout, in your case You have to give TextView first Bottom_Top Constraint to TextView second. so you can get Margin between Two TextView.

Your layout should be like below.

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

Your solution doesn't explain why android:layout_marginBottom="10dp" on the first view is not working (also with your code). — Ron____, Jul 09 '17 at 06:49

app:layout_marginBottom is not working well with android constraint layout

4 Answers4

Linked