Search code examples
androidandroid-constraintlayoutlayoutmargins

ConstraintLayout - marginEnd has no effect

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):

enter image description here

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 ?

Solution

  • 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):

    Pull Direction

    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:

    Equal Pull

    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:

    result