Android Studio emulator sizes aren't correct with the real thing

Question

I'm currently working on an android app on a Huawei MediaPad t3 10 Click for more information

Currently I am working on changing the layout. I have changed the emulator settings in Android Studio to mimic my real tablet. Unfortunately my emulator shows that all buttons are in the correct place, but when I upload the app to my actual device, the whole layout isn't correct and everything is in the wrong place. How can this be fixed?

EDIT: screenshots of the real thing and the emulator:

In the emulator I shifted the text to make sure it is correct on the real thing. But this obviously shouldn't need to be done. The buttons are also different sizes while the emulator shows them all being the same.

ANOTHER EDIT: This is the layout 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"
tools:context="com.example.jurian.dynamicroomreservation.MainActivity">


<Button
    android:id="@+id/btnCheckIn"
    android:layout_width="430dp"
    android:layout_height="125dp"
    android:layout_alignParentStart="true"
    android:layout_alignTop="@+id/toolbar"
    android:layout_marginStart="75dp"
    android:background="#3f51b5"
    android:fontFamily="sans-serif"
    android:text="@string/checkIn"
    android:textAllCaps="false"
    android:textColor="#fff"
    android:textSize="36sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.163" />

<Button
    android:id="@+id/btnReserve"
    android:layout_width="430dp"
    android:layout_height="125dp"
    android:layout_alignStart="@+id/btnCheckIn"
    android:layout_centerVertical="true"
    android:layout_column="0"
    android:layout_row="1"
    android:background="#ff4081"
    android:fontFamily="sans-serif"
    android:text="@string/reserve"
    android:textAllCaps="false"
    android:textColor="#fff"
    android:textSize="36sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.088"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.447" />

<Button
    android:id="@+id/btnShowReservations"
    android:layout_width="430dp"
    android:layout_height="125dp"
    android:layout_alignBottom="@+id/toolbar"
    android:layout_alignStart="@+id/btnReserve"
    android:layout_column="0"
    android:layout_row="2"
    android:background="#ffffff"
    android:fontFamily="sans-serif"
    android:text="@string/showReservations"
    android:textAllCaps="false"
    android:textColor="#000"
    android:textSize="36sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.093"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.755" />

<ImageView
    android:id="@+id/toolbar"
    android:layout_width="519dp"
    android:layout_height="519dp"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_marginEnd="75dp"
    android:src="@drawable/green_rectangle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.972"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textViewRoomStatusText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnCheckIn"
    android:layout_alignBottom="@+id/btnCheckIn"
    android:layout_alignStart="@+id/textViewRoomStatus"
    android:layout_marginStart="43dp"
    android:fontFamily="sans-serif"
    android:text="@string/roomStatusText"
    android:textColor="#fff"
    android:textSize="36sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.692"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.178" />

<TextView
    android:id="@+id/textViewRoomStatus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/toolbar"
    android:layout_centerVertical="true"
    android:layout_marginEnd="85dp"
    android:fontFamily="sans-serif"
    android:text="@string/roomStatusAvailable"
    android:textColor="#fff"
    android:textSize="48sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.818"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.499" />

<TextView
    android:id="@+id/textViewOccupied"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnShowReservations"
    android:layout_alignBottom="@+id/btnShowReservations"
    android:layout_alignStart="@+id/textViewRoomStatus"
    android:fontFamily="sans-serif"
    android:text="@string/reserveText"
    android:textAlignment="center"
    android:textColor="#fff"
    android:textSize="24sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.75"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.852" />

   </android.support.constraint.ConstraintLayout>

Can you try adding all buttons in one vertical linearlayout. — Apurva Kolapkar, Dec 13 '17 at 11:08
@ApurvaKolapkar Thank you very much, this has fixed the problem!. I have one final question tho: how can I mark your comment as an answer? — Bram, Dec 13 '17 at 12:51
Comment cannot be marked as Answer I will write it in Answer accept it so that it will be helpful for others too :) — Apurva Kolapkar, Dec 13 '17 at 13:13

score 1 · Accepted Answer · answered Dec 13 '17 at 13:14

1

These are not aligned properly. You can try adding all buttons in LinearLayout with vertical orientation.

answered Dec 13 '17 at 13:14

Apurva Kolapkar

1,270
2
16
32

score 0 · Answer 2 · answered Dec 13 '17 at 10:17

Please provide your XML layout code, so we can help you.

If you are using ConstraintLayout then check your constraints in XML text editor

your first button should contain (if you want it centered)

android:layout_marginTop="171dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"

the bottom fields should contain

app:layout_constraintLeft_toLeftOf="@+id/yourFirstElement" app:layout_constraintTop_toBottomOf="@+id/yourFirstElement"

Thanks for your reaction, unfortunately it didn't work, nothing has changed. I am indeed using ConstraintLayout — Bram, Dec 13 '17 at 10:28

score 0 · Answer 3 · answered Dec 13 '17 at 16:07

You may not have the same number of dp in your emulator and in your device so you should not fix the constraints with parent start and parent top but from a button to another button. It is the purpose of the constraint layout.

For example your second and third button should be fixed from the first like it:

<Button
    android:id="@+id/btnReserve"
    android:layout_width="0dp"
    android:layout_height="125dp"
    android:margin_top="16dp"
    android:background="#ff4081"
    android:fontFamily="sans-serif"
    android:text="@string/reserve"
    android:textAllCaps="false"
    android:textColor="#fff"
    android:textSize="36sp"
    app:layout_constraintTop_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/btnCheckIn"
    app:layout_constraintStart_toStartOf="@+id/btnCheckIn" />

<Button
    android:id="@+id/btnShowReservations"
    android:layout_width="0dp"
    android:layout_height="125dp"
    android:layout_row="2"
    android:marginTop="16dp"
    android:background="#ffffff"
    android:fontFamily="sans-serif"
    android:text="@string/showReservations"
    android:textAllCaps="false"
    android:textColor="#000"
    android:textSize="36sp"
    app:layout_constraintTop_toBottomOf="@+id/btnReserve"
    app:layout_constraintEnd_toEndOf="@+id/btnCheckIn"
    app:layout_constraintStart_toStartOf="@+id/btnCheckIn" />

Android Studio emulator sizes aren't correct with the real thing

3 Answers3