【问题标题】:Android Material Design Button StylesAndroid Material Design 按钮样式
【发布时间】:2014-12-08 09:58:36
【问题描述】:

我对材料设计的按钮样式感到困惑。我想要在附加链接中获得彩色凸起按钮,例如使用部分下的“强制停止”和“卸载”按钮。有可用的样式还是我需要定义它们?

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"

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

【问题讨论】:

标签: android material-design android-button


【解决方案1】:

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

使用支持库 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 管理,如 here 所述。 您可以修改此样式并在主题定义中应用您自己的颜色:

<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 是您的按钮主题。这会为具有特定主题的布局中的所有按钮设置按钮样式

【讨论】:

  • 我认为这实际上是目前最好的方法。
  • 你在 Kitkat 设备上测试过吗?
  • colorButtonNormal attr 在 Android 4.1.2 上对我不起作用。根本无法设置按钮颜色(android:background 破坏了按钮的材质样式)。
  • @YoannHercouet 这些图片是在哪个 Android 版本上制作的?在我的 Andro 4.1.2 和 4.4.2 按钮上 style="..AppCompat.Button" 没有被提升。
  • @konopko 如果你和我一样,你使用style="" 而不是Android:theme="" 更改为后者为我解决了这个问题
【解决方案2】:

最简单的解决方案


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

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

第 2 步:使用 AppCompatActivity 作为父 Activity 类

public class MainActivity extends AppCompatActivity

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

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

【讨论】:

  • 您不需要指定android.support.v7.widget.AppCompatButton,因为当您指定Button时,构建工具会自动使用它
  • 会自动启用/禁用吗?还是我们需要再次为其指定样式?
  • 这为我删除了棒棒糖前的状态列表,导致按钮没有任何点击效果
  • 似乎可以在 Android P 上运行,除了 textColor 覆盖了 disabled 状态的文本颜色。
  • @Sundeep1501 至少 Widget.MaterialComponents.Button.OutlinedButton 没有变为灰色。
【解决方案3】:

如果我对你的理解正确,你想做这样的事情:

在这种情况下,它应该足够使用:

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

或者对于小于 21 的 API:

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

除了Using Material Theme Tutorial

动画变体是here

【讨论】:

  • @androiddeveloper 将示例推送到 GitHub,核心内容在这里 — github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/…,
  • 我认为你必须为旧版本使用兼容库。
  • 没有,但如果API是21及以上,你可以设置它。我找到了一种方法,但我不知道最好的方法是什么。
  • 这种方法可以有多种颜色吗?似乎一次只允许一个。
  • @gerfmarquez 你需要为不同的按钮设置不同的样式
【解决方案4】:

您可以使用 Material Component library

the dependency 添加到您的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"
   />

您可以在此处查看full documentationAPI here

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

  1. 使用 backgroundTint 属性。

类似:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. 在我看来,这将是最好的选择。如果您想从默认样式中覆盖某些主题属性,则可以使用新的 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"
  • OutlinedButtonstyle="@style/Widget.MaterialComponents.Button.OutlinedButton"

旧支持库:

使用新的Support Library 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" />

默认情况下,此类将使用主题的accent colour作为填充按钮的背景颜色,并使用白色作为按钮文本颜色。

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

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

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

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

  • app:strokeWidth: 按钮描边的宽度

  • app:cornerRadius: 用于定义按钮角的半径

【讨论】:

    【解决方案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>
    

    这增加了我一直在寻找的连锁反应。

    【讨论】:

    • 拐角半径应为 2dp 以匹配框架资产。此外,translationZ 不应在 XML 中设置,也无需覆盖默认高度、minWidth、minHeight 或 margin。
    • 应用自定义样式时,默认边距变为 0,由于某种原因,属性没有被继承。
    • 啊,我没有注意到您缺少父样式。您应该添加 parent="Widget.Material.Button" 或者完全跳过制作自定义样式而只是在按钮本身上设置背景。
    • 哦!我不知道它存在,在任何文档中都没有遇到过。我会试试的。
    • 虽然,我不确定如果没有自定义样式我应该怎么做。你能给我举个例子吗?
    【解决方案6】:

    除了android.support.design.button.MaterialButtonGabriele Mariotti提到的),

    还有另一个名为com.google.android.material.button.MaterialButtonButton 小部件具有不同的样式并从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 按钮的便利类。

    这个类为按钮提供更新的 Material 样式 构造函数。小部件将显示正确的默认材质 不使用样式标志的样式。

    【讨论】:

    • 你知道如何改变它的颜色吗?
    • app:backgroundTint & app:backgroundTintMode 来自the documentation
    • 他们如何分配禁用状态颜色
    【解决方案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 主题保持一致。

    【讨论】:

    • 对不起,我迟到了,但是由于主题引入很晚,因此它不向后兼容。
    【解决方案8】:

    我尝试了很多答案和第三方库,但没有一个能在棒棒糖前保持边界和提升效果,同时对棒棒糖产生涟漪效应而没有缺点。这是我结合了几个答案的最终解决方案(由于灰度颜色深度,边框/凸起在 gif 上的渲染效果不佳):

    棒棒糖

    棒棒糖前

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

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

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

    【讨论】:

    • 正在寻找一个完整的例子,很惊讶这没有得到更高的投票 - 谢谢。
    【解决方案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

    【讨论】:

      【解决方案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"/>
      

      你不需要为每个按钮创建一个样式,你想用不同的颜色,让你随机自定义颜色

      【讨论】:

      • 库产生错误:rippleColor has already been defined,一些用户已经在“问题”中提到它
      【解决方案11】:
      // 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>
      

      【讨论】:

        【解决方案12】:

        您可以通过向视图添加 z 轴来赋予视图航空,并且可以为其设置默认阴影。此功能在 L 预览版中提供,发布后将可用。现在你可以简单地添加一个图像,让按钮背景看起来像这样

        【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-08-24
        • 2017-10-27
        • 1970-01-01
        • 1970-01-01
        • 2019-10-19
        • 2018-10-19
        • 1970-01-01
        • 2015-02-23
        相关资源
        最近更新 更多