Why does the design look different than what's shown in emulator in android studio?

Question

I'm trying to make a game app on Android Studio and when I try to run my app on the emulator, it look different than what's shown on the design. How can I fix this ?

this is my layout xml code:

                            <?xml version="1.0" encoding="utf-8"?>
                 <androidx.constraintlayout.widget.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=".MainActivity">

                <Button
                    android:id="@+id/button"
            style="@android:style/Widget.DeviceDefault.Light.Button.Small"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:background="@drawable/custom_button"
                    android:text="player1"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    tools:layout_editor_absoluteX="78dp"
                    tools:layout_editor_absoluteY="271dp" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:layout_marginBottom="280dp"
                    android:background="@drawable/custom_button"
                    android:text="player2"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    tools:layout_editor_absoluteX="78dp" />

                <Button
                    android:id="@+id/button3"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:background="@drawable/custom_button"
                    android:text="New"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    tools:layout_editor_absoluteX="78dp"
                    tools:layout_editor_absoluteY="334dp" />

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="11dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="271dp" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="11dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="334dp" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="15dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="400dp" />

thanks in advance

Answer 1

• You are missing constraints on your views so in run time the position of them is not the same as the preview.
  

• In addition, because different devices got different screen sizes you cant use fixed sizes on your views because it will just look different on different devices.

---

You can use ConstraintLayout with:

app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.3"

And some Guidelines to achieve responsive layout:

Here is an example:

  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button"
        style="@android:style/Widget.DeviceDefault.Light.Button.Small"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="player1"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="player2"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="New"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>



</androidx.constraintlayout.widget.ConstraintLayout>

This will look like this:

Answer 2

You need to constrain your views when using the ConstraintLayout.

Check the guide on building UI with it: https://developer.android.com/training/constraint-layout

Also, to quickly have something close to what you see, click on this button to get the layout editor's best guess of constraints to keep the views where they are now.