Android selector with background image and gradient

Question

I know there are similar post to this but I couldn\'t find my answer in any of them. So, I have this drawable XML:

Answer 1

Your code for the selector is wrong because:

• You have two elements for the same state and as the selector encounters the first state(state_enabled) for the Bitmap element it will stop there and your gradient will never appear(for this you should use a layer-list that has as items the Bitmap and the gradient on top)

• The selector will match states in order. As you press the Button the state_pressed will never be activated because the selector will match first the state_enabled that is on the first element(for this you should move the code for the state_pressed above the state_enabled elements).

In fact you should just remove the state_enabled and let the Bitmap + gradient be the default value for the Button. Bellow is your selector(I assumed you only want to change gradient on the image(but the image should appear even in the pressed state, if this isn't the wanted behavior leave only the gradient for the state_pressed)):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <bitmap android:gravity="center" android:src="@drawable/bm_btn_background" android:tileMode="repeat" />
            </item>
            <item>
                <shape>
                     <gradient android:angle="270" android:endColor="#a0e0b071" android:startColor="#a0a67637" />
                     <stroke android:width="1dp" android:color="#5c3708" />
                     <corners android:radius="5dp" />
                     <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_enabled="true">
        <layer-list>
            <item>
                <bitmap android:gravity="center" android:src="@drawable/bm_btn_background" android:tileMode="repeat" />
            </item>
            <item>
                <shape android:shape="rectangle">
                    <gradient android:angle="270" android:endColor="#a0a67637" android:startColor="#a0e0b071" />
                    <stroke android:width="1dp" android:color="#5c3708" />
                    <corners android:radius="5dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>


</selector>

Answer 2

in my case i am using this. try it

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/mediumGray" />

        <stroke
            android:width="1px"
            android:color="@color/darkGray" />

        <padding
            android:bottom="2dp"
            android:left="1dp"
            android:right="1dp"
            android:top="2dp" />

        <corners
            android:bottomLeftRadius="7sp"
            android:bottomRightRadius="7sp"
            android:topLeftRadius="7sp"
            android:topRightRadius="7sp" />
    </shape>
</item>
<item android:state_focused="true">
    <shape>
        <solid android:color="@color/mediumGray" />

        <stroke
            android:width="1px"
            android:color="@color/darkGray" />

        <padding
            android:bottom="2dp"
            android:left="1dp"
            android:right="1dp"
            android:top="2dp" />

        <corners
            android:bottomLeftRadius="7sp"
            android:bottomRightRadius="7sp"
            android:topLeftRadius="7sp"
            android:topRightRadius="7sp" />
    </shape>
</item>
<item>
    <shape>
        <solid android:color="@color/lightGray" />

        <stroke
            android:width="1px"
            android:color="@color/blackTransparent" />

        <padding
            android:bottom="2dp"
            android:left="1dp"
            android:right="1dp"
            android:top="2dp" />

        <corners
            android:bottomLeftRadius="7sp"
            android:bottomRightRadius="7sp"
            android:topLeftRadius="7sp"
            android:topRightRadius="7sp" />
    </shape>
</item>

Answer 3

I have added extra transperent space to the right side of image using photoshop canvas size option and it works fine for me. download below image to see demo.

Answer 4

Take a look on your state attrubute

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    <item android:drawable="@drawable/nicebuttonround" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/nicebuttonround" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

    <!-- Focused states -->
    <item android:drawable="@drawable/nicebuttonroundi" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/nicebuttonroundi" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

    <!-- Pressed -->
    <item android:drawable="@drawable/nicebuttonroundi" android:state_pressed="true" android:state_selected="true"/>
    <item android:drawable="@drawable/nice22i" android:state_pressed="true"/>

</selector>

For repeating background as image you just have to create 9 pitch images.