Android 带边框的材质设计按钮

我知道如何制作带有颜色填充的材质设计按钮：

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

并且没有带边框的透明按钮：

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

但是，有没有一种方法可以使材质设计带有边框（内部透明）按钮？像下面这样的

---

这就是我只使用边框和棒棒糖及以上的涟漪效果来制作按钮的方法。就像AppCompat按钮一样，这些按钮在较低的API上有一个后备功能（如果您需要在较低的API上使用涟漪，则需要使用外部库）。我使用FrameLayout是因为它很便宜。文本和边框的颜色为黑色，但您可以使用自定义颜色进行更改：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:background="@drawable/background_button_ghost">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:selectableItemBackground"
        android:gravity="center"
        android:padding="14dp"
        android:textSize="16sp"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:text="Text"/>
</FrameLayout>

可绘制/背景按钮\u ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/black"/>
    <solid android:color="@color/transparent"/>
</shape>

---

如果我遗漏了什么，请留下评论，我将更新答案。

简单地说，您可以使用此代码看起来很不错。

           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:orientation="vertical">

                <android.support.v7.widget.AppCompatButton
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="#F48025"
                    android:text="login"
                    android:textColor="@color/colorWhite" />

            </LinearLayout>

背景色为：

android:background="#ffffff"

android:backgroundTint="#F48025"

---

下面是如何正确操作的方法

你需要做的是

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>

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

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

android:id=“@android:id/mask”

需要在按钮上有涟漪触摸反馈。标记为“遮罩”的层在屏幕上不可见，只是用于触摸反馈

3-创建可用于小于v21的选择器

drawable/bg\u btn\u 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>

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

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

@可绘制的/背景图
@颜色/颜色重音
假的
16便士
真的

4-在按钮上应用样式

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

差不多就是这样。下面是按钮现在的外观示例。 您也可以使用

添加到您的

build.gradle

：

dependencies { implementation 'com.google.android.material:material:1.3.0' }

在这种情况下，可以在布局文件中使用：

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

官方文件是和所有的安卓规范

---

使用jetpack compose

1.0.0

（使用

1.0.0-beta09

进行测试），您可以使用

大纲按钮

：

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")
    }

---

旧版（支持库）

使用新的，设计库现在包含

材质按钮

您可以通过以下方式将此按钮添加到布局文件：

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

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

• app:backgroundTint

  ： 用于将色调应用于按钮的背景。如果要更改按钮的背景色，请使用此属性而不是背景

• app:strokeColor

  ：用于按钮笔划的颜色

• app:strokeWidth

  ： 用于按钮笔划的宽度

---

另外

请将详细答案归功于@NomanRafique！然而，由于自定义背景，我们失去了一些重要的东西：

按钮的高度大于默认的

Widget.AppCompat.Button

衬垫

启用/禁用状态

如果您想知道，以下是默认背景的外观：

通过重用原始的插图、填充物和颜色选择器，在一个简单的例子中，我们可以得出如下结论（所有值都是默认值，来自android支持/材料库）：

drawable-v21/bg_btn_outlined.xml

styles.xml

@可绘制/背景图

在这一点上，我们应该有一个轮廓按钮，它响应触摸，尊重

enabled=“false”

状态，并且与默认的

小部件的高度相同。AppCompat.button

：

---

现在,，从这里开始，您可以通过提供自己的

@color/abc\u btn\u colored\u borderless\u text\u材质

颜色选择器来定制颜色。

通过将材质设计按钮的

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

参考资料：

在XML中使用

            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Its a button"
                android:textColor="@android:color/white"
                android:textSize="@dimen/_12ssp"
                app:backgroundTint="@android:color/transparent"
                app:strokeColor="@android:color/white"
                app:strokeWidth="@dimen/_1sdp" />

在哪里

app:backgroundTint用于背景色

应用程序：strokeColor是边框颜色

应用程序：strokeWidth是边框宽度

将以下代码放入Styles.xml文件中：

<style name="btn_start_new_discussion">
    <item name="android:layout_marginTop">15dp</item>
    <item name="strokeWidth">2dp</item>
    <item name="strokeColor">@color/colorPrimary</item>
    <item name="cornerRadius">10dp</item>
</style>

15dp
2dp
@颜色/原色
10dp

您的解决方案简单但有限。您无法控制边框的厚度，边框内部为圆形，但外部为边缘。看起来不太好。在我的例子中，按钮是透明的，我希望避免混乱的自定义实现。但我想我别无选择。您可以将其作为自定义类使用，这是我遇到的最好的类，我现在正在使用它，因为它在xml中的声明更短。您可以在drawable或drawable-v21中创建

btn_outline.xml

？？