首页 > 解决方案 > 如何使用波纹修复按下效果BottomNavigation变得不可见 - AndroidX

问题描述

我使用 background=ripple 在 BottomNavigation 中制作新闻效果,但在我的情况下,MyBottomNavigation 颜色很暗,因此由于波纹效果颜色为灰色,它似乎变得不可见,还有其他方法可以解决这个问题吗?

//MainActivity.java

//BottomNavigation
    BottomNavigationView mBottomNav = findViewById(R.id.Bottom_Navigation);

    mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            Fragment selectedFragment = null;

            switch(menuItem.getItemId()){
                case R.id.Nav_Home:
                    selectedFragment = new HomePageFragment();
                    break;

                /*case R.id.Nav_Favorites:
                selectedFragment = new FavoritesPageFragment();
                    break;*/

                /*case R.id.Nav_Favorites:
                    selectedFragment = new SettingPageFragment();
                    break;*/

                case R.id.Nav_Follow:
                    selectedFragment = new FollowPageFragment();
                    break;

                /*case R.id.Nav_Chat:
                    selectedFragment = new ChatPageFragment();
                    break;*/

                case R.id.Nav_Profile:
                    selectedFragment = new ProfilePageFragment();
                    break;
            }

            getSupportFragmentManager().beginTransaction().replace(R.id.Fragment_Container, selectedFragment).commit();
            return true;
        }


    });


    mBottomNav.setItemIconTintList(null);

//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:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"
    android:backgroundTint="@color/colorBlack"
    android:background="@drawable/ripple_effect_raised"
    app:itemIconTint="#ffffff"
    app:itemTextAppearanceActive="@style/navTextActive"
    app:itemTextAppearanceInactive="@style/navTextInactive"

    app:itemTextColor="#ff0000"/>

//Ripple.xml(按效果)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorWhite">

<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/black" />
        <corners android:radius="7dp" />

    </shape>
</item>

//更新

//活动.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/Bottom_Navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"

    app:itemTextAppearanceActive="@style/navTextActive"
    app:itemTextAppearanceInactive="@style/navTextInactive"
    app:itemIconTint="#ffffff"
    app:itemTextColor="#FFFFFF"

    android:background="@drawable/shape"
    app:itemRippleColor="@color/bottomnav_ripple"
    />

//bottomnav_ripple.xml(我把它放在 res/color 中)

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Selected. -->

<item android:alpha="0.68" android:color="#21FFFF" android:state_pressed="true" android:state_selected="true"/>
<item android:alpha="0.66" android:color="#21FFFF" android:state_focused="true" android:state_hovered="true" android:state_selected="true"/>
<item android:alpha="0.62" android:color="#21FFFF" android:state_focused="true" android:state_selected="true"/>
<item android:alpha="0.54" android:color="#21FFFF" android:state_hovered="true" android:state_selected="true"/>
<item android:alpha="0.50" android:color="#21FFFF" android:state_selected="true"/>

<!-- Unselected. -->

<item android:alpha="0.68" android:color="#FFFFFF" android:state_pressed="true"/>
<item android:alpha="0.66" android:color="#FFFFFF" android:state_focused="true" android:state_hovered="true"/>
<item android:alpha="0.62" android:color="#FFFFFF" android:state_focused="true"/>
<item android:alpha="0.54" android:color="#FFFFFF" android:state_hovered="true"/>
<item android:alpha="0.50" android:color="#FFFFFF"/>

//shape.xml(我把它放在res/drawable中)(如果我在shape.xml中使用黑色,颜色仍然不可见,所以我尝试使用紫色但它仍然是灰色的)

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
<solid android:color="@android:color/holo_purple" />
<corners android:radius="7dp" />
</shape>

它仍然是灰色的

标签: javaandroidbottomnavigationviewmaterial-componentsmaterial-components-android

解决方案


仅用于android:background形状并app:itemRippleColor定义项目上的波纹:

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:background="@drawable/shape"
      app:itemRippleColor="@color/bottomnav_ripple"
      ../>

哪里shape.xml是:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@android:color/black" />
  <corners android:radius="7dp" />
</shape>

bottomnav_ripple.xml类似的东西:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Selected. -->

<item android:alpha="0.68" android:color="#21FFFF" android:state_pressed="true" android:state_selected="true"/>
<item android:alpha="0.66" android:color="#21FFFF" android:state_focused="true" android:state_hovered="true" android:state_selected="true"/>
<item android:alpha="0.62" android:color="#21FFFF" android:state_focused="true" android:state_selected="true"/>
<item android:alpha="0.54" android:color="#21FFFF" android:state_hovered="true" android:state_selected="true"/>
<item android:alpha="0.50" android:color="#21FFFF" android:state_selected="true"/>

    <!-- Unselected. -->

<item android:alpha="0.68" android:color="#FFFFFF" android:state_pressed="true"/>
<item android:alpha="0.66" android:color="#FFFFFF" android:state_focused="true" android:state_hovered="true"/>
<item android:alpha="0.62" android:color="#FFFFFF" android:state_focused="true"/>
<item android:alpha="0.54" android:color="#FFFFFF" android:state_hovered="true"/>
<item android:alpha="0.50" android:color="#FFFFFF"/>

</selector>

根据需要更改颜色和 Alpha 通道。

在此处输入图像描述


推荐阅读