Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom icons - Bottom Navigation View

I have a BottomNavigationView and want to have custom icons for both selected and unselected state.Tried using selector but its not working.

Any idea how to place custom icons ?

Edit - Adding code from comments into the Question

<item 
    android:id="@+id/navigation_card" 
    android:icon="@drawable/iv_home_card" 
    app:itemBackground="@drawable/navigation_card" 
    app:showAsAction="ifRoom" tools:ignore="MenuTitle" 
/>

Like this I have added the icon. Now for selected state, it stroke it with theme color but I want to replace the icon with another icon.

I tried making selector but did not work

<selector 
    xmlns:android="schemas.android.com/apk/res/android"> 

    <item android:state_checked="false" 
        android:drawable="@drawable/btn_star_off_normal" /> 

    <item android:state_checked="true" 
        android:drawable="@drawable/btn_star_on_normal" /> 
</selector>
BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { 
    @Override 
    public boolean onNavigationItemSelected(@NonNull MenuItem item) { 
        switch (item.getItemId()) { } 
        return false; 
    } 
};
like image 606
Anita Avatar asked Dec 06 '25 23:12

Anita


1 Answers

You can simply create drawable selector in drawable folder and image can be change according to the state of the widget used in view

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home_active" android:state_checked="true"/>
<item android:drawable="@drawable/home_inactive" android:state_checked="false"/>

and set this selector in bottom nav menu file

<item
    android:id="@+id/navigation_home"
    android:icon="@drawable/nav_home_selector"
    android:title="@string/tab_home_title" />

Make sure to add this line to your java file. This solution will not work for selected icon unless you add this line.

bottomNavigationView.setItemIconTintList(null);

This will disable tint effect of selected item icon.

like image 103
user2881604 Avatar answered Dec 08 '25 14:12

user2881604



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!