具有不同颜色的标准 Android 按钮
-
19-09-2019 - |
题
我想稍微更改标准 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>
但这样做需要我实际上为每个要自定义的按钮创建三个不同的可绘制对象(一个用于静止状态的按钮,一个用于聚焦时的按钮,一个用于按下时的按钮)。这似乎比我需要的更复杂和不干。
我真正想做的就是对按钮应用某种颜色变换。有没有比我更简单的方法来更改按钮的颜色?
解决方案
我发现,这都可以在一个文件中完成相当容易。把下面的下面的代码在一个文件名为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>
其他提示
从托马斯的回答继,你也可以以编程方式设置使用PorterDuff乘法模式整个按钮的阴影。这将改变按钮的颜色,而不仅仅是色调。
如果你以一个标准灰色阴影按钮:
button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);
会给你一个红色阴影按钮,
button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);
会给你一个绿色阴影按钮等等,其中第一个值是十六进制格式的颜色。
其工作原理是通过你的颜色值,当前按钮颜色值乘以。我敢肯定,还有一个很多你可以用这些模式做。
迈克,你可能会感兴趣的彩色滤光片。
的示例:
button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));
试试这个达到你想要的颜色。
这是我的解决方案,它完美地工作开始的从API 15 即可。该解决方案使所有默认按钮点击的影响,如物料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" />
您现在还可以使用程序兼容性-V7的 AppCompatButton 与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"/>
我喜欢从@conjugatedirection和@Tomasz以前的答案滤色片建议;但是,我发现我预期到目前为止提供的代码被不容易使用。
首先,它没有提到的其中以应用并清除滤色器。这可能是因为有其他好的地方要做到这一点,但什么来铭记对我来说是一个 OnTouchListener 。
这是我的原题的阅读,理想的解决方案将是一个不涉及任何图像。使用custom_button.xml从@emmby接受的答案可能是一个比彩色滤光片更适合,如果这是你的目标。就我而言,我开始从什么样的按钮应该看起来像一个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();
}
});
我萃取此作为用于施加到多个按钮一个单独的类 - 显示为匿名内部类只是为了获得想法
如果您使用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>
我使用这种方法
<强> 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
因为我不会失去的连锁反应谷歌提供了一个更好的方法。
现在有一个更简单的方法: android-holo-colors.com
这会让你(按钮,旋转器,...),很容易改变的所有全息可绘制的颜色。您选择的颜色,然后下载包含可绘制所有分辨率下的zip文件。
使用它以这种方式:
buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);
在<Button>
使用android:background="#33b5e5"
。或更好android:background="@color/navig_button"
这 DroidUX 组件库有一个 ColorButton
其颜色可以通过 xml 定义和在运行时以编程方式轻松更改的小部件,因此如果您的应用程序允许,您甚至可以让用户设置按钮的颜色/主题。
您也可以使用这个在线工具来定制你的按钮 http://angrytools.com/android/button/ 和使用android:background="@drawable/custom_btn"
到在布局定义定制按钮。
您可以将您的按钮的主题,这
<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">@color/HEXColor</item>
<item name="android:textColor">@color/HEXColor</item>
</style>
一个简单的方法是只定义它接受所有你渴望像半径,坡度,按颜色,颜色正常等,然后只用在你的XML布局,而不是使用设置背景性质的自定义按钮XML。样品是这里
如果你有很多与像半径相同的属性按钮,选择颜色等,这是非常有用的您可以自定义继承按钮来处理这些额外的属性。
结果(没有使用背景选择器)。
<强>普通按钮强>
<强>按下的按钮强>
我做了不同风格的按钮,效果很好的方式是继承Button对象和应用的彩色滤光片。通过施加的α位键此还处理启用状态和禁用状态。
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;
}
}
}
值\ 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" />
每材料设计指南,你需要使用喜欢的风格 下面的代码
<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" />