ConstraintLayout margins

Viewed 33454

I have a simple layout.

<?xml version="1.0" encoding="utf-8"?>
<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="@color/colorDarkGray">


    <RelativeLayout
        android:id="@+id/container3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0.7"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Another text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Some text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

In design view, it looks so looks so As you can see there is no left and right margins. Top and bottom margins work well. If I remove left or right margin my relative layout moves beyond the screen a bit. Guess I can do it without a relative layout at all, BUT I'm interested why that happened.

3 Answers

You should avoid using nested views inside ConstraintLayout. The reasons are:

The result layout source should look like:

<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="@color/colorDarkGray">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:alpha="0.7"
        android:fontFamily="sans-serif"
        android:letterSpacing="0.03"
        android:text="Another text"
        android:textColor="@color/colorWhite"
        android:textSize="11sp"
        android:textStyle="normal"
        android:id="@+id/textView"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="end"
        android:fontFamily="sans-serif"
        android:letterSpacing="0.03"
        android:text="Some text"
        android:textColor="@color/colorWhite"
        android:textSize="11sp"
        android:textStyle="normal"
        android:id="@+id/textView2"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Result view

You can learn how to build layouts with ConstraintLayouts by following steps in Google's Codelab.

Try this change your RelativeLayout width to android:layout_width="0dp"

<?xml version="1.0" encoding="utf-8"?>
<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="@color/colorDarkGray">


    <RelativeLayout
        android:id="@+id/container3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0.7"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Another text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Some text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

Yes, of course there're no left and right margins in your layout when you're defining your RelativeLayout as below:

<RelativeLayout
    android:id="@+id/container3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"

That means RelativeLayout has wrap_content width and height and it's in the center of Parent (with our constraintTop,Bot....).

How to solve it? Just set the width of your relative layout to 0dp. According to constraints, that means your RelativeLayout will be as wide as parent.

Related