android-constraintlayoutconstraintlayout-guideline

Android Constraint Layout result differs when using guideline

The result for a Constraint Layout differs when I use a Guideline in my Constraint Layout.

  1. Guideline:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_scroll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <TextView
        android:id="@+id/textView_1"
        style="@style/Numbers"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageView
        android:id="@+id/iV_pins_0"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/guideline_scroll"
        app:layout_constraintStart_toEndOf="@+id/textView_1"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_00"
        style="@style/Scroll"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_01"
        app:layout_constraintStart_toEndOf="@id/guideline_scroll"
        app:layout_constraintTop_toBottomOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_01"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_02"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_00"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_02"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_01"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <TextView
        android:id="@+id/textView_2"
        style="@style/Numbers"
        android:text="2"
        app:layout_constraintBottom_toTopOf="@+id/textView_1"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iV_pins_1"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/guideline_scroll"
        app:layout_constraintStart_toEndOf="@+id/textView_2"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_10"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toTopOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_11"
        app:layout_constraintStart_toEndOf="@id/guideline_scroll"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/iB_scroll_11"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_12"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_10"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_12"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_11"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

</androidx.constraintlayout.widget.ConstraintLayout>

Guideline

  1. No Guideline:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView_1"
        style="@style/Numbers"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageView
        android:id="@+id/iV_pins_0"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_00"
        app:layout_constraintStart_toEndOf="@+id/textView_1"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_00"
        style="@style/Scroll"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_01"
        app:layout_constraintStart_toEndOf="@id/iV_pins_0"
        app:layout_constraintTop_toBottomOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_01"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_02"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_00"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <ImageButton
        android:id="@+id/iB_scroll_02"
        style="@style/Scroll"
        android:background="@null"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_01"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_00" />

    <TextView
        android:id="@+id/textView_2"
        style="@style/Numbers"
        android:text="2"
        app:layout_constraintBottom_toTopOf="@+id/textView_1"
        app:layout_constraintEnd_toStartOf="@id/iV_pins_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iV_pins_1"
        style="@style/Pins"
        app:layout_constraintBottom_toBottomOf="@+id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_10"
        app:layout_constraintStart_toEndOf="@+id/textView_2"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_10"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toTopOf="@id/iB_scroll_00"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_11"
        app:layout_constraintStart_toEndOf="@id/iV_pins_1"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/iB_scroll_11"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toStartOf="@id/iB_scroll_12"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_10"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

    <ImageButton
        android:id="@+id/iB_scroll_12"
        style="@style/Scroll"
        android:background="@null"
        android:clickable="false"
        android:onClick="onClickScroll"
        app:layout_constraintBottom_toBottomOf="@id/iB_scroll_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iB_scroll_11"
        app:layout_constraintTop_toTopOf="@id/iB_scroll_10" />

</androidx.constraintlayout.widget.ConstraintLayout>

No Guideline

Styles.xml:

<resources>
    <style name="Scroll" parent="@style/Widget.AppCompat.ImageButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:scaleType">fitCenter</item>
        <item name="layout_constraintDimensionRatio">1</item>
        <item name="layout_constraintHorizontal_weight">1.5</item>
        <item name="layout_constraintWidth_max">90dp</item>
        <item name="android:layout_marginStart">4dp</item>
        <item name="srcCompat">@drawable/ic_empty</item>
    </style>

    <style name="Pins">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:scaleType">fitCenter</item>
        <item name="layout_constraintDimensionRatio">1</item>
        <item name="layout_constraintHorizontal_weight">1.2</item>
        <item name="layout_constraintWidth_max">60dp</item>
        <item name="srcCompat">@drawable/pins_6</item>
        <item name="android:layout_marginStart">4dp</item>
    </style>

    <style name="Numbers">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="autoSizeMaxTextSize">60sp</item>
        <item name="autoSizeMinTextSize">8sp</item>
        <item name="autoSizeStepGranularity">1sp</item>
        <item name="autoSizeTextType">uniform</item>
        <item name="layout_constraintHorizontal_weight">0.7</item>
        <item name="android:gravity">center</item>
    </style>
</resources>

The Image Buttons should be so big as they are when I use no guideline. But I need a guideline, because I have another layout where I want that the views start at the same position and so are vertically aligned to the Image Buttons here (fixed header of ScrollLayout). I tried to achieve this via a guideline, but the result for the Constraint Layout above is not as expected...

Solution

  • I solved it by removing the Constraint Dimension Ratio for style „pins“. I am not totally sure why this helps in the guideline case, but it solved it.