combine both background image, background drawable style on a button
android, android-layout, layout
Solution
Im wondering if its possible to combine both having an image on a button and using a drawable source and having text above that?
Yes, it's possible. Your selector will become:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="@drawable/red_btn_normal"></item>
</selector>
where the two drawables are two `layer-list` drawables with the first item being the items from your initial selector and the second being the `.png` image wrapped as a bitmap drawbale. For example for `red_btn_pressed.xml` you'll have:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="@drawable/arrow" />
</item>
</layer-list>
and the `red_btn_normal.xml` will be:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#992f2f"
android:startColor="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap android:src="@drawable/allowed" android:gravity="right"/>
</item>
</layer-list>
Keep in mind that the arrow image will be on the right of the text only if the size of the `Button` allows it(as its part of the `Button`'s background). If you're trying to impose some sort of positioning relation between the text of the `Button` and that arrow image then you'll need to extend the `Button` class and do it yourself.
Problem
Im wondering if its possible to combine both having an image on a button and using a drawable source and having text above that? I'm currently using this as my button style in drawable/red_btn.xml ``` <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> ``` And then my button ``` <Button android:id="@+id/testButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Income" android:textSize="15dip" android:background="@drawable/red_btn" android:textColor="#fff" android:textStyle="bold" /> ``` Which looks like this Now I would like to add another .png image (arrow.png) above this button to the right like this Is this possible, and if, how can I do it? Thanks in advance. __________________________________________________________________________________________________________________________________________ Edit After following Luksprog's advice below I now have "red_btn_normal.xml" in drawable ``` <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> ``` and red_btn_pressed.xml ``` <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true"> <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <bitmap android:gravity="right" android:src="@drawable/arrow" /> </item> </layer-list> ``` And then i create my button like this "red_btn.xml" ``` <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/red_btn_normal"></item> </selector> ``` And finally my button ``` <Button android:id="@+id/testButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Income" android:textSize="15dip" android:background="@drawable/red_btn" android:textColor="#fff" android:textStyle="bold" /> ``` Problem is that it only shows the white arrows when I click the button and it dosn't show it when its not pressed. What is wrong with the code? =)