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

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.

CodePudding user response：

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" />

CodePudding user response：

The app:layout_constraintLeft_toRightOf="@ id/spacer" on the always_do_this_checkbox_label TextView makes it draw the text beyond the left border.

Instead you need to align left to left; i.e. use app:layout_constraintLeft_toLeftOf="@ id/spacer"

Then force applying the width constraints using app:layout_constrainedWidth="true"

<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"
    app:layout_constrainedWidth="true"
    android:textColor="@color/secondary_text"
    android:textSize="14sp"
    android:layout_marginRight="16dp"
    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" />

Update:

That works when the text is super long but when the text is short, everything is centered instead of to the right.

You can bias the TextView to the right with:

app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"

CodePudding user response：

you can try the layout for your reference:

 <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="@android:color/black"
        android:textSize="14sp"
        android:gravity="end"
        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_ths"
        app:layout_constraintLeft_toLeftOf="@ id/message"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintRight_toLeftOf="@ id/always_do_label"
        android:id="@ id/spacer" />

    <TextView
        android:id="@ id/always_do_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="this is is super long, loong, lonng, longg Text that will probably wrap as soon as it"
        android:textSize="14sp"
        android:layout_marginTop="5dp"
        app:layout_constraintStart_toStartOf="@id/message"
        app:layout_constraintTop_toBottomOf="@ id/message"
        app:layout_constraintEnd_toStartOf="@ id/always_do_ths"/>


    <androidx.appcompat.widget.AppCompatCheckBox
        android:id="@ id/always_do_ths"
        android:layout_width="32dp"
        android:layout_height="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/message"
        app:layout_constraintBottom_toBottomOf="@ id/always_do_label"/>
    
    <View
        android:id="@ id/spacer_2"
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/always_do_label"
        android:layout_marginTop="10dp"/>

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_percent="0.85"
        android:text="really long text with lots n lots of data to display and with\nstill filling with some random data...."
        android:textSize="14sp"
        app:layout_constraintTop_toBottomOf="@ id/spacer_2"
        app:layout_constraintStart_toStartOf="parent"/>

    <androidx.appcompat.widget.AppCompatCheckBox
        android:layout_width="32dp"
        android:layout_height="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/spacer_2"
        app:layout_constraintWidth_percent="0.15"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>

I have added thee two sample layout for better clarity, you can use either one of them. for text to be right aligned you can use gravity as end or right.