带有背景图像和渐变的 Android 选择器

Android selector with background image and gradient

提问by ali

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:

我知道有类似的帖子，但我无法在其中任何一个中找到我的答案。所以，我有这个可绘制的 XML：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
    <bitmap
        android:src="@drawable/bm_btn_background"
        android:tileMode="repeat"
        android:gravity="center" />
</item>
<item android:state_enabled="true">
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#a0e0b071"
            android:endColor="#a0a67637"
            android:angle="270" />
        <stroke
            android:width="1dp"
            android:color="#5c3708" />
        <corners
            android:radius="5dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
<item android:state_pressed="true" >
    <shape>
        <gradient
            android:startColor="#a0a67637"
            android:endColor="#a0e0b071"
            android:angle="270" />
        <stroke
            android:width="1dp"
            android:color="#5c3708" />
        <corners
            android:radius="5dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

I am trying to create a button with a repeated image as background and a gradient applied to it. With this code I only see the background image, not the gradient nor the border and the rounded corners. Also, when I click the button, it doesn't change (the gradient is supposed to change). I don't know what is wrong with this code? If instead of a selector I use a layer-list, I get the desired result but it doesn't change either when I press the button. Thanks for your help!

我正在尝试创建一个带有重复图像作为背景并对其应用渐变的按钮。使用此代码，我只能看到背景图像，而不是渐变、边框和圆角。此外，当我单击按钮时，它不会改变（渐变应该会改变）。不知道这段代码有什么问题？如果我使用图层列表而不是选择器，我会得到所需的结果，但是当我按下按钮时它也不会改变。谢谢你的帮助！

回答by Luksprog

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 Bitmapelement it will stop there and your gradient will never appear(for this you should use a layer-listthat has as items the Bitmapand the gradient on top)

• The selector will match states in order. As you press the Buttonthe state_pressedwill never be activated because the selector will match first the state_enabledthat is on the first element(for this you should move the code for the state_pressedabove the state_enabled elements).

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

• 选择器将按顺序匹配状态。的同时，按下Button该state_pressed将永远不会被激活，因为选择器将匹配的第一state_enabled是第一元件（为此，你应该移动的代码用于对state_pressed上述state_enabled元件）。

In fact you should just remove the state_enabledand let the Bitmap+ gradientbe 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)):

事实上，您应该删除state_enabled并让Bitmap+gradient成为Button. 波纹管是您的选择器（我假设您只想更改图像上的渐变（但即使在按下状态下，图像也应该出现，如果这不是想要的行为，则只留下渐变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>

回答by Zaz Gmy

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>

回答by fish40

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.

要将背景作为图像重复，您只需创建 9 个音高图像。

回答by Amol Suryawanshi

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.

我使用 photoshop 画布大小选项在图像右侧添加了额外的透明空间，它对我来说很好用。下载下图查看演示。