Android Material Design 按鈕樣式

Question

我對材料設計的按鈕樣式感到困惑。 我想要像附加鏈接中那樣的彩色凸起按鈕，比如在使用部分下看到的“強制停止”和“卸載”按鈕。 有可用的樣式還是我需要定義它們？

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

我找不到默認的按鈕樣式。

例子：

 <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" />

如果我嘗試通過添加更改按鈕的背景顏色

    android:background="@color/primary"

所有樣式都消失了，例如觸摸動畫、陰影、圓角等。

Answer 1

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

使用 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.Colored ：

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored ：

---

要回答這個問題，因此使用的樣式是

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

---

如何改變顏色

對於整個應用程序：

所有的UI控件（不僅是按鍵，而且浮動的操作按鈕，復選框等）的顏色由屬性管理colorAccent作為解釋在這里。 您可以修改此樣式並在主題定義中應用您自己的顏色：

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

對於特定按鈕：

如果您需要更改特定按鈕的樣式，您可以定義一個新樣式，繼承上述父樣式之一。 在下面的示例中，我只是更改了背景和字體顏色：

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

然后你只需要在按鈕上應用這個新樣式：

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

要在布局中設置默認按鈕設計，請將此行添加到 styles.xml 主題：

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

其中@style/btn是您的按鈕主題。 這為具有特定主題的布局中的所有按鈕設置按鈕樣式

Answer 2

最簡單的解決方案

---

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

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

---

第 2 步：使用 AppCompatActivity 作為您的父 Activity 類

public class MainActivity extends AppCompatActivity

---

第 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">

---

第 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"/>

---

Answer 3

如果我理解正確，你想做這樣的事情：

在這種情況下，它應該足以使用：

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

或者對於小於 21 的 API：

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

除了使用材料主題教程。

動畫變體在這里。

Answer 4

您可以使用材料組件庫。

將依賴項添加到您的build.gradle ：

dependencies { implementation ‘com.google.android.material:material:1.3.0’ }

然后將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"
   />

您可以在此處查看完整文檔，在此處查看API 。

要更改背景顏色，您有 2 個選項。

1. 使用backgroundTint屬性。

就像是：

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

2. 在我看來，這將是最好的選擇。 如果要覆蓋默認樣式的某些主題屬性，則可以使用新的materialThemeOverlay屬性。

就像是：

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

選項#2 至少需要版本1.1.0 。

您可以使用以下樣式之一：

• 填充按鈕（默認） ： style="@style/Widget.MaterialComponents.Button
• 文本按鈕： style="@style/Widget.MaterialComponents.Button.TextButton"
• OutlinedButton : style="@style/Widget.MaterialComponents.Button.OutlinedButton"

---

舊支持庫：

使用新的支持庫 28.0.0 ，設計庫現在包含MaterialButton 。

您可以將此按鈕添加到我們的布局文件中：

<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" />

默認情況下，此類將使用主題的強調色作為按鈕填充的背景顏色以及白色作為按鈕文本顏色。

您可以使用以下屬性自定義按鈕：

• app:rippleColor : 按鈕波紋效果使用的顏色

• app:backgroundTint ：用於將色調應用於按鈕的背景。 如果您希望更改按鈕的背景顏色，請使用此屬性而不是背景。

• app:strokeColor : 按鈕描邊使用的顏色

• app:strokeWidth : 按鈕描邊使用的寬度

• app:cornerRadius : 用於定義用於按鈕角的半徑

Answer 5

這就是我如何得到我想要的。

首先，制作一個按鈕（在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>

按鈕的波紋和背景，作為可繪制的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>

這增加了我正在尋找的漣漪效應。

Answer 6

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

還有另一個名為com.google.android.material.button.MaterialButton Button小部件，它具有不同的樣式並從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"

填充，升高的Button （默認） ：

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

填充，未升高的Button ：

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

文本Button ：

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

圖標Button ：

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

帶有圖標的文本Button ：：

---

閱讀：https ://material.io/develop/android/components/material-button/

用於創建新材料按鈕的便利類。

此類為構造函數中的按鈕提供更新的 Material 樣式。 小部件將顯示正確的默認材質樣式，而無需使用樣式標志。

Answer 7

這是一個示例，有助於在您的應用程序中一致地應用按鈕樣式。

這是我與特定樣式一起使用的示例主題..

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

這就是我在 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 角是為了與 Material 主題保持一致。

Answer 8

我嘗試了很多答案和第三方庫，但沒有一個能保持邊界並提高對棒棒糖的影響，同時對棒棒糖產生連鎖反應而沒有任何缺點。 這是我結合幾個答案的最終解決方案（由於灰度顏色深度，邊框/凸起在 gif 上無法很好地呈現）：

棒糖

前棒棒糖

構建.gradle

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

布局文件

<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

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

可繪制/ 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>

活動的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;
        }
    });

Answer 9

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) 要更改按鈕狀態之間的默認陰影和陰影過渡動畫，您需要定義選擇器並使用 android:stateListAnimator 屬性將其應用於按鈕。 完整的按鈕定制參考： http : //www.zoftino.com/android-button

Answer 10

我剛剛創建了一個 android 庫，它允許您輕松修改按鈕顏色和波紋顏色

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"/>

你不需要為你想要的每個按鈕都創建一個不同顏色的樣式，讓你可以隨意自定義顏色

Answer 11

您可以通過向視圖添加 z 軸來為視圖賦予航空效果，並且可以為其添加默認陰影。 此功能在 L 預覽版中提供，將在發布后可用。 現在你可以簡單地添加一個圖像，為按鈕背景提供這個外觀

Answer 12

// here is the custom button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="45"
            android:centerColor="@color/colorPrimary"
            android:startColor="@color/colorPrimaryDark"
            android:endColor="@color/colorAccent"
            >
        </gradient>
        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            >
        </corners>
        <stroke
            android:width="2dp"
            android:color="@color/colorWhite"
            >
          </stroke>
      </shape>
       </item>

</selector>