androidandroid-constraintlayoutconstraint-layout-chains

Why does my ConstraintLayout chain fail to build?


According to the XML editor my layout should look like: enter image description here

But in the app it renders as:

enter image description here

I don't understand why the chain feature doesn't work in cases like this. How do I fix it for this instance and how can I generally get a grasp of how to build the chains correctly?

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">


    <ImageButton
        android:id="@+id/verfügungButton"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_marginStart="8dp"
        android:scaleType="fitCenter"
        android:src="@drawable/icons8_home_50"

        app:layout_constraintEnd_toStartOf="@+id/ramhat" />


    <ImageButton
        android:id="@+id/ramhat"

        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"

        android:scaleType="fitCenter"
        android:src="@drawable/icons8_settings_50"

        app:layout_constraintEnd_toStartOf="@+id/kuerzel"
        app:layout_constraintStart_toEndOf="@id/verfügungButton"
        />


    <TextView
        android:id="@+id/kuerzel"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_marginStart="8dp"

        android:text="Text2"

        app:layout_constraintEnd_toStartOf="@+id/rubrik"
        app:layout_constraintStart_toEndOf="@id/ramhat" />


    <TextView
        android:id="@+id/rubrik"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_gravity="center_vertical"
        android:layout_marginStart="8dp"
        android:text="Text1"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/kuerzel" />
</android.support.constraint.ConstraintLayout>

Solution

  • What you have posted is not, technically, a "chain". A chain is formed when multiple views have both start and end constraints, and all views are linked to each other (or to another view / the parent for the ends of the chain). Because your first ImageButton only has an end constraint, this is not a chain.

    Of course, that's totally fine. You probably don't even want a chain anyway, since you want everything to slide over to the end of the parent.

    But with that in mind, that means we can change your existing constraints. Delete all of the app:layout_constraintStart_toEndOf constraints:

    <ImageButton
        android:id="@+id/verfügungButton"
        app:layout_constraintEnd_toStartOf="@+id/ramhat"/>
    
    <ImageButton
        android:id="@+id/ramhat"
        app:layout_constraintEnd_toStartOf="@+id/kuerzel"/>
    
    <TextView
        android:id="@+id/kuerzel"
        app:layout_constraintEnd_toStartOf="@+id/rubrik"/>
    
    <TextView
        android:id="@+id/rubrik"
        app:layout_constraintEnd_toEndOf="parent"/>
    

    This makes it crystal clear what the dependencies are, and everything slides to the end of the view as desired.