使用Material Design和AppCompat的Android中的着色按钮

Question

在AppCompat今天发布更新之前,我能够更改Android L中按钮的颜色,但不能更改旧版本.包含新的AppCompat更新后,我无法更改任何一个版本的颜色,当我尝试按钮时就消失了.有谁知道如何更改按钮颜色？

以下图片显示了我想要实现的目标:

白色按钮是默认的,红色按钮是我想要的.

这是我之前做的改变以下按钮颜色的方法styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

并动态地做:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

我也确实将主题父@android:style/Theme.Material.Light.DarkActionBar改为Theme.AppCompat.Light.DarkActionBar

Answer 1

正式修复了支持库rev.22(2015年3月13日星期五).查看相关的Google代码问题:

https://issuetracker.google.com/issues/37008632

用法示例

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

V21/theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

Answer 2

编辑(22.06.2016):

在我发布原始响应后,Appcompat库开始支持材质按钮.在这篇文章中,您可以看到凸起和平面按钮的最简单实现.

原答案:

由于该AppCompat不支持该按钮,您可以使用xml作为背景.为此,我查看了Android的源代码,找到了样式材料按钮的相关文件.

1 - 从源代码查看材质按钮的原始实现.

看看android源代码上的btn_default_material.xml.

您可以将文件复制到项目drawable-v21文件夹中.但是请不要触摸这里的颜色.您需要更改的文件是第二个文件.

可绘制-V21/custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2 - 获取原始材质按钮的形状

当你意识到这个drawable中有一个形状,你可以在源代码的这个文件中找到.

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3 - 获取材料按钮的尺寸

在此文件中,您可以在此处找到文件中使用的某些维度.您可以复制整个文件并将其放入您的values文件夹中.这对于将相同尺寸(在材质按钮中使用)应用于所有按钮非常重要

4 - 为旧版本创建另一个可绘制文件

对于旧版本,您应该使用另一个具有相同名称的drawable.我直接将项目内联而不是引用.您可能想要引用它们.但同样,最重要的是材料按钮的原始尺寸.

绘制/ custom_btn.xml

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

    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

结果

您的按钮会对Lollipop设备产生连锁反应.除了涟漪效应之外,旧版本将具有完全相同的按钮.但既然你为不同的状态提供了绘图,他们也会回应触摸事件(就像旧的方式).

Answer 3

This has been enhanced in v23.0.0 of AppCompat library with the addition of more themes including

Widget.AppCompat.Button.Colored

First of all include appCompat dependency if you haven't already

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

now since you need to use v23 of the app compat, you'll need to target SDK-v23 as well!

    compileSdkVersion = 23
    targetSdkVersion = 23

In your values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

In your values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

In your values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

Since your button theme is based on Widget.AppCompat.Button.Colored The text color on the button is by default white!

but it seems there is an issue when you disable the button, the button will change its color to light grey, but the text color will remain white!

a workaround for this is to specifically set the text color on the button to white! as I have done in the style shown above.

now you can simply define your button and let AppCompat do the rest :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Disabled State

Enabled State

Answer 4

在Android支持库22.1.0中,Google Button明白了这一点.因此,另一种自定义按钮背景颜色的方法是使用该backgroundTint属性.

例如,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

Answer 5

要支持彩色按钮,请使用最新的AppCompat库(> 23.2.1):

膨胀 - XML

AppCompat小部件:

android.support.v7.widget.AppCompatButton

AppCompat风格:

style="@style/Widget.AppCompat.Button.Colored"

NB!要在xml中设置自定义颜色:使用attr:app而不是android

(使用alt+enter或声明xmlns:app="http://schemas.android.com/apk/res-auto"使用app)

app:backgroundTint ="@ color/your_custom_color"

例:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

或以编程方式设置它 - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

Answer 6

使用最新的支持库,您可以继承自己的活动AppCompatActivity,因此它会Button为AppCompatButton您的内容充气,并让您有机会使用以下内容为布局上的每个按钮设置颜色样式android:theme="@style/SomeButtonStyle",其中SomeButtonStyle:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

在2.3.7,4.4.1,5.0.2中为我工作

Answer 7

如果你想要低于风格

添加此样式您的按钮

style="@style/Widget.AppCompat.Button.Borderless.Colored"

如果你想要这种风格

添加以下代码

style="@style/Widget.AppCompat.Button.Colored"

Answer 8

答案是主题而不是风格

问题是Button颜色贴在主题的colorButtonNormal上.我试图以很多不同的方式改变风格而没有运气.所以我改变了按钮主题.

使用colorButtonNormal和colorPrimary创建主题:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

按钮中使用此主题

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

"AppTheme.Button"可以是任何扩展Button样式的东西,就像这里我使用原色来表示文字颜色:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

并且您可以获得任何您想要的与材料设计兼容的颜色的按钮.