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

时间：2014-11-01 04:46:25

标签： android android-5.0-lollipop

我正在使用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"
 />

Background 以下是一个普通的按钮，效果很好。

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

Default button

17 个答案:

答案 0 :(得分：420)

使用android:background时，您将使用空白颜色替换大部分样式和外观。

更新：截至version 23.0.0 release的AppCompat，有一种新的Widget.AppCompat.Button.Colored样式，它使用您的主题colorButtonNormal对于禁用的颜色和colorAccent启用的颜色。

这允许您直接通过

将其应用于按钮 
<Button
  ...
  style="@style/Widget.AppCompat.Button.Colored" />

如果您需要自定义colorButtonNormal或colorAccent，则可以按照this pro-tip和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>

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

答案 1 :(得分：90)

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

  1. 将按钮放在ViewGroup中，并在其中设置所需的背景
  2. 从当前主题设置selectableItemBackground作为按钮的背景（API＆gt; = 11）

    3. 即。 ：

    <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＆gt; = 11，您将在＆gt; = 21设备上获得连锁效果，在21之前保留常规按钮，直到AppCompat更新为支持涟漪那里也是。

    您也可以仅将selectableItemBackgroundBorderless用于＆gt; = 21个按钮。

答案 2 :(得分：85)

这是一种简单且向后兼容的方式，可以使用自定义背景为凸起按钮提供涟漪效果。

您的布局应如下所示

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

答案 3 :(得分：25)

我今天遇到了这个问题，实际上正在使用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>

除此之外，您仍然可以为按钮创建样式，然后在需要各种颜色时使用每个按钮（尚未测试，只是推测）。

请务必在 v21样式中的项目名称前添加android:。

答案 4 :(得分：24)

使用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上）是使用＆＃39;背景色调列表＆＃39;代替。它并没有删除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上的按钮颜色。

答案 5 :(得分：21)

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

答案 6 :(得分：13)

我使用了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"/>

答案 7 :(得分：6)

如果您对ImageButton感兴趣，可以尝试这个简单的事情：

2017/04/13 14:40:02 using credential file for authentication; email=yyyyy@xxxxxx.iam.gserviceaccount.com
2017/04/13 14:40:02 Listening on 127.0.0.1:5432 for xxxxx:europe-west1:yyyyy
2017/04/13 14:40:02 Ready for new connections

答案 8 :(得分：6)

我来到这篇文章寻找一种方法来获得我的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>

它就像一个魅力。我猜相同的技术也可以用于按钮。祝你好运：）

答案 9 :(得分：5)

v22.1的{​​{1}}引入了一些新的可能性。现在可以仅将特定主题分配给一个视图。

  

已弃用app：主题用于样式工具栏。你现在可以使用了   android：所有API级别7及更高版本设备上的工具栏主题   android：主题支持API级别11及更高级别的所有小部件   设备

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

示例： 

Button

并将此款式用作<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorButtonNormal">@color/myColor</item> </style>

的主题 
Button

答案 10 :(得分：5)

使用 Uploading file local path: C:\projects\MyProj\app\build\outputs\apk\app-debug.apk remote path: /data/local/tmp/com.mycomp.myapp Installing com.mycomp.myapp DEVICE SHELL COMMAND: pm install -r "/data/local/tmp/com.mycomp.myapp" pkg: /data/local/tmp/com.mycomp.myapp Success 代替backgroundTint

答案 11 :(得分：4)

如果您对使用第三方库感到满意，请查看traex/RippleEffect。它允许您只需几行代码就可以为 ANY 视图添加Ripple效果。您只需要在xml布局文件中包含要使用com.andexert.library.RippleView容器产生连锁效果的元素。

作为额外的奖励，它需要Min SDK 9，因此您可以在OS版本中实现设计一致性。

以下是图书馆的一个例子＆＃39; GitHub回购：

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

您可以通过在RippleView元素中添加此属性来更改波纹颜色：app:rv_color="@color/my_fancy_ripple_color

答案 12 :(得分：3)

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

使用

xmlns:app="http://schemas.android.com/apk/res-auto"

并且在pre-lolipop上将显示颜色

答案 13 :(得分：2)

伟大的教程中解释了两种方法：Alex Lockwood：http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html：

方法＃1：使用ThemeOverlay修改按钮的背景颜色 

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>


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

方法＃2：设置AppCompatButton的背景色调 

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>


<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

答案 14 :(得分：0)

以编程方式应用颜色：

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

答案 15 :(得分：0)

以编程方式：

 myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));

例如：

 MaterialButton myMaterialButton = new MaterialButton(this);
 myMaterialButton.setLayoutParams(myButtonParams);
 myMaterialButton.setBackgroundColor(Color.GRAY);
 myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));

答案 16 :(得分：-1)

我试过了：

android:backgroundTint:"@color/mycolor"

而不是更改背景属性。 这不会消除材料效应。

相关问题
最新问题