Android GradientDrawable Looks Different on Layout Editor Preview

Question

Why are the gradients looking different in Android Studio preview and in an actual Android device? Here are the screenshots:

In Android Studio

In my Android phone

This is the drawable/btn_background.xml file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#eee"
                android:endColor="#aaa"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#aaa"
                android:endColor="#eee"/>
        </shape>
    </item>
</selector>

This is the XML code for the two buttons:

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="display"
            android:text="@string/btn_txt"
            android:textAllCaps="false"
            android:background="@drawable/btn_background"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@drawable/btn_background"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_fullscreen_black" />

Is it a bug or something?

Answer 1

I have got a solution to my problem. I have just added the android:angle property in the gradient drawable:

<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#eee"
            android:endColor="#aaa"
            android:angle="0"/>
    </shape>
</item>

Without the android:angle property, Android Studio and Android phones were not agreeing with each other. So, defining the angle solved the issue.