Why are the gradients looking different in Android Studio preview and in an actual Android device? Here are the screenshots:
In Android Studio
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?
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.