BottomNavigationView shows black strips

I created an app and I tested it many times in android emulators.

I created a BottomNavigationView which looks as follow in multiple phones I tested:

However, when I run it on other devices it looks as follows with these black lines above and under the BottomNavigationView:

The devices I tried them on are Samsung and Xiaomi. I just want to mention that on some devices it works well and on some not. Seems like on large phones it makes it.

The xml code is:

<com.google.android.material.bottomnavigation.BottomNavigationView     android:id="@+id/bottom_navigation"     android:layout_width="match_parent"     android:layout_height="0dp"     app:itemBackground="@color/colorWhite"     app:itemIconTint="@drawable/btm_nav"     app:itemTextColor="@drawable/btm_nav"     app:layout_constraintBottom_toBottomOf="parent"     app:layout_constraintHeight_percent="0.08"     app:layout_constraintStart_toStartOf="parent"     app:menu="@menu/menu_btm_nav" /> 

The Menu:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto">      <item         android:id="@+id/nav_home"         android:enabled="true"         app:showAsAction="ifRoom"         android:title="@string/MenuNav_Home"         android:icon="@drawable/ic_general_home"/>      <item         android:id="@+id/nav_search"         android:enabled="true"         app:showAsAction="ifRoom"         android:title="@string/MenuNav_Search"         android:icon="@drawable/ic_search" />      <item         android:id="@+id/nav_profile"         android:enabled="true"         app:showAsAction="ifRoom"         android:title="@string/MenuNav_Profile"         android:icon="@drawable/ic_general_profile"/> </menu> 

and

<?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/colorLightPurple" />     <item android:state_checked="false" android:color="@color/colorGray"  /> </selector> 

Any ideas why these black lines appear?

Also when I increased the padding it increased the black line in the emulator but even with 0dp it shows the line.

Thank you

Tried to use the following edits:

<com.google.android.material.bottomnavigation.BottomNavigationView     android:id="@+id/bottom_navigation"     android:layout_width="match_parent"     android:layout_height="0dp"     app:itemBackground="@drawable/btm_nav_background"     app:itemIconTint="@color/colorLightPurple"     app:itemTextColor="@color/colorLightPurple"     app:layout_constraintBottom_toBottomOf="parent"     app:layout_constraintHeight_percent="0.08"     app:layout_constraintStart_toStartOf="parent"     app:menu="@menu/menu_btm_nav" />  <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@color/colorWhite" android:state_checked="true"/>     <item android:drawable="@color/colorWhite" android:state_checked="false"/> </selector> 

However, it was the same.

SOLUTION:

adding android:background="@color/colorWhite" solved the problem…