在底部导航栏图标周围创建一个椭圆形 - Android

Question

I am trying to create an oval shape around my bottom navigation icon when selected as seen in the screenshot

bottom_nav_layout.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav_view"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:elevation="0dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:theme="@style/Widget.BottomNavigationView"
    app:itemIconSize="20dp"
    app:itemIconTint="@color/bottom_nav_color"
    app:itemTextColor="@color/bottom_nav_color"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu" />

bottom_nav_color.xml

  <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:color="#3375BB" />
  <item android:state_checked="false" android:color="#68788D"/>
 </selector>

bottom_nav_menu.xml

  <?xml version="1.0" encoding="utf-8"?>
  <menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
     android:id="@+id/navigation_home"
     android:icon="@drawable/ic_trustwallet"
     android:title="Wallet" />
   <item
    android:id="@+id/navigation_discover"
    android:icon="@drawable/ic_discover"
    android:title="Discover" />
  <item
    android:id="@+id/navigation_browser"
    android:icon="@drawable/ic_browser"
    android:title="Browser" />
  <item
    android:id="@+id/navigation_settings"
    android:icon="@drawable/ic_paper_settings"
    android:title="Settings" />


  </menu>

Answer 1

Use a M3 theme in your app:

<style name="AppTheme" parent="Theme.Material3.DayNight">

Then in your layout:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.App.BottomNavigationView"

with:

<style name="ThemeOverlay.App.BottomNavigationView" parent="">
    <item name="colorSurface">#d1e4ff</item>
    <item name="colorSecondaryContainer">#0061a3</item>
</style>