Android Material Design按钮样式

本文翻译自：Android Material Design Button Styles

I'm confused on button styles for material design. 我对材质设计的按钮样式感到困惑。 I'd like to get colorful raised buttons like in the attached link., like the "force stop" and "uninstall" buttons seen under the usage section. 我想获得彩色的凸起按钮，如附件链接中所示。例如，在“使用情况”部分下看到的“强制停止”和“卸载”按钮。 Are there available styles or do I need to define them? 是否有可用的样式或需要定义它们？

http://www.google.com/design/spec/components/buttons.html#buttons-usage http://www.google.com/design/spec/components/buttons.html#buttons-usage

I couldn't find the default button styles. 我找不到默认的按钮样式。

Example: 例：

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

If I try to change the background color of the button by adding 如果我尝试通过添加来更改按钮的背景色

    android:background="@color/primary"

all of the styles go away, such as the touch animation, shadow, rounded corner, etc. 所有样式都会消失，例如触摸动画，阴影，圆角等。

---

#1楼

参考：https://stackoom.com/question/1mXzD/Android-Material-Design按钮样式

---

#2楼

you can give aviation to the view by adding z axis to it and can have default shadow to it. 您可以通过向其添加z轴来为视图提供航空功能，并为其具有默认阴影。 this feature was provided in L preview and will be available after it release. 此功能在L预览中提供，并且在发布后将可用。 For now you can simply add a image the gives this look for button background 现在，您只需添加图像即可使按钮背景看起来像这样

---

#3楼

Here is how I got what I wanted. 这就是我想要的方式。

First, made a button (in styles.xml ): 首先，制作一个按钮（在styles.xml ）：

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

The ripple and background for the button, as a drawable primary_round.xml : 按钮的波纹和背景，作为可绘制的primary_round.xml ：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

This added the ripple effect I was looking for. 这增加了我一直在寻找的涟漪效应。

---

#4楼

If I understand you correctly, you want to do something like this: 如果我对您的理解正确，那么您想要执行以下操作：

In such case, it should be just enough to use: 在这种情况下，使用它就足够了：

<item name="android:colorButtonNormal">#2196f3</item>

Or for API less than 21: 或对于少于21的API：

<item name="colorButtonNormal">#2196f3</item>

In addition to Using Material Theme Tutorial . 除了使用Material Theme教程 。

Animated variant is here . 动画变体在这里 。

---

#5楼

Here is a sample that will help in applying button style consistently across your app. 这是一个示例，有助于在应用程序中一致地应用按钮样式。

Here is a sample Theme I used with the specific styles.. 这是我与特定样式一起使用的示例主题。

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

This is how I defined the button shape & effects inside res/drawable-v21 folder... 这就是我在res / drawable-v21文件夹中定义按钮形状和效果的方式...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

2dp corners are to keep it consistent with Material theme. 2dp角落将使其与Material主题保持一致。

---

#6楼

I've just created an android library, that allows you to easily modify the button color and the ripple color 我刚刚创建了一个android库，可让您轻松修改按钮颜色和波纹颜色

https://github.com/xgc1986/RippleButton https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

You don't need to create an style for every button you want wit a different color, allowing you to customize the colors randomly 您无需为要使用不同颜色的每个按钮创建样式，即可随意自定义颜色