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

这就是我得到我想要的东西.

首先,做一个按钮(in 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>

按钮的波纹和背景,作为drawable 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 5

使用新的Support Library 28.0.0-alpha1版本,Design Library现在包含了android.support.design.

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

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

默认情况下,此类将使用主题的强调颜色为按钮填充背景颜色,白色为按钮文本颜色.

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

• com.google.android.material:用于按钮波纹效果的颜色

• build.gradle:用于将色调应用于按钮的背景.如果要更改按钮的背景颜色,请使用此属性而不是背景.

• MaterialButton:用于按钮笔划的颜色

• backgroundTint:用于按钮笔划的宽度
• materialThemeOverlay:用于定义用于按钮角落的半径

Answer 6

这是一个示例,有助于在您的应用中一致地应用按钮样式.

这是我使用特定样式的主题示例..

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

旁边android.support.design.button.MaterialButton(由Gabriele Mariotti提到),

还有另一个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"

填充,提升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/

用于创建新"材质"按钮的便捷类.

此类为构造函数中的按钮提供更新的材质样式.窗口小部件将显示正确的默认材质样式,而不使用样式标志.

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

可绘制-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可绘制来创建圆角按钮，并且可以增加或减少半径来增加或减少按钮角的圆度。将此 xml 可绘制元素设置为按钮的背景。

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