如何实现新材料BottomAppBar为BottomNavigationView

Question

我试图实施新BottomAppBar通常是这样的：material BottomAppBar像在谷歌主页的应用程序，看起来像一个this BottomNavigationView。

我的问题是，因为我只能用一个菜单资源填充BottomAppBar，我不明白如何使我的按钮看起来像一个BottomNavigationView（但与“切”为的Fab按钮），而不是对准一切一面的BottomAppBar。

如何添加这种新材料BottomAppBar内自定义布局？

或者相反，有没有什么办法来实现与“切”为与Fab按钮（保持凉爽默认的动画像新BottomAppBar）一BottomNavigationView？

Answer 1

解决了

基本上，而不是试图迫使菜单的资源，我需要的布局，我用这个方法，而不是，我只是把使用“空”元素作为@dglozano建议BottomAppBar内的LinearLayout。

使用?attr/selectableItemBackgroundBorderless我也能做到这一点实在是类似于BottomNavigationView的效果。

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="5"
        android:paddingEnd="16dp">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:tint="@color/secondary_text"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

Answer 2

1 - 在build.gradle你的资料库包含的Maven

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2 - 你build.gradle.地方材料组件的依赖记住的材料版本定期更新。

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

3 - 设置compileSdkVersion，并targetSdkVersion最新的API版本的Android靶向P上是28。

4 - 确保您的应用继承Theme.MaterialComponents主题，以使BottomAppBar使用最新的款式。另外，您可以布局xml文件内声明样式BottomAppBar在小部件声明如下。

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

5 - 您可以包括BottomAppBar在你的布局如下。 BottomAppBar必须CoordinatorLayout的孩子。

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

在FAB的layout_anchor属性： - 6您可以通过指定BottomAppBar的ID在应用锚浮动操作按钮（FAB）到BottomAppBar。 BottomAppBar可以具有成形背景摇篮FAB或FAB可以重叠BottomAppBar。

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

7 - 有你可以用它来配置底部导航栏和图标的Fab许多属性。

8 - Check this medium post for a more complete explanation.

---

更新：检查the OP answer for the final solution for his particular problem.

Answer 3

将bottomAppBar透明背景的bottomNavigationView下。并添加空菜单项menu.xml文件，为FAB的自由空间。

XML：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/lt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">


<ViewPager
    android:id="@+id/main_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="56dp"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentStart="true" />


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true"
    android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

<com.google.android.material.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_bar"
    android:layout_gravity="bottom"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_bar"/>

Result