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?

What happens when you don’t wrap it in ConstraintLayout? – Lawrence Gimenez Oct 11 '22 at 12:22 — Lawrence Gimenez, Oct 11 '22 at 12:22

Cheticamp · Answer 1 · 2022-10-12T12:46:27.190

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.

Thank you for the answer. Can you please clarify what do you mean by 'end constraint on the include tag'? — Andriy, Oct 11 '22 at 21:50
None of suggested helps, unfortunately. Using the Layout Inspector I found that textView46 does not have app:layout_constraintHorizontal_bias="0.0" after inclusion - this positions it center in the container. — Andriy, Oct 12 '22 at 09:10

ConstraintLayout include positioning issue

1 Answers1