1). 依赖
implementation "com.android.support:design:28.0.0-alpha3"
2). MaterialButton
![3110861-83f202f56fea4a88.png](https://i-blog.csdnimg.cn/blog_migrate/915e3947ddf288482f1f996356dde355.webp?x-image-process=image/format,png)
图1.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:background="#DDD"
tools:context="com.mazaiting.testdemo.design.MaterialButtonActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--MaterialButton必须设置textAppearance属性-->
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
app:rippleColor="#FF8888"
/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorPrimary"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
app:cornerRadius="10dp"
/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
app:icon="@mipmap/ic_launcher"
app:iconSize="30dp"
/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
app:icon="@mipmap/ic_launcher"
app:iconSize="30dp"
app:iconTint="@color/colorPrimary"
/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Material Button"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
app:icon="@mipmap/ic_launcher"
app:iconSize="30dp"
app:iconTint="@color/colorPrimary"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="2dp"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
注:MaterialButton必须设置textAppearance属性
MaterialButton属性:
属性 | 介绍 |
---|---|
app:backgroundTint | 按钮背景着色 |
app:backgroundTintMode | 按钮背景的着色模式 |
app:icon | 按钮图标(在文字左边,不能设置位置) |
app:iconSize | 按钮图标大小 |
app:iconPadding | 按钮图标的内边距 |
app:iconTint | 按钮图标着色 |
app:iconTintMode | 按钮图标的着色模式 |
app:additionalPaddingStartForIcon | 按钮图标的左内边距 |
app:additionalPaddingEndForIcon | 按钮图标的右内边距 |
app:strokeColor | 按钮边框颜色 |
app:strokeWidth | 按钮边框宽度 |
app:cornerRadius | 按钮圆角角度 |
app:rippleColor | 按钮点击水波纹效果颜色 |
3). Chip
![3110861-db59f7fded3649ba.png](https://i-blog.csdnimg.cn/blog_migrate/957842e6395f4e6f1564c676d2d18b50.webp?x-image-process=image/format,png)
图2.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:background="#DDD"
tools:context="com.mazaiting.testdemo.design.ChipActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<android.support.design.chip.ChipGroup
android:id="@+id/chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:chipSpacing="10dp"
app:singleSelection="false">
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:focusable="true"
android:text="Chip"
android:textAllCaps="false"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:text="水波纹颜色"
android:textAllCaps="false"
app:rippleColor="@color/colorAccent"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:focusable="true"
android:text="图标"
android:textAllCaps="false"
app:chipIcon="@mipmap/ic_launcher"
app:chipIconEnabled="true"
app:chipIconSize="20dp"
app:iconStartPadding="5dp"
/>
<android.support.design.chip.Chip
android:id="@+id/chip_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:focusable="true"
android:text="删除按钮"
android:textAllCaps="false"
app:closeIconEnabled="true"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:focusable="true"
android:text="背景"
android:textAllCaps="false"
app:chipBackgroundColor="@color/colorAccent"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:focusable="true"
android:text="边框"
android:textAllCaps="false"
app:chipStrokeColor="@color/colorAccent"
app:chipStrokeWidth="2dp"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="true"
android:clickable="true"
android:text="圆角角度"
android:textAllCaps="false"
app:chipCornerRadius="10dp"
android:focusable="true"/>
</android.support.design.chip.ChipGroup>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
ChipGroup属性:
属性 | 介绍 |
---|---|
app:chipSpacing | Chip在水平&垂直方向的间距 |
app:chipSpacingHorizontal | Chip在水平方向的间距 |
app:chipSpacingVertical | Chip在垂直方向的间距 |
app:singleLine | 是否单行显示Chip,默认为false |
app:singleSelection | 是否为单选模式,默认为false |
Chip属性:
属性 | 介绍 |
---|---|
app:chipBackgroundColor | Chip背景颜色 |
app:chipCornerRadius | Chip圆角角度 |
app:chipStrokeColor | Chip边框颜色 |
app:chipStrokeWidth | Chip边框宽度 |
app:rippleColor | Chip点击水波纹效果颜色 |
app:chipIconEnabled | 是否在Chip上显示图标,默认为true |
app:chipIcon | Chip图标(在文字左边,不能设置位置) |
app:chipIconSize | Chip图标大小 |
app:closeIconEnabled | 是否显示Chip关闭按钮,默认为false |
app:closeIcon | Chip关闭按钮图标 |
app:closeIconTint | Chip关闭按钮着色 |
app:closeIconSize | Chip关闭按钮大小 |
app:checkedIconEnabled | 是否显示Chip选中图标,默认为true |
app:checkedIcon | Chip选中图标 |
app:chipStartPadding | Chip左内边距 |
app:chipEndPadding | Chip右内边距 |
app:iconStartPadding | Chip图标左内边距 |
app:iconEndPadding | Chip图标右内边距 |
app:textStartPadding | Chip文字左内边距 |
app:textEndPadding | Chip文字右内边距 |
app:closeIconStartPadding | Chip关闭图标左内边距 |
app:closeIconEndPadding | Chip关闭图标右内边距 |
4). MaterialCardView
![3110861-2aa4552227958641.png](https://i-blog.csdnimg.cn/blog_migrate/77f8168336d2603532f34f314a31aa45.webp?x-image-process=image/format,png)
图3.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:background="#DDD"
tools:context="com.mazaiting.testdemo.design.MaterialCardViewActivity">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.card.MaterialCardView
android:layout_margin="20dp"
app:cardBackgroundColor="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:layout_gravity="center"
android:text="Material CardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.design.card.MaterialCardView>
<android.support.design.card.MaterialCardView
android:layout_margin="20dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:layout_gravity="center"
android:text="Material CardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.design.card.MaterialCardView>
<android.support.design.card.MaterialCardView
android:layout_margin="20dp"
app:strokeColor="@color/colorAccent"
app:strokeWidth="5dp"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:text="Material CardView"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.design.card.MaterialCardView>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
MaterialCardView属性:
属性 | 介绍 |
---|---|
app:strokeColor | MaterialCardView边框颜色 |
app:strokeWidth | MaterialCardView边框宽度 |
5). BottomAppBar
![3110861-498a2558491ee49c.png](https://i-blog.csdnimg.cn/blog_migrate/506dddd8553968d894264751225e8687.webp?x-image-process=image/format,png)
图4.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context="com.mazaiting.testdemo.design.BottomAppBarActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:src="@mipmap/ic_launcher"
app:fabSize="normal"
app:layout_anchor="@id/bottom_app_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="end"
app:fabAttached="true"
android:layout_width="match_parent"
android:layout_height="50dp"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
BottomAppBar属性:
属性 | 介绍 |
---|---|
app:backgroundTint | BottomAppBar背景着色 |
app:fabAlignmentMode | FAB位置(居中或居右),默认为居右 |
app:fabAttached | 是否绑定FAB,默认为true |
app:fabCradleMargin | BottomAppBar与FAB的距离,默认为5dp |
app:fabCradleRoundedCornerRadius | BottomAppBar与FAB相邻处的圆角角度,默认为8dp |
app:fabCradleVerticalOffset | FAB在BottomAppBar中的垂直偏移量,默认为0dp |