Constraint Layout not working, maybe a bug in design editor?

Question

I am creating my first app with android studio and this is my first problem:

I want to try the ConstraintLayout. I have built the layout with a ConstraintLayout with the Design Editor (clicking it together). When i try the layout in Android Emulator, all Buttons have moved in the left upper corner :( Except the "Hello World" Label which was generated automatically when i created my first project.

The difference between the Label and the Button is, that some code lines beginning with app:layout_constraint.... are missing. You can see it in Code.

What am I doing wrong, or is it a bug? I would be glad for an answer! :)

<?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"
    tools:context="com.example.u0017007.coffeecounter.MainActivity">

    <TextView
        android:layout_width="136dp"
        android:layout_height="30dp"
        android:text="Hello World!"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.234" />

    <Button
        android:id="@+id/buttonAddCoffee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:freezesText="false"
        android:text="@string/add_coffee"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="231dp" />

    <Button
        android:id="@+id/buttonRemoveCoffee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/remove_coffee"
        tools:layout_editor_absoluteX="236dp"
        tools:layout_editor_absoluteY="231dp" />

</android.support.constraint.ConstraintLayout>

Possible duplicate of [ConstraintLayout views in top left corner](https://stackoverflow.com/questions/42594033/constraintlayout-views-in-top-left-corner) — Ben P., Jul 27 '17 at 04:56

score 3 · Answer 1 · edited Oct 30 '17 at 16:44

It seems from the above code that, you didn't added any constraints to buttons thats why they moved to left upper corner.

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

    <TextView
        android:layout_width="136dp"
        android:layout_height="30dp"
        android:text="Hello World!"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.234" />

    <Button
        android:id="@+id/buttonAddCoffee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:freezesText="false"
        android:text="ADD coffee"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="276dp"
        app:layout_constraintRight_toLeftOf="@+id/buttonRemoveCoffee"
        android:layout_marginRight="82dp"
        android:layout_marginLeft="24dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="1.0" />

    <Button
        android:id="@+id/buttonRemoveCoffee"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="remove coffee"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="276dp"
        android:layout_marginRight="24dp"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

Please refer to bellow link -

https://www.youtube.com/watch?v=z53Ed0ddxgM

score 3 · Answer 2 · answered Jul 27 '17 at 06:09

tools:layout_editor_absoluteX and tools:layout_editor_absoluteY are only used for preview, like all tools:XXXX.
You need to add constraints to your view. You can add in the XML or you can do it with the visual editor.

There is a very good website that explain all about ConstraintsLayout.

By the way, Android Studio warm you with a error This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints if you don't set constraints.

score 0 · Answer 3 · answered Jul 30 '17 at 11:26

tools:layout_editor_absoluteX="236dp"

tools:layout_editor_absoluteY="231dp"

These are used by studio to render in Graphic editor only. During run time,

as constraints are not set, the views take default position(0,0).

Try setting some constraints on buttons and procedd

Constraint Layout not working, maybe a bug in design editor?

3 Answers3