layout is different on the emulator than android studio preview

So, I am running my app on a nexus 5(1080x1920, dpi:480) and nexus 6P(1440x2560, dpi:560) emulator. I used the formula provided by this link to calculate the smallest width (sw).

Nexus 5: 1080/(480/160) = 360. Nexus 6P: 1440/(560/160) = 411.

Problem 1: I created a standard sw320 layout for both of these phones. One of the image on nexus 5 dramatic decrease its size than the preview and 6P, all other images seems fine.

preview shown here, nexus 6P shown here, nexus 5 shown here.

Also, I notice that when I move around the signal bar image in the android studio preview, the image changes size.

Problem 2: I created different sw layouts shown here. However, the default layout preview is all messed up now, shown here. Before, I added all the sw layouts, it look like this.

Question 1: What's the reason for the dramatic difference in the image between two phones?

Question 2: In android studio preview, What's the reason for the image to change size as I drag it around?

Question 3: What's the reason for the default layout to be messed up even though I did not change any code in that file?

Update with xml code:

<RelativeLayout 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:background="@drawable/joystick_background"
tools:context="com.example.android.toybot.JoyStickActivity">

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"

    android:layout_weight="0.5"

    android:layout_marginTop="70dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="11dp"
        android:layout_below="@+id/exit_switch_id"

        android:scaleX="0.5"
        android:scaleY="0.5"
        android:layout_marginTop="1dp"
        android:layout_marginLeft="30dp"
        android:src="@drawable/text_exit"/>


    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:src="@drawable/text_turbo"
        android:layout_alignTop="@+id/imageView4"
        android:layout_toEndOf="@+id/exit_switch_id"
        android:layout_alignBottom="@+id/imageView4" />

    <Switch
        android:id="@+id/exit_switch_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotation="90"
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:thumb="@drawable/joystick_hat"
        android:track="@drawable/joystick_lever_switch"
        android:layout_alignBaseline="@+id/turbo_switch_id"
        android:layout_alignBottom="@+id/turbo_switch_id"
        android:layout_alignParentStart="true"
        android:layout_marginStart="14dp" />

    <Switch
        android:id="@+id/turbo_switch_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="14dp"
        android:rotation="90"
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:thumb="@drawable/joystick_hat"
        android:track="@drawable/joystick_lever_switch"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/exit_switch_id" />

</RelativeLayout>

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true">

    <com.example.android.toybot.JoyStickView
        android:id="@+id/joystickLeft"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_alignParentStart="true"
        android:layout_weight="0.5" />


    <com.example.android.toybot.JoyStickView
        android:id="@+id/joystickRight"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_weight="0.5" />

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:orientation="horizontal"
    android:layout_above="@+id/linearLayout4"
    android:layout_alignParentStart="true">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="RM:" />

    <TextView
        android:id="@+id/x_coo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="x_coo" />

</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/linearLayout5"
    android:layout_above="@+id/linearLayout3"
    android:layout_alignParentStart="true">

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/dir_view"
        android:layout_alignBottom="@+id/dir_view"
        android:layout_marginEnd="15dp"
        android:layout_toStartOf="@+id/dir_view"
        android:layout_weight="0.04"
        android:text="Direction:" />

    <TextView
        android:id="@+id/dir_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/linearLayout3"
        android:layout_marginStart="15dp"
        android:layout_toEndOf="@+id/linearLayout2"
        android:layout_weight="0.01"
        android:text="TextView" />
</LinearLayout>

<LinearLayout
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/linearLayout4"
    android:layout_above="@+id/linearLayout"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="17dp">

    <TextView
        android:id="@+id/ly_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="LM:" />

    <TextView
        android:id="@+id/ly_id_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="left_y_coo" />

</LinearLayout>

<TextView
    android:id="@+id/RSSI_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/linearLayout5"
    android:layout_alignEnd="@+id/linearLayout3"
    android:layout_marginBottom="14dp"
    android:text="rssi value" />

<FrameLayout
    android:id="@+id/singal_bar_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="17dp"
    android:layout_above="@+id/RSSI_id"
    android:layout_alignParentEnd="true">


    <ImageView
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:id="@+id/signal_bar_0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:src="@drawable/signal_bars0_01" />

    <ImageView
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:id="@+id/signal_bar_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/signal_bars1_01"
        android:visibility="invisible" />

    <ImageView
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:id="@+id/signal_bar_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/signal_bars2_01"
        android:visibility="invisible" />

    <ImageView
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:id="@+id/signal_bar_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/signal_bars3_01"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/signal_bar_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:src="@drawable/signal_bars4_01"
        android:visibility="invisible" />

</FrameLayout>

Solution

To solve my problem 1, instead of creating drawable files, I created mipmap files instead, this way, the image just stays in one size and this worked out for me.

Problem 2, the reason the previous was messed up, it's because the device in editor was in the apple watch view instead of an actually phone view, which is just a square.