Android Material Design 按钮样式

Android Material Design Button Styles

提问by xsorifc28

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.

所有样式都消失了，例如触摸动画、阴影、圆角等。

回答by Yoann Hercouet

I will add my answer since I don't use any of the other answers provided.

我将添加我的答案，因为我不使用提供的任何其他答案。

With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available:

使用 Support Library v7，所有样式实际上都已经定义并可以使用，对于标准按钮，所有这些样式都可用：

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

Widget.AppCompat.Button:

Widget.AppCompat.Button：

Widget.AppCompat.Button.Colored:

Widget.AppCompat.Button.Colored：

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored:

Widget.AppCompat.Button.Borderless.Colored：

---

---

To answer the question, the style to use is therefore

要回答这个问题，因此使用的样式是

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

---

---

How to change the color

如何改变颜色

For the whole app:

对于整个应用程序：

The color of all the UI controls (not only buttons, but also floating action buttons, checkboxes etc.) is managed by the attribute colorAccentas explained here. You can modify this style and apply your own color in your theme definition:

所有的UI控件（不仅是按键，而且浮动的操作按钮，复选框等）的颜色由属性管理colorAccent作为解释在这里。您可以修改此样式并在主题定义中应用您自己的颜色：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

For a specific button:

对于特定按钮：

If you need to change the style of a specific button, you can define a new style, inheriting one of the parent styles described above. In the example below I just changed the background and font colors:

如果您需要更改特定按钮的样式，您可以定义一个新样式，继承上述父样式之一。在下面的示例中，我只是更改了背景和字体颜色：

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

Then you just need to apply this new style on the button with:

然后你只需要在按钮上应用这个新样式：

android:theme="@style/AppTheme.Button"

To set a default button design in a layout, add this line to the styles.xml theme:

要在布局中设置默认按钮设计，请将此行添加到 styles.xml 主题：

<item name="buttonStyle">@style/btn</item>

where @style/btnis your button theme. This sets the button style for all the buttons in a layout with a specific theme

@style/btn你的按钮主题在哪里。这为具有特定主题的布局中的所有按钮设置按钮样式

回答by Ehtesham Hasan

Simplest Solution

最简单的解决方案

---

---

Step 1: Use the latest support library

第 1 步：使用最新的支持库

compile 'com.android.support:appcompat-v7:25.2.0'

---

---

Step 2: Use AppCompatActivity as your parent Activity class

第 2 步：使用 AppCompatActivity 作为您的父 Activity 类

public class MainActivity extends AppCompatActivity

---

---

Step 3: Use app namespace in your layout XML file

第 3 步：在布局 XML 文件中使用 app 命名空间

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

---

---

Step 4: Use AppCompatButton instead of Button

第 4 步：使用 AppCompatButton 而不是 Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

---

---

回答by AlexKorovyansky

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.

除了使用材料主题教程。

Animated variant is here.

动画变体在这里。

回答by xsorifc28

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.

这增加了我正在寻找的涟漪效应。

回答by Gabriele Mariotti

With the stable release of Android Material Components in Nov 2018, Google has moved the material components from namespace android.support.designto com.google.android.material.
Material Component libraryis replacement for Android's Design Support Library.

随着 2018 年 11 月 Android Material Components 的稳定发布，Google 已将 Material 组件从命名空间android.support.design移至com.google.android.material.
Material Component 库是 Android 设计支持库的替代品。

Add the dependencyto your build.gradle:

将依赖项添加到您的build.gradle：

dependencies { implementation ‘com.google.android.material:material:1.0.0' }

Then add the MaterialButtonto your layout:

然后将其添加MaterialButton到您的布局中：

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

You can check the full documentationhere and API here.

您可以在此处查看完整文档，在此处查看API。

To change the background coloryou have 2 options.

要更改背景颜色，您有 2 个选项。

1. Using the backgroundTintattribute.

1. 使用backgroundTint属性。

Something like:

就像是：

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>

1. It will be the best option in my opinion. If you want to override some theme attributes from a default style then you can use new materialThemeOverlayattribute.

2. 在我看来，这将是最好的选择。如果要覆盖默认样式的某些主题属性，则可以使用新materialThemeOverlay属性。

Something like:

就像是：

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

The option#2 requires the 'com.google.android.material:material:1.1.0'.

选项#2 需要 'com.google.android.material:material:1.1.0'.

OLD Support Library:

旧支持库：

With the new Support Library 28.0.0, the Design Library now contains the MaterialButton.

使用新的支持库 28.0.0，设计库现在包含MaterialButton.

You can add this button to our layout file with:

您可以将此按钮添加到我们的布局文件中：

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

By default this class will use the accent colourof your theme for the buttons filled background colour along with white for the buttons text colour.

默认情况下，此类将使用主题的强调色作为按钮填充的背景颜色以及白色作为按钮文本颜色。

You can customize the button with these attributes:

您可以使用以下属性自定义按钮：

• app:rippleColor:?The colour to be used for the button ripple effect

• app:backgroundTint:?Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.

• app:strokeColor: The color to be used for the button stroke

• app:strokeWidth:?The width to be used for the button stroke
• app:cornerRadius:?Used to define the radius used for the corners of the button

• app:rippleColor:? 按钮波纹效果使用的颜色

• app:backgroundTint:? 用于对按钮的背景应用色调。如果您希望更改按钮的背景颜色，请使用此属性而不是背景。

• app:strokeColor: 按钮描边使用的颜色

• app:strokeWidth:? 按钮描边使用的宽度
• app:cornerRadius:? 用于定义用于按钮角的半径

回答by samkya

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 主题保持一致。

回答by ??????

Beside android.support.design.button.MaterialButton(which mentioned by Gabriele Mariotti),

除了android.support.design.button.MaterialButton（Gabriele Mariotti 提到的），

There is also another Buttonwidget called com.google.android.material.button.MaterialButtonwhich has different styles and extends from AppCompatButton:

还有另一个Button名为的小部件com.google.android.material.button.MaterialButton，它具有不同的样式并扩展自AppCompatButton：

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Filled, elevated Button(default):

填充，升高Button（默认）：

style="@style/Widget.MaterialComponents.Button"

Filled, unelevated Button:

填充的，未升高的Button：

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

Text Button:

文字Button：

style="@style/Widget.MaterialComponents.Button.TextButton"

Icon Button:

图标Button：

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

A text Buttonwith an icon::

Button带有图标的文本：

---

---

Read:https://material.io/develop/android/components/material-button/

阅读：https : //material.io/develop/android/components/material-button/

A convenience class for creating a new Material button.

This class supplies updated Material styles for the button in the constructor. The widget will display the correct default Material styles without the use of the style flag.

用于创建新材料按钮的便利类。

此类为构造函数中的按钮提供更新的 Material 样式。小部件将显示正确的默认材质样式，而无需使用样式标志。

回答by Rémy DAVID

I tried a lot of answer & third party libs, but none was keeping the border and raised effect on pre-lollipop while having the ripple effect on lollipop without drawback. Here is my final solution combining several answers (border/raised are not well rendered on gifs due to grayscale color depth) :

我尝试了很多答案和第三方库，但没有一个能保持边界并提高对棒棒糖的影响，同时对棒棒糖产生连锁反应而没有任何缺点。这是我结合几个答案的最终解决方案（由于灰度颜色深度，边框/凸起在 gif 上无法很好地呈现）：

Lollipop

棒糖

Pre-lollipop

前棒棒糖

build.gradle

构建.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

布局文件

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21/btn_bg.xml

drawable-v21/btn_bg.xml

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

drawable/btn_bg.xml

可绘制/ btn_bg.xml

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

Activity's onCreate

活动的onCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

回答by Arnav Rao

1) You can create rounded corner buttonby defining xml drawable and you can increase or decrease radius to increase or decrease roundness of button corner. Set this xml drawable as background of button.

1）您可以通过定义xml drawable来创建圆角按钮，您可以增加或减少半径以增加或减少按钮角的圆度。将此 xml drawable 设置为按钮的背景。

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

2) To change default shadow and shadow transition animation between button states, you need to define selector and apply it to button using android:stateListAnimator property. For complete button customization reference : http://www.zoftino.com/android-button

2) 要更改按钮状态之间的默认阴影和阴影过渡动画，您需要定义选择器并使用 android:stateListAnimator 属性将其应用于按钮。完整的按钮定制参考：http: //www.zoftino.com/android-button

回答by xgc1986

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

你不需要为你想要的每个按钮都创建一个不同颜色的样式，让你可以随意自定义颜色