Fill the icons in bottomNavigation

Question

I use bottomNavigation.

I wanna fill the icon with the color "not the outside of the icon" when selected. How can I do that?

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:paddingTop="2dp"
    android:background="#FFFFFF"
    android:theme="@style/BottomNavigationTextStyle"
    app:labelVisibilityMode="labeled"
    app:itemIconSize="24dp"
    android:layout_alignParentBottom="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:menu="@menu/buttom_navigation_menu">

</com.google.android.material.bottomnavigation.BottomNavigationView>

score 0 · Answer 1 · answered Jun 30 '20 at 08:45

0

Use the itemIconTint attribute:

<com.google.android.material.bottomnavigation.BottomNavigationView
   app:itemIconTint="@color/my_selector"
   ..>

and define a selector like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="1.0" android:color="..." android:state_checked="true"/>
  <item android:alpha="0.6" android:color="..."/>
</selector>

answered Jun 30 '20 at 08:45

Gabriele Mariotti

320,139
94
887
841

Thank you for your answer, Unfortunately, it did not work as required, I want it to be like icons on Instagram, so when the user selects icon it filling. – Moataz Jun 30 '20 at 09:13

score 0 · Answer 2 · answered Jun 30 '20 at 09:24

Use custom made images as per your requirement. You would need to add 2 images one for the active state and for deactive state.

Create a selector home_icon_selector.xml for your icon

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/your_active_icon_here" android:state_selected="true" />
    <item android:drawable="@drawable/your_active_icon_here" android:state_pressed="true" />
    <item android:drawable="@drawable/your_active_icon_here" android:state_checked="true" />
    <item android:drawable="@drawable/your_deactive_icon_here" />
</selector>

Update your menu buttom_navigation_menu to use the selector above

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_home"
        android:enabled="true"
        android:icon="@drawable/home_icon_selector"
        android:title="@string/tab_title_home"/>
</menu>

Fill the icons in bottomNavigation

2 Answers2