Why is my text going out on the left side when it has a left constraint

Question

Basically what I'm trying to do is to have the Checkbox and the TextView on its left be right aligned. And this is working, but when the text is long, instead of the text wrapping, it continues on the left side beyond the left border.

This is what the design tool shows, looks about the same on the phone:

Below is the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:padding="24dp"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="3dp"
        android:textColor="@color/secondary_text"
        android:textSize="14sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="message" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintTop_toTopOf="@+id/always_do_this_checkbox_label"
        app:layout_constraintLeft_toLeftOf="@+id/message"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintRight_toLeftOf="@+id/always_do_this_checkbox_label"
        android:id="@+id/spacer" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/always_do_this_checkbox_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="3dp"
        android:layout_marginTop="4dp"
        android:textColor="@color/secondary_text"
        android:textSize="14sp"
        android:layout_marginRight="16dp"
        app:layout_constraintTop_toTopOf="@+id/always_do_this"
        app:layout_constraintLeft_toRightOf="@+id/spacer"
        app:layout_constraintRight_toLeftOf="@+id/always_do_this"
        tools:text="this is is super long text that will probably wrap as soon as it" />

    <com.google.android.material.checkbox.MaterialCheckBox
        android:id="@+id/always_do_this"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@+id/message"
        app:layout_constraintLeft_toRightOf="@+id/always_do_this_checkbox_label"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

What am I doing wrong?

Edit: Just to be clear, with long text the issue is that it gets out on the left. But it works fine with short text, everything is right aligned. Some of the solutions that have been suggested will fix it for long text but end up breaking it for short text. Both must work.

Answer 1

Because you don't use use layout_constrainedWidth and your always_do_this_checkbox_label TextView has a layout_constraintLeft_toRightOf which must be layout_constraintLeft_toLeftOf and app:layout_constraintHorizontal_bias must be 1 and app:layout_constraintHorizontal_chainStyle must be packed, so change your TextView to:

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/always_do_this_checkbox_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="3dp"
        android:layout_marginTop="4dp"
        android:textColor="@color/secondary_text"
        android:textSize="14sp"
        android:layout_marginRight="16dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="@+id/always_do_this"
        app:layout_constraintLeft_toLeftOf="@+id/spacer"
        app:layout_constraintRight_toLeftOf="@+id/always_do_this"
        tools:text="this is is super long text that will probably wrap as soon as it" />