ConstraintLayout include positioning issue

Question

Portion of an activity layout included from external layout definition. After including some UI elements lose their original positioning.

Original layout has text positioned to the left:

Included layout centers the same text:

Text elements are defined as:

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/terms_of_service"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxHeight="48dp"
            android:minHeight="32dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/divider1">

            <TextView
                android:id="@+id/textView46"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="8dp"
                android:text="Display Terms of Service"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                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" />
        </androidx.constraintlayout.widget.ConstraintLayout>

As you can see, app:layout_constraintHorizontal_bias="0.0" positions text to the left.

In the activity layout its included with necessary constraints:

<include
        android:id="@+id/content"
        layout="@layout/legal"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/include__ad"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

Layout Inspector confirms that textView46 in resulting layout does not have app:layout_constraintHorizontal_bias="0.0" attribute - this positions text at the centre.

What do I need to do to retain the positioning in included layout?

Answer 1

The ConstraintLayout in the included layout is inheriting the *:layout_* attributes from the include tag. In essences, what you see is

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/terms_of_service"
        android:layout_height="0dp"
        android:layout_width="wrap_content"
        android:layout_marginBottom="8dp"
        android:maxHeight="48dp"
        android:minHeight="32dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView46"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:layout_width="wrap_content"
            android:text="Display Terms of Service"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            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" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Because the inner _ConstraintLayout has a width of wrap_content and is constrained to the parent start/end, it is centered in the outer layout.

Remove the end constraint on the include tag and it should work.

To do this delete the end constraint for the include statement: Delete app:layout_constraintEnd_toEndOf="parent". You can also just add app:layout_constraintHorizontal_bias="0.00" and leave the end constraint.