BottomNavigationView - 阴影和涟漪效应

Question

一周前BottomNavigationView发布时,我真的很开心,但是我遇到了一些问题,这使得我无法解决它,就像在BottomNavigationView上看到阴影一样,就像谷歌照片Android应用程序向我们展示的那样:

如果我们点击Google相册菜单项,我们就会看到一个涟漪效果,就像图标和文字颜色(选中时)一样呈蓝色.

仅实施Google提供的解决方案会显示灰色涟漪效果颜色,更糟糕的是,当我们更改bottomnavigationview(design:itemBackground="...")的背景颜色时,它不会显示.

有人知道怎么解决吗？

Answer 1

这是我取得的成就:

涟漪效应+海拔gif

我在GitHub上创建了一个演示来帮助你.

首先使用最新的支持库 compile "com.android.support:design:$SUPPORT_VERSION"

它仅在您设置白色背景颜色时有效 android:background="@android:color/white"

请注意,如果您使用app:itemBackground属性或在您的情况下涟漪效果将消失design:itemBackground="...",所以只需删除它.

<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:background="@android:color/white"
    app:elevation="16dp"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

处理启用/禁用状态:

您需要创建选择器文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:color="@android:color/darker_gray"  />
</selector>

如果你想colorControlHighlight在AppTheme中改变标准的灰色波纹效果改变proproperty,那么它看起来如下:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item>
</style>

使用26%alpha的彩色涟漪.

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryRipple">#423F51B5</color>

Answer 2

1. 对于BottomNavigationView中的阴影使用高程app:elevation="8dp".
2. 而对于涟漪效果你只需要删除app:itemBackground并设置android:background为白色android:background="@android:color/white"

完整示例如下:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:clickable="true"
        app:elevation="8dp"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/my_navigation_items" />

Answer 3

在最新的 Material 设计库中，更改 BottomNavigationView 中项目单击的波纹颜色非常容易。只需在 BottomNavigationView 中添加 app:itemRippleColor="@color/your_color" 即可。这是完整的代码

在build.gradle中添加依赖

build.gradle

implementation "com.google.android.material:material:$materialDesignVersion"

activity_main.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/_5sdp"
        android:background="@drawable/bottom_navigation_background"
        app:itemRippleColor="@color/red"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/bottom_navigation_menu_item_tint"
        app:itemTextColor="@color/bottom_navigation_menu_item_tint"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:menu="@menu/home_bottom_navigation_menu" />

Answer 4

您可能想向按钮添加一个选择器，例如：

android:background="@drawable/my_selector"

/res/drawable/my_selector.xml：

<ripple android:color="@color/my_favourite_color"
    xmlns:android="http://schemas.android.com/apk/res/android" />

阅读更多：RippleDrawable