Components alignment in android studio's layout preview does not match with what the device shows

Question

Preview of Android Studio's Layout

Preview of Device's Layout

As you can see in the pictures above, the alignment of the components is properly arranged but when it is run it appears that the bottom components (TextView and a Switch) are cut. Is there something I must do so that my components' alignment in the android studio's layout shows exactly what I will see when I use the application on my device?

My device is Samsung SM-G610Y. Resolution: 1080 by 1920; Diagonal: 5.5 inches; Android 6.1 (Marshmallow). These are also the specifications I "plugged-in" when creating the Android Virtual Device.

This is the XML file of the layout.

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


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible">

            <Button
                android:id="@+id/editAlarm1"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginEnd="12dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="120dp"
                android:background="@android:drawable/ic_menu_edit"
                android:onClick="setTime1"
                android:textSize="0sp"
                android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/editAlarm2"
                app:layout_constraintEnd_toStartOf="@+id/alarmText1"
                tools:visibility="visible" />

            <Button
                android:id="@+id/editAlarm2"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginEnd="12dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="120dp"
                android:background="@android:drawable/ic_menu_edit"
                android:onClick="setTime2"
                android:textSize="0sp"
                android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/editAlarm3"
                app:layout_constraintEnd_toStartOf="@+id/alarmText2"
                tools:visibility="visible" />

            <Button
                android:id="@+id/editAlarm3"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginEnd="12dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="120dp"
                android:background="@android:drawable/ic_menu_edit"
                android:onClick="setTime3"
                android:textSize="0sp"
                android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/editAlarm4"
                app:layout_constraintEnd_toStartOf="@+id/alarmText3"
                tools:visibility="visible" />

            <Button
                android:id="@+id/editAlarm4"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginEnd="12dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="65dp"
                android:background="@android:drawable/ic_menu_edit"
                android:onClick="setTime4"
                android:textSize="0sp"
                android:visibility="invisible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/alarmText4"
                tools:visibility="visible" />

            <Switch
                android:id="@+id/alarmSwitch1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:height="40sp"
                android:gravity="center_horizontal|center_vertical"
                android:hapticFeedbackEnabled="false"
                android:scrollbarSize="4dp"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="@+id/alarmText1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.75"
                app:layout_constraintStart_toEndOf="@+id/alarmText1"
                app:layout_constraintTop_toTopOf="@+id/alarmText1"
                tools:visibility="visible" />

            <Switch
                android:id="@+id/alarmSwitch2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="@+id/alarmText2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.75"
                app:layout_constraintStart_toEndOf="@+id/alarmText2"
                app:layout_constraintTop_toTopOf="@+id/alarmText2" />

            <Switch
                android:id="@+id/alarmSwitch3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:height="40sp"
                android:gravity="center_horizontal|center_vertical"
                android:hapticFeedbackEnabled="false"
                android:scrollbarSize="4dp"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="@+id/alarmText3"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.75"
                app:layout_constraintStart_toEndOf="@+id/alarmText3"
                app:layout_constraintTop_toTopOf="@+id/alarmText3" />

            <Switch
                android:id="@+id/alarmSwitch4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:height="40sp"
                android:gravity="center_horizontal|center_vertical"
                android:hapticFeedbackEnabled="false"
                android:scrollbarSize="4dp"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="@+id/alarmText4"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.75"
                app:layout_constraintStart_toEndOf="@+id/alarmText4"
                app:layout_constraintTop_toTopOf="@+id/alarmText4" />

            <TextView
                android:id="@+id/alarmText1"
                android:layout_width="159dp"
                android:layout_height="49dp"
                android:layout_marginStart="48dp"
                android:layout_marginLeft="48dp"
                android:layout_marginTop="125dp"
                android:layout_marginBottom="90dp"
                android:text="@string/default_alarm_time"
                android:textSize="35sp"
                app:layout_constraintBottom_toTopOf="@+id/alarmText2"
                app:layout_constraintStart_toEndOf="@+id/alarmText4"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/alarmText2"
                android:layout_width="159dp"
                android:layout_height="49dp"
                android:layout_marginStart="48dp"
                android:layout_marginLeft="48dp"
                android:layout_marginBottom="90dp"
                android:text="@string/default_alarm_time"
                android:textSize="35sp"
                app:layout_constraintBottom_toTopOf="@+id/alarmText3"
                app:layout_constraintStart_toStartOf="parent" />

            <TextView
                android:id="@+id/alarmText3"
                android:layout_width="159dp"
                android:layout_height="49dp"
                android:layout_marginStart="48dp"
                android:layout_marginLeft="48dp"
                android:layout_marginBottom="90dp"
                android:text="@string/default_alarm_time"
                android:textSize="35sp"
                app:layout_constraintBottom_toTopOf="@+id/alarmText4"
                app:layout_constraintStart_toEndOf="@+id/alarmText2"
                app:layout_constraintStart_toStartOf="parent" />

            <TextView
                android:id="@+id/alarmText4"
                android:layout_width="159dp"
                android:layout_height="49dp"
                android:layout_marginStart="48dp"
                android:layout_marginLeft="48dp"
                android:layout_marginBottom="50dp"
                android:text="@string/default_alarm_time"
                android:textSize="35sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/alarmText3"
                app:layout_constraintStart_toStartOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>

    <Button
        android:id="@+id/editButton"
        android:layout_width="56dp"
        android:layout_height="35dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:text="EDIT"
        android:textAllCaps="false"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnGo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go to Quiz Activity"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

DeadStar · Accepted Answer · 2020-02-16T09:12:39.990

0

The reason for that is screen density. Even if you have 2 devices with the same screen resolution of 1080x1920px, and same screen size of 5.5" they will still show the layout differently if the screen density is different.

To understand better the difference between screen size, resolution and density, you can read this answer https://stackoverflow.com/a/22397095/3046181

Edit: Following your comment, if you want to show the full screen and no action bar you need to do the following steps:

Add to your styles.xml the NoActionBar parent:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>

Then make sure that your application tag in manifest sets this style:

<application android:theme="@style/AppTheme"></application>

Then also add to your code in onCreate of the activity before you inflate the layout of your activity:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

edited Feb 16 '20 at 09:12

answered Feb 15 '20 at 18:48

DeadStar

99
1
7

I found out that the screen density of my device is approximately 401 ppi and the screen density of the AVD that I've created, based from the link that you referred, is xxhdpi (480 ppi). What should I do now? – Midosuki Feb 15 '20 at 19:33
What are you trying to achieve? Remember that there are thousands of Android divices with different screen sizes, resolutions and densities, you will never be able to achieve the same layout view as on 1 device you are testing, due to different view components which have scaling limitations in order to work. I am also confused why are you using the ScrollView if you seem to want to avoid scrolling? – DeadStar Feb 15 '20 at 21:03
I just want to view exactly what I create in the android studio to be emulated properly in the specific device that I'm using, the problem is that somehow the layout is pushed-down by the "Quiz Alarm" header. Where in the settings of android studio can I make the layout show the header, because I can only see the actual layout of the app, not the notification bar and the header? btw, I'm using ScrollView because if somehow the layout is cut (Just like the 2nd picture) the users can use the scrollview. – Midosuki Feb 16 '20 at 02:38
So you want a full screen. See my edit in the answer above. Please vote if this is the right answer – DeadStar Feb 16 '20 at 09:13

score 0 · Answer 2 · answered Feb 15 '20 at 19:42

You are using too many fixed sizes on your view:

Different phones got different screen sizes, in your layout, you are using fixed size on your views (fixed size android:layout_width="56dp" for example) and the result is that what may look good on one screen (your preview screen) will not look good on another screen (your actual phone).

If you want to make your layout responsive you can use:

  app:layout_constraintHeight_percent="0.y"
  app:layout_constraintWidth_percent="0.x"

Together with Guidelines to make your layout responsive, for example you can use this for your rows:

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="40dp"
    tools:layout_editor_absoluteY="-16dp">


    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="@+id/button3"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button3" />

</androidx.constraintlayout.widget.ConstraintLayout>

And from here just Implement this on your layout in any way that you want to.

Components alignment in android studio's layout preview does not match with what the device shows

2 Answers2