BottomNavigationView внутри BottomAppBar с прозрачным фоном

Question

Я комбинирую новый (безумный) 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, в которой он устанавливает оттенок MaterialShapeDrawableBackgroundв качестве фона, если background имеет значение null или ColorDrawable... и когда вы устанавливаете цвет в 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, который не является ни нулевым, ни ColorDrawable. Я создал свой собственный чертеж, который представляет собой просто прозрачный прямоугольник, и установил его как фон 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>

А теперь обновленный xml BottomNavigationView:

        <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"/>