Skip to content
This repository was archived by the owner on Aug 16, 2023. It is now read-only.
This repository was archived by the owner on Aug 16, 2023. It is now read-only.

ConstraintLayout constraints are not start-end symmetric #90

@PavelSidyakin

Description

@PavelSidyakin

Version 2.0.0-rc1. Also reproduced on 1.1.3.

Assume we want to make the following layout (views are presented as different colours).
All view sized are match constraint. I.e. view's size should be totally managed by constraint layout.
image

I created the following layout:

`

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

    <View
        android:id="@+id/variant1_small_view_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        app:layout_constraintBottom_toTopOf="@id/variant1_small_view_2"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/variant1_small_views_delimiter"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/variant1_small_view_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00FFFF"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/variant1_small_views_delimiter"
        app:layout_constraintTop_toBottomOf="@id/variant1_small_view_1" />

    <View
        android:id="@+id/variant1_small_views_delimiter"
        android:layout_width="2dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/variant1_big_view"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/variant1_big_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/variant1_small_views_delimiter"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

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

    <View
        android:id="@+id/variant2_small_view_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        app:layout_constraintBottom_toTopOf="@id/variant2_small_view_2"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/variant2_small_views_delimiter"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/variant2_small_view_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00FFFF"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/variant2_small_views_delimiter"
        app:layout_constraintTop_toBottomOf="@id/variant2_small_view_1" />

    <View
        android:id="@+id/variant2_small_views_delimiter"
        android:layout_width="2dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/variant2_big_view"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/variant2_big_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@id/variant2_small_views_delimiter"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

`

Actual result:
image
We see that variant1_big_view aligns to parent, but should be aligned to variant1_small_views_delimiter.

The variant1 build with the same principles as variant2. But we see that differences in start-end constraints has different behaviour.
If we change at variant1_big_view:
app:layout_constraintStart_toEndOf="@id/variant1_small_views_delimiter"
to
app:layout_constraintStart_toStartOf="@id/variant1_small_views_delimiter"

The layout looks better - variant1_big_view aligns to variant1_small_views_delimiter, but to start. Should be to the end.

I have a workaround for the issue - constraint big view to start of the delimiter and add a margin.
But it strange that variant2 works, but varian1 doesn't.
ConstraintLayout constraints should be start-end symmetric. But we see that they are not start-end symmetric.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions