不同颜色的标准Android按钮

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

到目前为止，我发现最好的方法是将Button的可绘制对象更改为位于res/drawable/red_button.xml中的可绘制对象：

<?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>

但要做到这一点，我实际上需要为我想自定义的每个按钮创建三个不同的绘图（一个用于静态按钮，一个用于聚焦时，一个用于按下时）。这似乎比我需要的更复杂和非DRY。

我真正想做的就是对按钮应用某种颜色转换。有没有比我现在更简单的方法来改变按钮的颜色？

494099 次浏览
小开
最佳答案

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

<?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>
小开

您可能对滤色镜感兴趣。

举个例子：

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

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

小开

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

如果你从一个标准的灰色阴影按钮开始：

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

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

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

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

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

小开

DroidUX组件库有一个ColorButton小部件，它的颜色可以通过xml定义和在运行时以编程方式轻松更改，因此如果您的应用程序允许，您甚至可以让用户设置按钮的颜色/主题。

小开

如果您使用XML制作彩色按钮，您可以通过在单独的文件中指定聚焦和按下状态并重用它们来使代码更清晰。我的绿色按钮如下所示：

<?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>
小开

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

首先，没有提到在哪里来应用和清除滤色镜。可能还有其他好的地方可以做到这一点，但我想到的是OnTouchListener。

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

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();
}
});

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

小开

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

它可以让您轻松更改所有全息绘图（按钮、旋转器…）的颜色。您选择颜色，然后下载一个包含所有分辨率绘图的zip文件。

小开

在<Button>中使用android:background="#33b5e5"。或更好的android:background="@color/navig_button"

小开

您还可以使用此在线工具自定义按钮http://angrytools.com/android/button/并使用android:background="@drawable/custom_btn"在布局中定义自定义按钮。

小开

一种简单的方法是定义一个自定义Button类，它接受您想要的所有属性，如半径、渐变、按下的颜色、正常颜色等，然后在XML布局中使用它，而不是使用XML设置背景。一个示例是这里

如果您有很多具有相同属性（如半径、所选颜色等）的按钮，这将非常有用。您可以自定义继承的按钮来处理这些附加属性。

结果（未使用背景选择器）。

正常按钮

普通图像

按下按钮

输入图片描述

小开

以这种方式使用它：

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

我正在使用这种方法

<强>style.xml 

<!-- 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好得多，因为我不会失去谷歌提供的连锁反应。

小开

您现在还可以将appcompat-v7的应用匹配按钮与backgroundTint属性一起使用：

<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"/>
小开

这是我的解决方案，从从api15开始完美工作。此解决方案保留所有默认按钮点击效果，例如材质RippleEffect。我还没有在较低的API上测试它，但它应该可以工作。

所有你需要做的是：

1）创建一个仅更改colorAccent的样式：

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

我建议使用ThemeOverlay.AppCompat或您的主AppTheme作为父级，以保留其余的样式。

2）将这两行添加到您的button小部件：

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

有时您的新colorAccent不会显示在Android Studio预览版中，但当您在手机上启动应用程序时，颜色会发生变化。

示例按钮小部件

<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" />

自定义颜色的示例按钮

小开

我做一个效果很好的不同样式按钮的方法是子类化Button对象并应用颜色过滤器。这也通过对按钮应用alpha来处理启用和禁用状态。

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.Button;


public class DimmableButton extends Button {


public DimmableButton(Context context) {
super(context);
}


public DimmableButton(Context context, AttributeSet attrs) {
super(context, attrs);
}


public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}


@SuppressWarnings("deprecation")
@Override
public void setBackgroundDrawable(Drawable d) {
// Replace the original background drawable (e.g. image) with a LayerDrawable that
// contains the original drawable.
DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
super.setBackgroundDrawable(layer);
}


@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
@Override
public void setBackground(Drawable d) {
// Replace the original background drawable (e.g. image) with a LayerDrawable that
// contains the original drawable.
DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
super.setBackground(layer);
}


/**
* The stateful LayerDrawable used by this button.
*/
protected class DimmableButtonBackgroundDrawable extends LayerDrawable {


// The color filter to apply when the button is pressed
protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
// Alpha value when the button is disabled
protected int _disabledAlpha = 100;
// Alpha value when the button is enabled
protected int _fullAlpha = 255;


public DimmableButtonBackgroundDrawable(Drawable d) {
super(new Drawable[] { d });
}


@Override
protected boolean onStateChange(int[] states) {
boolean enabled = false;
boolean pressed = false;


for (int state : states) {
if (state == android.R.attr.state_enabled)
enabled = true;
else if (state == android.R.attr.state_pressed)
pressed = true;
}


mutate();
if (enabled && pressed) {
setColorFilter(_pressedFilter);
} else if (!enabled) {
setColorFilter(null);
setAlpha(_disabledAlpha);
} else {
setColorFilter(null);
setAlpha(_fullAlpha);
}


invalidateSelf();


return super.onStateChange(states);
}


@Override
public boolean isStateful() {
return true;
}
}


}
小开

您可以将按钮的主题设置为此

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">@color/HEXColor</item>
<item name="android:textColor">@color/HEXColor</item>
</style>
小开

值\styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>


<style name="RedAccentButton" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#ff0000</item>
</style>

然后：

<Button
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text" />


<Button
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="text" />


<Button
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text"
android:theme="@style/RedAccentButton" />


<Button
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="text"
android:theme="@style/RedAccentButton" />

结果

小开

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

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

备注/要求：

  • 使用app:命名空间和没有android:命名空间！

  • 应用程序版本>24.2.0

    依赖关系 编译com.android.support： appcompat-v7:25.3.1

补充说明： 输入图片描述

小开

根据材料设计指南，您需要使用类似的样式 下面的代码

<style name="MyButton" parent="Theme.AppCompat.Light>
<item name="colorControlHighlight">#F36F21</item>
<item name="colorControlHighlight">#FF8D00</item>
</style>

并在布局中将此属性添加到您的按钮

    android:theme="@style/MyButton"
小开

很简单…在您的项目中添加此依赖项并创建一个按钮 1.任何形状 2.任何颜色 3.任何边界 4.有物质效果

https://github.com/manojbhadane/QButton

<com.manojbhadane.QButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="OK"
app:qb_backgroundColor="@color/green"
app:qb_radius="100"
app:qb_strokeColor="@color/darkGreen"
app:qb_strokeWidth="5" />

提交答案