Why is the look of the activity different in the Android Studio preview than on the device?

Question

I created an navigation drawer activity and found that its content page looks different in the preview.

This is the preview.

And this is the AVD appearance (it looks like a real device too).

XML code is:

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.xy.xy.HomePage">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="5sp">

    <ImageView
        android:id="@+id/TestMenuImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/bg1"
        tools:scaleType="centerCrop" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        tools:background="@color/hbm_text_background">

    <TextView
        android:id="@+id/TestMenuName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:contentDescription="@string/app_name"
        android:text="@string/test"
        android:textColor="@color/white" />

    </RelativeLayout>

    <Button
        android:id="@+id/TestMenuButton"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

What do you think where the problem is?

Answer 1

Try adding android:scaleType="fitXY" in ImageView like this:

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.xy.xy.HomePage">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="5sp">

    <ImageView
        android:id="@+id/TestMenuImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/bg1"
        android:scaleType="fitXY"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        tools:background="@color/hbm_text_background">

    <TextView
        android:id="@+id/TestMenuName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:contentDescription="@string/app_name"
        android:text="@string/test"
        android:textColor="@color/white" />

    </RelativeLayout>

    <Button
        android:id="@+id/TestMenuButton"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

That's probably a little bug with ImageViews´ previews in Android Studio,

Hope it helps