一：导包

implementation 'com.google.android.material:material:1.0.0'

二：App主题

android:theme="@style/Theme.MaterialComponents.Light"

三：基本使用

代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="6dp"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="6dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:menu="@menu/menu"
        app:navigationIcon="@drawable/ic_edit_black_24dp">

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:src="@drawable/ic_edit_black_24dp"
        app:layout_anchor="@+id/bottom_app_bar"
        app:layout_anchorGravity="center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果

Image.png

四：属性解释

style="@style/Widget.MaterialComponents.BottomAppBar.Colored"

跟随主题颜色的Style；

style="@style/Widget.MaterialComponents.BottomAppBar"

没有颜色的Style。

app:fabAlignmentMode="center"

FloatingActionButton位于中间

app:fabCradleMargin="6dp"

与FloatingActionButton的外边距

app:fabCradleRoundedCornerRadius="10dp"

BottomAppBar嵌入位置圆角半径

app:menu="@menu/menu"

给BottomAppBar添加一个Menu

app:backgroundTint="#FFFF00"

背景着色

app:fabCradleVerticalOffset="8dp"

缺口垂直方向的偏移量

五：三角形缺口

需求：实现下图效果

Demo_image.png

需要给BottomAppBar设置一个TriangleEdgeTreatment（默认情况下是BottomAppBarTopEdgeTreatment），写法如下：

BottomAppBar mBottomAppBar = findViewById(R.id.bottom_app_bar);
        float size = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, getResources().getDisplayMetrics());
        TriangleEdgeTreatment triangleEdgeTreatment = new TriangleEdgeTreatment(size, true);
        ShapePathModel shapePathModel = new ShapePathModel();
        shapePathModel.setTopEdge(triangleEdgeTreatment);
        MaterialShapeDrawable materialShapeDrawable = new MaterialShapeDrawable(shapePathModel);
        materialShapeDrawable.setTint(0XFFDDDDDD);
        mBottomAppBar.setBackground(materialShapeDrawable);

Image.png

六：结合RecyclerView实现滚动消失

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

    </androidx.recyclerview.widget.RecyclerView>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="6dp"
        app:hideOnScroll="true"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:menu="@menu/menu"
        app:navigationIcon="@drawable/ic_edit_black_24dp">

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:src="@drawable/ic_edit_black_24dp"
        app:layout_anchor="@+id/bottom_app_bar"
        app:layout_anchorGravity="center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

只需要在BottomAppBar里面添加app:hideOnScroll="true"就可以了

scroll.gif