标准Android按钮具有不同的颜色


Standard Android Button with a different color

我想稍微更改标准Android按钮的颜色，以便更好地匹配客户的品牌。

到目前为止，我发现这样做的最好方法是将Button的drawable更改为位于res/drawable/red_button.xml中的drawable：

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/red_button_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/red_button_focus" />
    <item android:drawable="@drawable/red_button_rest" />
</selector>

但这样做需要我实际上为我想要自定义的每个按钮创建三个不同的drawable(一个用于静止按钮，一个用于聚焦，一个用于按下)。 这似乎比我需要的更复杂，更干燥。

我真正想做的就是对按钮应用某种颜色转换。 是否有更简单的方法来改变按钮的颜色而不是我正在做的事情？

相关讨论

我发现这一切都可以很容易地在一个文件中完成。将类似下面的代码放在名为custom_button.xml的文件中，然后在按钮视图中设置background="@drawable/custom_button"：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient
                android:endColor="@color/orange4"
                android:startColor="@color/orange5"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/blue2"
                android:startColor="@color/blue25"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>
相关讨论

继Tomasz的回答之后，您还可以使用PorterDuff乘法模式以编程方式设置整个按钮的阴影。这将改变按钮颜色而不仅仅是色调。

如果您使用标准灰色阴影按钮开头：

1
button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

会给你一个红色阴影按钮，

1
button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

会给你一个绿色阴影按钮等，其中第一个值是十六进制格式的颜色。

它的工作原理是将当前按钮颜色值乘以颜色值。我相信你可以用这些模式做更多的事情。

相关讨论

迈克，您可能对彩色滤光片感兴趣。

一个例子：

1
button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

试试这个来达到你想要的颜色。

相关讨论

这是我的解决方案，从API 15开始完美运行。此解决方案保留所有默认按钮单击效果，如材料RippleEffect。我没有在较低的API上测试它，但它应该工作。

你需要做的就是：

1)创建仅更改colorAccent的样式：

1
2
3
<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

I recommend using ThemeOverlay.AppCompat or your main AppTheme as parent, to keep the rest of your styles.

2)将这两行添加到button小部件：

1
2
style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"

Sometimes your new colorAccent isn't showing in Android Studio Preview, but when you launch your app on the phone, the color will be changed.

示例按钮小部件

1
2
3
4
5
6
7
8
9
<Button
    android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/sign_in_facebook"
    android:textColor="@android:color/white"
    android:theme="@style/Facebook.Button" />

Sample Button with custom color

相关讨论

您现在还可以使用appcompat-v7的AppCompatButton和backgroundTint属性：

1
2
3
4
5
<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/>
相关讨论

我喜欢@conjugatedirection和@Tomasz先前答案中的滤色器建议;但是，我发现到目前为止提供的代码并不像我预期的那样容易应用。

首先，没有提到应用和清除滤色器的位置。有可能还有其他好的地方可以做到这一点，但我想到的是一个OnTouchListener。

从我对原始问题的解读，理想的解决方案将是不涉及任何图像的解决方案。如果这是你的目标，那么使用@emmby中的custom_button.xml接受的答案可能比彩色滤镜更合适。在我的例子中，我从一个UI设计师的png图像开始，按钮应该是什么样子。如果我将按钮背景设置为此图像，则默认高光反馈将完全丢失。此代码使用程序化变暗效果替换该行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 0x6D6D6D sets how much to darken - tweak as desired
                setColorFilter(v, 0x6D6D6D);
                break;
            // remove the filter when moving off the button
            // the same way a selector implementation would
            case MotionEvent.ACTION_MOVE:
                Rect r = new Rect();
                v.getLocalVisibleRect(r);
                if (!r.contains((int) event.getX(), (int) event.getY())) {
                    setColorFilter(v, null);
                }
                break;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setColorFilter(v, null);
                break;
        }
        return false;
    }

    private void setColorFilter(View v, Integer filter) {
        if (filter == null) v.getBackground().clearColorFilter();
        else {
            // To lighten instead of darken, try this:
            // LightingColorFilter lighten = new LightingColorFilter(0xFFFFFF, filter);
            LightingColorFilter darken = new LightingColorFilter(filter, 0x000000);
            v.getBackground().setColorFilter(darken);
        }
        // required on Android 2.3.7 for filter change to take effect (but not on 4.0.4)
        v.getBackground().invalidateSelf();
    }
});

我把它作为一个单独的类提取出来应用于多个按钮 - 显示为匿名内部类只是为了得到这个想法。

相关讨论

如果您使用XML制作颜色按钮，则可以通过在单独的文件中指定聚焦和按下状态并重复使用来使代码更清晰。我的绿色按钮看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:drawable="@drawable/button_focused"/>
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient android:startColor="#ff00ff00" android:endColor="#bb00ff00" android:angle="270" />
            <stroke android:width="1dp" android:color="#bb00ff00" />
            <corners android:radius="3dp" />
            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>
相关讨论

适用于任何Android版本的最短解决方案：

1
2
<Button
     app:backgroundTint="@color/my_color"

备注/要求：

  • 使用app:命名空间而不是android:命名空间！

  • appcompat版本> 24.2.0

    依赖{
    编译'com.android.support:appcompat-v7:25.3.1'
    }

说明：
enter image description here

相关讨论

我正在使用这种方法

style.xml

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimaryDark">#413152</item>
    <item name="android:colorPrimary">#534364</item>
    <item name="android:colorAccent">#534364</item>
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">#534364</item>
    <item name="android:textColor">#ffffff</item>
</style>

从上面可以看出，我正在为我的按钮使用自定义样式。按钮颜色对应于强调颜色。我觉得这比设置android:background要好得多，因为我不会失去谷歌提供的涟漪效应。

以这种方式使用它：

1
buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);

现在有一种更简单的方法：android-holo-colors.com

它可以让你轻松改变所有holo drawables(纽扣，旋转器......)的颜色。您选择颜色，然后下载包含所有分辨率的drawable的zip文件。

在