带边框的材料设计按钮

Question

我知道如何使用颜色填充制作材质设计按钮:

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

并且没有边框的透明按钮:

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

但是,有没有办法让Material Design设计成边框(透明内部)按钮？像下面的东西？

Answer 1

使用新的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:用于按钮笔划的宽度

也

Answer 2

这是如何正确地做到这一点.

你需要做的是

1 - 使用笔划创建可绘制的形状
2 - 创建波纹可绘制
3 - 创建小于v21的可绘制选择器
4 - 为带边框的按钮创建新样式
5 - 在按钮上应用样式

1 - 使用笔划创建形状 btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="2dp"
        android:color="@color/colorAccent">
    </stroke>
    <solid android:color="@color/colorTransparent"/>
    <corners
        android:radius="5dp">
    </corners>

</shape>

2 - 创建波纹可绘制 drawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:id="@android:id/mask">
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <solid android:color="@android:color/white"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

</ripple>

android:id="@android:id/mask"需要在按钮上有波纹触摸反馈.标记为蒙版的图层在屏幕上不可见,仅用于触摸反馈.

3 - 创建小于v21的选择器drawable drawable/bg_btn_outline.xml

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

    <item android:drawable="@drawable/btn_outline"/>

</selector>

4 - 为带边框的按钮创建一个新样式 上面给出了创建样式所需的所有资源,这就是你的样式应该是什么样子

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="android:background">@drawable/bg_btn_outline</item>
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">16sp</item>
        <item name="android:singleLine">true</item>
    </style>

4 - 在按钮上应用样式

<Button
   style="@style/ButtonBorder.Accent"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

这就是它.以下是按钮现在的样子示例.

Answer 3

您可以通过将“材料设计按钮”的style属性@style/Widget.MaterialComponents.Button.OutlinedButton设置为并将app:strokeColor属性值设置为您的首选颜色来轻松完成此操作。

例：

<com.google.android.material.button.MaterialButton
                android:text="Rounded outlined button"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/btnRound"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                app:strokeColor="@color/colorPrimaryDark"/>

参考文献：

• https://material.io/develop/android/docs/getting-started/
• https://material.io/develop/android/components/material-button/