Constraint Layout's child margins

Question

I am trying to use an two views inside a constraintlayout.But as soon as margin is assigned there is undefined behaviour on child views.Any help will be appreciated.

Here is my code:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_action_google_play"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtNew"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="TextHere"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="@+id/img"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

You can try padding for the textview instead of margins. – Sir Codesalot Mar 25 '18 at 07:15 — Sir Codesalot, Mar 25 '18 at 07:15

score 3 · Answer 1 · answered Dec 11 '19 at 13:08

In ConstraintLayout, to apply margin on any side (Left, Top, Right, Bottom), the constraint for that side must be defined explicitly. If your case, you want "16dp" margin on each side of ImageView, so you need to declare constraint for each side of that ImageView. You wrote the following in XML:

<ImageView   
    android:layout_margin="16dp"       
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Replace that like this:

<ImageView
    android:id="@+id/img"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginLeft="16dp"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="16dp"
     />

To get the margin working on Right and Bottom, you need to add the following too:

    app:layout_constraintRight_toLeftOf="@+id/txtNew"
    android:layout_marginRight="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="16dp"

Same thing goes to TextView.

Mohan · Accepted Answer · 2018-03-25T18:28:36.720

Use padding in constraintLayout instead of using layout_margin in every child item to achieve your requirement.

Change your code to the following one:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

<ImageView
    android:id="@+id/img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_google_play"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/txtNew"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextHere"
    android:textSize="24sp"
    app:layout_constraintLeft_toRightOf="@+id/img"
    app:layout_constraintTop_toTopOf="parent" />

this link will help you the difference between padding and margin.

So it is compulsory to use padding for every child view inside constraintlayout. — Sumit Shukla, Mar 25 '18 at 07:18
If you use padding in the parent view (ConstraintLayout) then each child element will have layout_margin of the padding value specified in parent view — Mohan, Mar 25 '18 at 07:24

score 1 · Answer 3 · answered Mar 25 '18 at 07:28

When defining margins between views in Constraintlayout, make sure you specify where you want that margin be:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtNew"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:text="TextHere"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/img"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The Result

Yes i want margin on all four sides, but instead of margins padding worked!! — Sumit Shukla, Mar 25 '18 at 07:29
Alright, just a quick reminder that **padding** is the space inside of a view and **margin** is the space outside of a view. — Edilson Ngulele, Mar 25 '18 at 07:37
here's a better explanation: https://stackoverflow.com/questions/21959050/android-beginner-difference-between-padding-and-margin — Edilson Ngulele, Mar 25 '18 at 07:41

Constraint Layout's child margins

3 Answers3