ConstraintLayout - marginEnd has no effect

Question

I'm trying to set the end margin attribute for a view as following:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/sub_title"
        android:layout_marginEnd="22dp"
        />

    <TextView
        android:id="@+id/sub_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="subTitle"
        app:layout_constraintStart_toEndOf="@+id/title"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

It has no effect (screen of the preview):

When I set the marginStart for the id:sub_title TextView instead the margin works fine but I need the margin to be set on the id:title TextView for another reason

Can I achieve the desired margin by specifying it for the id:title TextView ?

Answer 1

One way to look into ConstraintLayout's constraints is like you put in constraints and they start pulling the view towards the view its constrained to.

So, the issue with your layout code is that: No pull is being applied to your sub_title view towards the end of your screen.

The Direction you view is being pulled (Ignore the spacing in the image it's in subtitle view):

Now when you put constraint to the subtitle end, the pull becomes equal and the views get centered. Now if you put some margin to the title it will be able to push the view by x dp and to make them align to the start you need to put in some layout_constraintHorizontal_bias magic and set it to 0.0:

The final code will be something like this:

<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="22dp"
        android:text="Title"
        app:layout_constraintEnd_toStartOf="@+id/sub_title"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/sub_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="subTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/title"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Lines of magic:

app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"

Result:

Answer 2

Margin end will have no effect if the "subtitle" is not constrained to the end. In your casec you case set the margin start to "subtitle":

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/sub_title"
        />

    <TextView
        android:id="@+id/sub_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="subTitle"
        android:layout_marginStart="22dp"
        app:layout_constraintStart_toEndOf="@+id/title"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>