CODEWITHSUNDEEP
androidandroid-constraintlayout
Sumit Shukla
Sumit Shukla

Reputation: 4494

Constraint Layout's child margins

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>

Upvotes: 1

Views: 2408

Answers (3)

Md Tarik Mahmud
Md Tarik Mahmud

Reputation: 331

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.

Upvotes: 3

Mohan
Mohan

Reputation: 1244

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.

Upvotes: 2

Edilson Ngulele
Edilson Ngulele

Reputation: 161

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

enter image description here

Upvotes: 1

Related Questions