一:导包
implementation 'com.google.android.material:material:1.0.0'
二:App主题
当APP的主题是Theme.AppCompat系列时是不能使用com.google.android.material.button.MaterialButton控件的,否则汇报一个异常:
Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).
at com.google.android.material.internal.ThemeEnforcement.checkTextAppearance(ThemeEnforcement.java:170)
意思是APP的主题只能使用继承自Theme.MaterialComponents系列的,其实给对应的Activity添加也是没有问题的。
android:theme="@style/Theme.MaterialComponents.Light"
三:使用
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Disable" />
<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
style="@style/Widget.MaterialComponents.Button.TextButton"
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="@drawable/ic_camera" />
</LinearLayout>
- 其中按钮的填充色是由<item name="colorPrimary">@color/colorPrimary</item>决定的,如果同时给定了<item name="colorAccent">@color/colorAccent</item>那么按钮的填充色会是colorAccent;对于没有填充色的按钮,colorPrimary决定了他的文字颜色,如果同时给定了colorAccent颜色,那么文字的颜色会是colorAccent。
- 按钮按下周围会有一圈的阴影,该阴影延伸到了按钮的边界之外,所以包裹按钮的ViewGroup应该设置android:clipToPadding=“false”,以防按钮阴影被父边界剪裁掉。
四:样式
一:默认样式style="@style/Widget.MaterialComponents.Button":有填充色、有阴影;
<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" />
二:style="@style/Widget.MaterialComponents.Button.UnelevatedButton":有填充色、没有阴影;
<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" />
三:style="@style/Widget.MaterialComponents.Button.OutlinedButton":透明背景、彩色文字、有轮廓,没有阴影;
<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" />
四:style="@style/Widget.MaterialComponents.Button.TextButton":透明背景、彩色文字、没有轮廓,没有阴影;
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextButton" />
五:style="@style/Widget.MaterialComponents.Button.Icon":有填充色、有阴影、有一个小图标;
<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="@drawable/ic_camera" />
五:特有属性
<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="@drawable/ic_camera"
app:iconGravity="textStart"
app:iconSize="24dp"
app:iconPadding="16dp"
app:cornerRadius="40dp"
app:iconTint="#0F0"
app:strokeColor="#0F0"
app:strokeWidth="2dp"
app:rippleColor="#00F"/>
- app:icon="@drawable/ic_camera" 图标
- app:iconGravity="textStart" 图标的位置
- app:iconSize="24dp" 图标的大小
- app:iconPadding="16dp" 图标与文字的距离
- app:cornerRadius="40dp" 按钮圆角半径
- app:iconTint="#0F0" 图标着色
- app:strokeColor="#0F0" 轮廓的颜色
- app:strokeWidth="2dp" 轮廓的线宽
-
app:rippleColor="#00F" 按压水波纹的颜色