- 按规矩先上效果图
- 资源引入
implementation 'com.google.android.material:material:1.4.0'
- 关键属性
| 属性 | 描述 |
|---|---|
| app:backgroundTint | 背景着色 |
| app:backgroundTintMode | 着色模式 |
| app:strokeColor | 描边颜色 |
| app:strokeWidth | 描边宽度 |
| app:cornerRadius | 圆角大小 |
| app:rippleColor | 按压水波纹颜色 |
| app:icon | 图标icon |
| app:iconSize | 图标大小 |
| app:iconGravity | 图标摆放位置 |
| app:iconTint | 图标着色 |
| app:iconTintMode | 图标着色模式 |
| app:iconPadding | 图标和文本之间的间距 |
-
注意事项
-
设置按钮背景 使用app:backgroundTint
-
细心的老哥肯定发现Button 普通按钮 与MaterialButton 效果一样,这是因为在AndroidManifest.xml中application标签设置了theme属性
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.MaterialDesignerDemo"
tools:targetApi="31">
<style name="Theme.MaterialDesignerDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
-
为什么使用MaterialButton ?
因为它可以帮助我们减少drawable文件 -
上布局文件源代码
<?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"
tools:context=".MainActivity">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="AppCompatButton 普通按钮" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 普通按钮" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MaterialButton 扁平按钮" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MaterialButton 前置icon"
app:icon="@drawable/ic_launcher_foreground"
app:iconSize="20dp" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MaterialButton 前置icon"
app:icon="@drawable/ic_launcher_foreground"
app:iconGravity="textEnd"
app:iconSize="20dp" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MaterialButton 描边扁平按钮"
app:strokeColor="@color/black"
app:strokeWidth="5dp"/>
</LinearLayout>
