具有透明背景的 BottomAppBar 内的 BottomNavigationView

Question

我一直在将新的（ish）Material BottomAppBar 与标准的 BottomNavigationView 结合起来。我的xml是这样的：

      <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:fabAlignmentMode="center">

        <com.google.android.material.bottomnavigation.BottomNavigationView
          android:id="@+id/bottom_navigation"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginStart="0dp"
          android:layout_marginEnd="0dp"
          android:background="@android:color/transparent"
          app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active"
          app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText"
          app:labelVisibilityMode="labeled"
          app:menu="@menu/bottom_nav_menu" />

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

在以前的版本 - 1.0.0 - 这工作正常，我仍然可以按预期看到 FAB 插图。唯一的小缺点是这个版本的材质组件库没有对底部应用栏的高度效果进行排序，所以栏和上面的内容之间的区别不是很清楚。

当我升级到最新的库时，我相信在撰写本文时是

implementation 'com.google.android.material:material:1.1.0-alpha09'

，我得到了 BottomAppBar 提升效果，但是当我将透明背景应用于 BottomNavigationView 时，我得到了一个非常奇怪的视觉效果，对于我的生活我无法理解。

如果我去掉透明背景色，效果就没有了，但是我失去了 FAB 插图，如下所示：

如果我完全删除底部导航视图子项，而只有 BottomAppBar，我会看到正常的视觉效果，但没有我的导航：

我喜欢： - 一个很好的解决方案，将底部导航视图合并到 BottomAppBar 中，同时保留 1.1.0 版库良好的提升效果，并且在其中有效地包含 BottomNavigationView，因此我保留了该导航组件的所有优点 - 或者解释到底是什么导致了这种奇特的第一海拔效应，最好是解决它的方法

Answer 1

好吧，这个和BottomAppBar没关系。。。后台问题发生在BottomNavigationView不管在什么地方，素材库1.1.0- ....

这是（我认为）最新版本的 BottomNavigationView 的一个错误，如果背景为 null 或 ColorDrawable，它将设置一个可着色的

MaterialShapeDrawableBackground

作为其背景...并且当您在 xml 中设置颜色时，它将 是一个 ColorDrawable（包括透明）。这是 BottomNavigationView 代码中的问题：

    if (getBackground() == null || getBackground() instanceof ColorDrawable) {
      // Add a MaterialShapeDrawable as background that supports tinting in every API level.
      ViewCompat.setBackground(this, createMaterialShapeDrawableBackground(context));
    }

这一定是你在上面看到的随机阴影形状。

解决方案

解决方法是在 xml 中设置既不是 null 也不是 ColorDrawable 的背景。我创建了自己的 drawable，它只是一个透明的矩形，并将其设置为 BottomNavigationView 背景，它就可以工作了。

background_transparent.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle" >

  <solid android:color="#00000000" />

</shape>

现在更新的 BottomNavigationView xml：

        <com.google.android.material.bottomnavigation.BottomNavigationView
          android:id="@+id/bottom_navigation"
          style="@style/BottomNav"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginStart="0dp"
          android:layout_marginEnd="0dp"
          android:background="@drawable/background_transparent"
          app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active"
          app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText"
          app:labelVisibilityMode="labeled"
          app:menu="@menu/bottom_nav_menu" />

结果：

Answer 2

我遇到了同样的问题，对我来说最简单的一行修复是将 outlineSpotShadowColor 更改为透明。

解决方案...

在您的 xml 文件中，将其添加到 BottomNavigationView

outlineSpotShadowColor = "@android:color/transparent"

完整的例子：-

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bottomNavigationView"
            android:layout_marginEnd="20dp"
            app:labelVisibilityMode="labeled"
            android:background="@android:color/transparent"
            android:outlineSpotShadowColor="@color/zxing_transparent"
            app:menu="@menu/bottom_menu"/>