Why does my ConstraintLayout chain fail to build?

Question

According to the XML editor my layout should look like:

But in the app it renders as:

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>

You really are using German names as IDs? And even with Umlaute? The 80's are calling, they want their Denglish back! — WarrenFaith, Oct 10 '18 at 14:44

igor_rb · Answer 1 · 2018-10-10T15:08:48.340

1

Change first ImageButton like this:

<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_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/ramhat" />

You lose app:layout_constraintStart_toStartOf="parent" in first element of chain.

UPD: See more info here: https://developer.android.com/training/constraint-layout/

A chain works properly only if each end of the chain is constrained to another object on the same axis, as shown in figure 14.

edited Oct 10 '18 at 15:08

answered Oct 10 '18 at 14:58

igor_rb

1,821
1
19
34

If I do that, the elements aren't right of the screen anymore as shown in the first image. – Christian Oct 10 '18 at 15:03
yes, elements will spread over all screen width. You doesn't set constraint for start of you chain. I updated my answer with usefull link. – igor_rb Oct 10 '18 at 15:04
In addition to what @igor_rb said, add `app:layout_constraintHorizontal_chainStyle="packed"` and `app:layout_constraintHorizontal_bias="1"` to verfügungButton. The first line indicates how to distribute the views (packed instead of the default spread), and the 2nd line indicates that the whole packed chain should go to the right (0 is leftmost and 1 is rightmost). Here's a more useful link: https://developer.android.com/reference/android/support/constraint/ConstraintLayout – Ovidiu Oct 10 '18 at 15:10

score 1 · Answer 2 · answered Oct 10 '18 at 15:03

In my designer, this xml looks exactly like what you show as the app running.

To get the layout you are after I changed it to this (most of the xml removed):

    android:id="@+id/kuerzel"
    android:text="Text1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" 

    android:id="@+id/kuerzel"
    android:text="Text2"
    app:layout_constraintEnd_toStartOf="@+id/rubrik" 

    android:id="@+id/ramhat"
    app:layout_constraintEnd_toStartOf="@+id/kuerzel"

    android:id="@+id/verfügungButton"
    app:layout_constraintEnd_toStartOf="@+id/ramhat"

score 1 · Accepted Answer · answered Oct 10 '18 at 15:10

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.

Why does my ConstraintLayout chain fail to build?

3 Answers3