How to fix press effect BottomNavigation become invisible using ripple - AndroidX

Question

I use background=ripple to make press effect in BottomNavigation, but in my case, MyBottomNavigation color is dark so it's seem became invisible due the ripple effect color is grey, is there another way to fix that?

//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 (Effect for press)

<?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>

//UPDATED

//Activity.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 (I put it in 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 (I put it in res/drawable)(The color still invisible if I use black color in shape.xml, so I try using purple color but it still grey)

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

Answer 1

Until recently, the issue could be resolved by applying "@android:color/transparent" to either "app:itemBackground" or "app:itemRippleColor".

However, it seems there have been changes to the BottomNavigation styling, and the previous method no longer works. The solution I found is to apply a transparent color to "app:itemActiveIndicatorStyle".

<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemActiveIndicatorStyle="@android:color/transparent" 
...
/>

Answer 2

Use android:background only for the shape and app:itemRippleColor to define the ripple on the item:

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

where shape.xml is:

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

and bottomnav_ripple.xml something like:

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

Change the color and the alpha channel as you prefer.