codelab-constraint-layout icon indicating copy to clipboard operation
codelab-constraint-layout copied to clipboard

ConstraintLayout constraints are not start-end symmetric

Open PavelSidyakin opened this issue 5 years ago • 0 comments

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:

` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity">

<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>

</LinearLayout>`

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 avatar Aug 13 '20 16:08 PavelSidyakin