[BottomNavigationView] Ripple Effect Not Working properly

[jeevansurendran]

Description: I have implemented bottom navigation view as specified by the material.io website. It all seems fine, except that the ripple effect is not seen in the image or the image blocks the expected ripple view animation.

Expected behavior: The ripple effect shoudnt be blocked by the image

Source code:
bottom_navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/movie_discover_item"
        android:icon="@drawable/movie_home"
        android:title="@string/movie_home" />
    <item android:id="@+id/movie_search_item"
        android:icon="@drawable/movie_search"
        android:title = "@string/movie_search"/>
    <item
        android:id="@+id/movie_saved_item"
        android:icon="@drawable/movie_saved"
        android:title="@string/movie_saved"/>
    <item
        android:id="@+id/movie_update_item"
        android:icon="@drawable/movie_update"
        android:title="@string/updates"/>

</menu>

activity_main.xml

  <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottom_navigation"
       android:theme="@style/Widget.MaterialComponents.BottomNavigationView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:labelVisibilityMode="labeled"
       android:layout_gravity="bottom"
       app:layout_constraintBottom_toBottomOf="parent"
       app:menu="@menu/bottom_navigation_menu" />

Example vector field

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="26.4"
    android:viewportHeight="26.4"
    android:tint="#FF80FD"
    android:alpha="0.8">
  <group android:translateX="1.2"
      android:translateY="1.2">
      <path
          android:fillColor="#FF000000"
          android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
  </group>
</vector>

Also I have included the required .png files for the images

Android API version: 29

**Material Library version:**1.2.0-alpha03

Device: Pixel 2 XL(Emulator) and Redmi K20 pro

[jedi1150]

try to replace <item name="android:background"></item> with <item name="android:windowBackground"></item> in your styles.xml

[afohrman]

This is happening because the style is not being set properly. When setting a style directly on a component, you should set the style= attribute rather than android:theme, which is used for setting theme overlays on portions of a layout hierarchy. In this case, you'd want style="@style/Widget.MaterialComponents.BottomNavigationView".

You also may want to consider whether you need to set the style directly on the BottomNavigationView. If you're using Theme.MaterialComponents or a variant of the MDC theme, the style will be set on all BottomNavigationViews by default.