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?

what is the gradient xml and how did you use it? are set it as background of those views? — Elias Fazel, Mar 07 '20 at 16:42
it is correct on device based on your code. the different between device and layout-editor can be due to refreshing issue with android studio. maybe if you restart the android studio it helps. but before that check layout-editor theme and api to be the same as device. — Elias Fazel, Mar 07 '20 at 18:09
I tried everything -- restarting AS, changing the API level to match my phone's OS, adding an `android:angle="0"` in the gradient drawable, but nothing worked. — Puspam, Mar 07 '20 at 20:19

score -1 · Accepted Answer · answered Mar 08 '20 at 05:26

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.

Android GradientDrawable Looks Different on Layout Editor Preview

1 Answers1