对按钮的物质作用有背景颜色的

Question

我使用的是Android v21支持库.

我创建了一个自定义背景颜色的按钮.当我使用背景颜色时,材质设计效果如波纹,显示消失(除了点击的高度).

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

以下是一个普通的按钮,效果很好.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

Answer 1

当您使用时android:background,您将使用空白颜色替换大部分样式和按钮的外观和感觉.

更新:从AppCompat的23.0.0版本开始,有一种新的样式,它使用您的主题用于禁用的颜色和启用的颜色.Widget.AppCompat.Button.ColoredcolorButtonNormalcolorAccent

这允许您直接通过它将其应用于您的按钮

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

如果你需要一个定制colorButtonNormal或者colorAccent,您可以使用ThemeOverlay中的说明这个专业提示和android:theme按钮.

上一个答案

您可以在v21目录中使用drawable作为背景,例如:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

这将确保您的背景颜色?attr/colorPrimary并使用默认的默认波纹动画?attr/colorControlHighlight(如果您愿意,也可以在主题中设置).

注意:您必须为小于v21创建自定义选择器:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
</selector>

假设你有一些颜色,你想要默认,按下和聚焦状态.就个人而言,我通过选择中途获取了一个波纹的截图,并将主要/聚焦状态拉出来.

Answer 2

另一个简单的解决方案是为"平面"按钮提供自定义背景,同时保持其"材质"效果.

1. 将按钮放在ViewGroup中,并在此处设置所需的背景
2. 将当前主题中的selectableItemBackground设置为按钮的背景(API> = 11)

即:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

可以用于Flat按钮,它适用于API> = 11,你将在> = 21设备上获得连锁效果,在21之前保持常规按钮,直到AppCompat更新以支持那里的波纹.

您也可以仅对> = 21个按钮使用selectableItemBackgroundBorderless.

Answer 3

这是一种简单且向后兼容的方法,可通过自定义背景为凸起按钮提供涟漪效果.

您的布局应如下所示

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

Answer 4

我今天遇到了这个问题,实际上正在使用v22库.

假设您正在使用样式,则可以设置colorButtonNormal属性,默认情况下按钮将使用该颜色.

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

除此之外,您仍然可以为按钮创建样式,然后如果您需要各种颜色(未经测试,只是推测),则使用每个按钮.

请记住android:在v21样式中的项目名称之前添加.

Answer 5

使用AppCompat(22.1.1+),您可以添加如下样式:

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

并通过应用样式使用它:

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

以编程方式更改颜色,我发现更新颜色(在API 15或16上)的唯一方法是使用"背景色调列表".并且它不会删除API 21设备上的漂亮径向动画:

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

因为button.setBackground(...)并且button.getBackground().mutate().setColorFilter(...)不像API 21那样更改API 15和16上的按钮颜色.

Answer 6

@ ianhanniballake的答案是绝对正确和简单的.但我花了几天才明白.对于不理解他的答案的人,这里有更详细的实施

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

===或者===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

Answer 7

我使用了backgroundTint和前景:

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

Answer 8

我来到这篇文章寻找一种方法来获得我的ListView物品的背景颜色,但保持涟漪.

我只是将我的颜色添加为背景,将selectableItemBackground添加为前景:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

它就像一个魅力.我猜相同的技术也可以用于按钮.祝好运 :)

Answer 9

用backgroundTint而不是background

Answer 10

如果您对ImageButton感兴趣,可以试试这个简单的事情:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

Answer 11

v22.1中appcompat-v7引入了一些新的可能性.现在可以仅将特定主题分配给一个视图.

已弃用app:主题用于样式工具栏.您现在可以在所有API级别7及更高版本的设备上使用android:theme用于工具栏,并在API级别11及更高版本的设备上使用android:theme支持所有小部件.

因此,我们不是在全局主题中设置所需的颜色,而是创建一个新的颜色并仅将其分配给 Button

例:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

并使用此风格作为您的主题 Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>