Android layout: align text of CheckBox and TextView in ConstraintLayout

Question

I want to align left the texts (not the icon and the checkbox) of a TextView with an info icon and a CheckBox in an Android app ConstraintLayout.

The info icon is slightly larger than the checkbox, so the text of the CheckBox starts slightly left of the TextView text.

ASCII art illustration (I would want the "T" of "This" to be aligned with the "T" of "The"):

( i )    This is the information text
[x]    The text of this Checkbox is not aligned with the text of the TextView

Extract of XML layout:

<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="wrap_content">

    <TextView
        android:id="@+id/textInfo"
        style="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:drawablePadding="8dp"
        android:text="This is some very important information that has to be aligned left"
        app:drawableStartCompat="@drawable/icon_info"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="This is the Text of the Checkbox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textInfo" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

I don't know that there is a way to align to the beginning of the text in a CheckBox, what you could do instead is to use a separate TextView to hold the text for the CheckBox, and align the TextView for the info icon to that.

Example XML layout:

<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="wrap_content">

    <ImageView
        android:id="@+id/iv_info"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_info_icon"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/iv_info"
        app:layout_constraintBottom_toBottomOf="@id/iv_info"
        app:layout_constraintStart_toStartOf="@id/tv_checkbox_text"
        android:text="This is the info text"/>

    <CheckBox
        android:id="@+id/cb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/iv_info"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_checkbox_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/cb"
        app:layout_constraintBottom_toBottomOf="@id/cb"
        app:layout_constraintStart_toEndOf="@id/cb"
        android:layout_marginStart="20dp"
        android:text="This is the checkbox text"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Image of the layout:

Note that you will have to adjust the starting margin of the TextView associated with the CheckBox to get the spacing you want.

Answer 2

我这样做的方法是将文本提取到 TextViews 中，添加垂直参考线并将文本与此参考线对齐。

Answer 3

this is my code

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/layout_head"
        tools:layout_editor_absoluteX="15dp">


        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/transferBttnChooseRoom"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/pilih"
            android:textColor="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/transferChoosedRoom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/pilih_room_transfer"
            android:textSize="15sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/transferBttnChooseRoom"
            app:layout_constraintTop_toTopOf="parent"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

maybe you can change on your case like this