CODEWITHSUNDEEP
androidandroid-constraintlayoutconstraint-layout-chains
Christian
Christian

Reputation: 26437

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>

Upvotes: 0

Views: 556

Answers (3)

Ben P.
Ben P.

Reputation: 54264

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.

Upvotes: 1

igor_rb
igor_rb

Reputation: 1891

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.

Upvotes: 1

Ves
Ves

Reputation: 379

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"

Upvotes: 1

Related Questions