为什么我的应用在设计模式和仿真器上看起来不同？

Question

I am programming an app and have custom design for my app, the problem is the ui looks perfect in design mode but in run-time mode (on emulator and real device) it looks different. Any clue why??? Thanks to everyone.

My accomplish it to make the ui in emulator look the same as in design mode.

Here's some code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical"
    android:background="@drawable/bg"
    android:weightSum="8">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".8">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".8">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_marginLeft="50sp"
        android:layout_marginRight="50sp"
        android:padding="4dp"
        android:layout_weight=".8">
    <Button
        android:text="Start"
        android:textColor="#0495d4"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnStart"
        android:layout_gravity="center" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_marginLeft="50sp"
        android:layout_marginRight="50sp"
        android:padding="4dp"
        android:layout_weight=".8">
    <Button
        android:text="Followings"
        android:textColor="#0495d4"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnFollowings"
        android:layout_gravity="center" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".8">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:layout_weight=".8"
        android:orientation="horizontal"
        android:weightSum="3">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight=".2"/>
        <LinearLayout
            android:layout_width="0dp"
            android:padding="2sp"
            android:layout_height="fill_parent"
            android:layout_weight="2.6">
    <EditText
        android:hint="Pin Code"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:textSize="16dp"
        android:textColor="@android:color/white"
        android:fontFamily="sans-serif-medium"
        android:textColorHint="@android:color/white"
        android:backgroundTint="@android:color/white"
        android:id="@+id/txtPinCode" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight=".2"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"


        android:layout_weight=".8"
        android:orientation="horizontal"
        android:weightSum="3">
        <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".8"/>
        <LinearLayout
            android:layout_width="0dp"
            android:padding="10sp"
            android:gravity="center"

            android:layout_height="fill_parent"
            android:layout_weight="1.4">
    <Button
        android:text="Verify Pin"
        android:textColor="#0495d4"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSavePin" 
        android:layout_gravity="center" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight=".8"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2.4">

    </LinearLayout>
</LinearLayout>

Answer 1

The reason why the designs look different is that the emulator's screen configuration is different to that which is used to render the design preview.

In the dropdown (see screenshot 1 ) of the layout editor try to find a configuration that matches your emulated device both in dimension and dpi. That way the preview will be more accurate.

To find out which screen configuration your emulator has just go to the device manager (screenshot 2 ) and refer to the resolution column.

Answer 2

On different devices (device emulators) and on different versions of android different values ​​of standard styles (textView, input field and so on). The designer shows everything verbatim, the device widgets are mixed with styles from the standard android library (a specific version)