如何将高度设置为底部导航？

Question

因此，通过 support V25，我们有了一个名为 Bottom navigation 的新组件。

遵循设计指南，底部导航的 elevation 应该是 8dp (https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs)。

但我无法将 elevation 设置为它。

任何建议和示例都将不胜感激。谢谢！

更新的 XML 代码

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:elevation="8dp"
    app:elevation="8dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_nav_color_state"
    app:itemTextColor="@drawable/bottom_nav_color_state"
    app:menu="@menu/bottom_navigation_main"/>

<FrameLayout
    android:id="@+id/contentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_navigation"
    android:background="#EDEDED"/>

- Banana droid

---

请发布包含底部导航的XML代码。 - Gopal

请查看此链接和此链接。第一个链接来自Google Code上的Android问题报告，第二个链接是Stack Overflow上的一个提问，与BottomNavigationView控件相关，包括阴影效果和水波纹效果。 - Gopal

尝试这种方法：https://dev59.com/QVgR5IYBdhLWcg3wJ6tw#41651284 - Alexander Bilchuk

@AlexanderBilchuk，它不会在其他视图的顶部投射阴影。 - Banana droid

@gopal_patil，已更新至25.1.0版本，将app:itemBackground替换为android:background，但仍无法投射阴影。 - Banana droid

Answer 1

目前 (25.1.0)，我们需要将 BNV 的 android:background 设置为 @android:color/white 才能显示阴影。如果设置为其他颜色（例如您的主要颜色），则不会显示阴影。

- Banana droid

---

确认解决方案。重要的（也是奇怪的）部分是必须是白色（来自安卓资源或“自定义” - 但如果它必须是白色，那么并不那么自定义...）。不能与黑色和其他任何颜色一起使用... - snachmsm

在这种情况下，如果要使用 app:elevation，它会在导航视图底部添加一些阴影。如果我想在导航视图顶部添加阴影，我该怎么做？@NamNguyễn - inverted_index

今天尝试了一下 - 任何颜色都可以，但是要添加阴影，仍然需要设置android:background。 - Penzzz

Answer 2

我遇到了同样的问题，但是采用OP建议的@android:color/white 对于我的情况不可接受。因此，由于我们无法通过提高和自定义背景来获得阴影，我们需要进行一些技巧性处理。

我的方法是在FrameLayout内添加一个阴影视图来“模拟”阴影。

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:elevation="8dp"
    app:elevation="8dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_nav_color_state"
    app:itemTextColor="@drawable/bottom_nav_color_state"
    app:menu="@menu/bottom_navigation_main"/>

<FrameLayout
    android:id="@+id/contentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_navigation"
    android:background="#EDEDED"/>

    <some.kind.of.pager.or.other.content.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <View
        android:id="@+id/shadow_view"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="bottom"
        android:background="@drawable/shadow_gradient" />

</FrameLayout>

这里的阴影视图背景其实是一个形状渐变，它被放置在所有其他视图之上，紧贴底部导航栏视图，类似于下面的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@android:color/transparent"
        android:startColor="#8f000000" />
</shape>

希望这能帮到一些人。

- bko

Answer 3

Android Material Components 1.1.0（alpha）版本已根据此提交修复了海拔问题：this commit。如果您想知道如何添加新的依赖项，请参考以下内容：

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha02'
    // ...
}

此处 提供更多关于入门的信息，此处提供有关版本发布的信息。

祝好！

- J-me

---

我该如何使用它？ - Jacob Sánchez

清单合并失败：属性application@appComponentFactory的值=(android.support.v4.app.CoreComponentFactory)来自[com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91，也存在于[androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86中，值为(androidx.core.app.CoreComponentFactory)。 - Jacob Sánchez

我遇到了这个错误。老实说，我不喜欢折腾Gradle，因为它很麻烦。 - Jacob Sánchez

这个提交涉及到“BottomAppBar”，这是一个完全不同的组件。原帖作者正在询问“BottomNavigationView”。在回答前请仔细阅读问题。 - Javad