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