Android studio constraint layout button wrong position

Question

I'm quite new to android studio and java programming,

I have a constraint layout in my app with ImageView and Buttons,

All of them have:

tools:layout_editor_absoluteX="36dp" tools:layout_editor_absoluteY="1181dp"

I know this is only shown in the editor, how can i put my stuff in right position when compile ?

I have tried LinearLayout and relative but I have a ScrollView too , I didn't manage to implement it correctly with linear or relative, maybe I should not use layout like this way...

Here is my layout file:

`<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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="fill_parent"
android:layout_weight = "1"
android:orientation="vertical"
android:padding="10dp"
android:background="@drawable/r1"
android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:id="@+id/scroll1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="10dp"
    tools:layout_editor_absoluteY="9dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_weight="0.04"
        android:text="Les Poissons Blancs"
        android:textAlignment="viewStart"
        android:textColor="@android:color/holo_green_light"
        android:textSize="36sp"
        android:textStyle="bold"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="88dp">
    </TextView>

    <Button
        android:id="@+id/button4"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Ablette"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="275dp" />

    <Button
        android:id="@+id/button5"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Barbeau"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="426dp" />

    <Button
        android:id="@+id/button6"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Brème"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="577dp" />

    <Button
        android:id="@+id/button7"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Carpe"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="728dp" />

    <Button
        android:id="@+id/button8"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Carassin"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="879dp" />

    <Button
        android:id="@+id/button9"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:text="Chevesne"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="1030dp" />

    <Button
        android:id="@+id/button10"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:text="Gardon"
        tools:layout_editor_absoluteX="36dp"
        tools:layout_editor_absoluteY="1181dp" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="0.00"
        app:srcCompat="@drawable/ablette"
        tools:layout_editor_absoluteY="213dp"
        tools:layout_editor_absoluteX="270dp" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="92dp"
        android:layout_height="48dp"
        app:srcCompat="@drawable/barbeau"
        tools:layout_editor_absoluteX="371dp"
        tools:layout_editor_absoluteY="426dp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="92dp"
        android:layout_height="48dp"
        android:layout_marginEnd="1dp"
        app:srcCompat="@drawable/breme"
        tools:layout_editor_absoluteX="371dp"
        tools:layout_editor_absoluteY="577dp" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="92dp"
        android:layout_height="48dp"
        android:layout_marginEnd="8dp"
        app:srcCompat="@drawable/carpe"
        tools:layout_editor_absoluteX="371dp"
        tools:layout_editor_absoluteY="728dp" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="92dp"
        android:layout_height="48dp"
        android:layout_marginEnd="129dp"
        app:srcCompat="@drawable/carassin"
        tools:layout_editor_absoluteX="380dp"
        tools:layout_editor_absoluteY="879dp" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="92dp"
        android:layout_height="48dp"
        app:srcCompat="@drawable/chevesne"
        tools:layout_editor_absoluteX="380dp"
        tools:layout_editor_absoluteY="1030dp" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="92dp"
        android:layout_height="48dp"
        app:srcCompat="@drawable/gardon"
        tools:layout_editor_absoluteX="380dp"
        tools:layout_editor_absoluteY="1181dp" />

</android.support.constraint.ConstraintLayout>

</ScrollView>´

When click ctrl+F1 on an ImageView it's said that I must add constraints by dragging from the edge connections , I tried to do it in the editor, but it failed

Thanks a lot

You can find here why your button is not displayed properly https://stackoverflow.com/a/45165683/3734172 — Iulian Popescu, Sep 28 '17 at 07:24

score 0 · Answer 1 · answered Sep 28 '17 at 07:27

It's easy with constraintLayout to display item wherever we want especially with androidStudio editor

And in your code you don't have any constraintProperties For exemple for you button5 to be below button4 :

app:layout_constraintTop_toBottomOf="@+id/button4"

score 0 · Answer 2 · answered Sep 28 '17 at 09:50

thanks, it 's much better with buttons , they are now in the right place,

for all buttons i add android:layout_marginTop="110dp" android:layout_marginLeft="35dp" app:layout_constraintTop_toBottomOf="@+id/buttonxxx"

i have tried the same for all the imageview with

android:layout_marginTop="150dp"
        android:layout_marginLeft="440dp"

it works for the imageview1 and 2 but , the others remain on the left size of the window (?!)

or the square is on the right place but the image hasn't follow ....

score 0 · Answer 3 · answered Sep 29 '17 at 09:57

that's ok applying margins , thanks a lot

<Button
        android:id="@+id/button5"
        style="@android:style/Widget.Holo.Light.Button"
        android:layout_width="120dp"
        android:layout_height="48dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="110dp"
        android:text="Barbeau"
        android:textColor="@android:color/white"
        android:onClick="barbeau1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

Android studio constraint layout button wrong position

3 Answers3