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

ConstraintLayout constraints are not start-end symmetric #90

Open
PavelSidyakin opened this issue Aug 13, 2020 · 0 comments
Open

ConstraintLayout constraints are not start-end symmetric #90

PavelSidyakin opened this issue Aug 13, 2020 · 0 comments

Comments

@PavelSidyakin
Copy link

PavelSidyakin commented Aug 13, 2020

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.

@PavelSidyakin PavelSidyakin changed the title Incorrect behavior on constrainting to delimiter View ConstraintLayout constraints are not start-end symmetric Aug 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant