How do you modify the color of a highlighted Menu Item?

24 Views Asked by At

I want to change the color of elements within a Bottom Navigation View when they are selected, not the color of the Icons or the text but the "bubble" that appears behind a selected element.

Here is my code:

  • layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Profile">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:itemBackground="@color/plusRepBackground"
        app:itemTextColor="@drawable/selector"
        app:itemIconTint="@drawable/selector"
        app:menu="@menu/menu"
        app:labelVisibilityMode="selected"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>
  • drawable/selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_selected="true"
        android:color="@color/plusRepPurple"/>

    <item
        android:state_selected="false"
        android:color="@android:color/white"/>

</selector>
  • values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="plusRepPurple">#FF545C9F</color>
    <color name="plusRepBackground">#FF1A1D24</color>

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

    <item
        android:id="@+id/profileButton"
        android:icon="@drawable/ic_person"
        android:title="My Profile" />
    <item
        android:id="@+id/forumButton"
        android:icon="@drawable/ic_forum"
        android:title="Forum" />
    <item
        android:id="@+id/contactsButton"
        android:icon="@drawable/ic_contacts"
        android:title="Contacts" />
    <item
        android:id="@+id/settingsButton"
        android:icon="@drawable/ic_settings"
        android:title="Settings" />
</menu>

I have tried to search the material 3 documentation but I didn't find anything I could use.

0

There are 0 best solutions below