Android Studio, Different preview and emulator

Question

The first picture is how the preview looks; however, when I run the emulator, it looks like the second picture. I am not sure why it is happening. By the way, I am making a simple drumbox application.

Preview

Emulator

The code for activity_main.xml is

<Button
android:id="@+id/bass"
android:layout_width="150dp"
android:layout_height="250dp"
android:text="1"
tools:layout_editor_absoluteX="25dp"
tools:layout_editor_absoluteY="10dp" />

<Button
android:id="@+id/snare"
android:layout_width="150dp"
android:layout_height="250dp"
android:text="2"
tools:layout_editor_absoluteX="200dp"
tools:layout_editor_absoluteY="10dp" />

<Button
android:id="@+id/closedhihat"
android:layout_width="150dp"
android:layout_height="250dp"
android:text="3"
tools:layout_editor_absoluteX="25dp"
tools:layout_editor_absoluteY="250dp" />

<Button
android:id="@+id/hitom"
android:layout_width="150dp"
android:layout_height="250dp"
android:text="4"
tools:layout_editor_absoluteX="200dp"
tools:layout_editor_absoluteY="250dp" />

</android.support.constraint.ConstraintLayout>

Can anyone help?

Possible duplicate of [ConstraintLayout views in top left corner](https://stackoverflow.com/questions/42594033/constraintlayout-views-in-top-left-corner) — Shreyash S Sarnayak, Oct 10 '17 at 14:07

score 0 · Answer 1 · answered Oct 10 '17 at 14:04

Please check my answer to this question: https://stackoverflow.com/a/46552928/4483200

Mainly tools:layout_editor_absoluteX="200dp" refers only to editor, on ConstraintLayout positions should be regarding other elements or the parent in the layout. Check my example.

Hope it helps

KeLiuyue · Answer 2 · 2017-10-10T14:38:27.347

You problem is in this code .

tools:layout_editor_absoluteX="200dp"
tools:layout_editor_absoluteY="250dp"

Tools can tell Android Studio which properties are ignored at run time and are valid only when designing layouts.

For example, we want the android:text property to work only in the layout preview, so you can do like this tools:text="I am a text".

Just like tools:layout_editor_absoluteY="250dp" in the code .

Try this in your code .

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

<Button
    android:id="@+id/bass"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:text="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/snare"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/snare"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:text="2"
    app:layout_constraintLeft_toRightOf="@id/bass"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/closedhihat"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:text="3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/hitom" />

<Button
    android:id="@+id/hitom"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:text="4"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/closedhihat"
    app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

OUTPUT

Note

ConstraintLayout attribute

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

Android Studio, Different preview and emulator

2 Answers2