项目中经常会使用到,给按钮添加边框,点击效果,圆角,icon+文字圆角。
发现系统就有提供好的组件,除了CardView 可以设置。android material design支持库中各种可以直接拿来用的组件。

​meterialDesign 支持库​

下面基于com.google.android.material.button.MaterialButton 这个组件,展示了可以设置的集中效果。

Android 基础 MaterialButton_android

如上,基本上可以满足日常开发。

注意使用过程中,已知问题。

1.设置圆角描边,并且同时设置背景色时,放大会看到背景色超出了圆角边框
2.默认设置的按钮高度没有正常显示,上边距和下边距有默认值,需要去掉默认值。

android:insetTop="0dp" android:insetBottom="0dp"

3.设置enable=false,按钮左边icon彩色会自动变成黑白

代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="10dp"
tools:context=".MaterialButtonActivity">

<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
app:title="MaterialButton"
android:layout_height="40dp" />

<com.google.android.material.button.MaterialButton
android:id="@+id/txt_confirm"
android:layout_below="@+id/txt_tip"
android:layout_marginTop="18dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:elevation="0dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="75dp"
android:layout_height="38dp"
app:strokeWidth="2dp"
app:strokeColor="@color/cardview_dark_background"
app:cornerRadius="37.5dp"
android:backgroundTintMode="src_over"
android:background="@color/colorAccent"
android:textSize="12sp"
android:gravity="center"
android:text="测试"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse" />

<com.google.android.material.button.MaterialButton
android:layout_marginLeft="10dp"
android:id="@+id/txt_confirm2"
android:layout_below="@+id/txt_tip"
android:layout_marginTop="18dp"
android:padding="0dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="75dp"
android:layout_height="38dp"
app:rippleColor="@color/colorAccent"
app:backgroundTint="#ff0f00"
app:cornerRadius="13dp"
android:textSize="12sp"
android:gravity="center"
android:text="测试"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse" />

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IconButton"
app:icon="@mipmap/ucenter_diy_explain" />

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IconButton"
android:enabled="false"
app:icon="@mipmap/ucenter_diy_explain" />


<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnelevatedButton" />

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OutlinedButton" />

<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextButton" />

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="IconButton"
app:icon="@mipmap/ucenter_diy_explain" />


<!-- you填充色,有阴影-->

<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Default" />

<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
style="@style/Widget.MaterialComponents.Button"
android:layout_height="wrap_content"
android:text="Default" />


<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon Button"
app:icon="@mipmap/ucenter_diy_explain"
app:iconGravity="textStart"
app:iconSize="24dp"
app:iconPadding="16dp"
app:cornerRadius="40dp"
app:iconTint="#fff"
app:strokeColor="#0F0"
app:strokeWidth="2dp"
app:rippleColor="#00F" />


</LinearLayout>

引用
https://developer.android.google.cn/ android developers