CODEWITHSUNDEEP
androidmarginandroid-constraintlayout
Ron____
Ron____

Reputation: 792

app:layout_marginBottom is not working well with android constraint layout

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>

Upvotes: 50

Views: 24098

Answers (4)

superuser
superuser

Reputation: 768

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.

Upvotes: 27

Ucdemir
Ucdemir

Reputation: 3098

In order to 

android:layout_marginBottom="20dp"

work well, you should use

app:layout_constraintBottom_toBottomOf="parent"

Upvotes: 64

Jack
Jack

Reputation: 1575

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

Upvotes: 11

Mehul Kabaria
Mehul Kabaria

Reputation: 6622

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>

Upvotes: -3

Related Questions