Android: bottom navigation view - change icon for selected item

Question

I added BottomNavigationView in my application.

main.xml

 <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:itemBackground="@color/colorPrimary" app:itemIconTint="@color/white" app:itemTextColor="@color/white" app:menu="@menu/bottom_navigation_main" /> 

bottom_navigation_main.xml

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_favorites" android:enabled="true" android:icon="@drawable/ic_favorite_white_24dp" android:title="@string/text_favorites" app:showAsAction="ifRoom" /> <item android:id="@+id/action_schedules" android:enabled="true" android:icon="@drawable/ic_access_time_white_24dp" android:title="@string/text_schedules" app:showAsAction="ifRoom" /> <item android:id="@+id/action_music" android:enabled="true" android:icon="@drawable/ic_audiotrack_white_24dp" android:title="@string/text_music" app:showAsAction="ifRoom" /> </menu> 

Click MainActivity

 bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_favorites: //need change icon of favotites here. case R.id.action_schedules: case R.id.action_music: } return true; } }); 

I want to change the bottom navigation icon of the selected position. How can we achieve this function when the user clicks on one item?

(if the user clicked one item, the icon will change to another)

Answer 1

You need to reset the onclick icon, and then in the case of a switch, you need to install only the one you need to change, so only when you select the icon.

 Menu menu = bottomNavigationView.getMenu(); menu.findItem(R.id.action_favorites).setIcon(favDrawable); switch (item.getItemId()) { case R.id.action_favorites: item.setIcon(favDrawableSelected); case R.id.action_schedules: case R.id.action_music: } 

Answer 2

You can simply create a portable selector in a drawable folder, and the image can be resized according to the state of the widget used in the view

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

Answer 3

If the above solutions do not work for you, to change the icon of the selected item, add the following lines to your code:

 bottomNavigationView.setItemIconTintList(null); 

This will turn off the hue effect of the selected item.

I had the same problem. I added a selector that can be used to change the icon of the BottomNavigationView element when it is installed / selected.

Answer 4

Well, I wanted to understand how to make each element have its own image, and with some confusion in the comments about where it should go, I wanted to print this answer.

First create your menu and its items. Your selector will go into these elements in the ICON value. Here we have 2 selectors, each of which is made for its own menu item.

 item android:id="@+id/navigation_home" android:icon="@drawable/navigation_home_selector" android:title="@string/title_home" /> item android:id="@+id/navigation_profile" android:icon="@drawable/navigation_profile_selector" android:title="@string/title_profile" /> 

Now here is your selector file, which will be placed in your drawing folder.

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/menu_selected" android:state_checked="true"/> <item android:drawable="@drawable/menu" android:state_checked="false"/> </selector> 

Last step was provided by @ KishanSolanki124

Add this line of code to the BottomNavigationView.

 BottomNavigationView.setItemIconTintList(null); 

There you have it. Everything works like a charm.

Answer 5

I found that it is better to use the drawable selector: -

First create an XML file in your Drawable folder. For example, the xml file is called child_selector.xml in the folder for drawing.

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

Just add child_selector to the menu item of your bottom_navigation_main.xml: -

Like: android: icon = "@ drawable / child_selector"

Example:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_child" android:icon="@drawable/child_selector" android:title="@string/title_child" /> </menu> 

And should add the following line in your activity-

 bottomNavigationView.setItemIconTintList(null); 

Good luck.

Answer 6

Create a selector and specify the ability to draw for each state (for example, marked and unchecked states)

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

Answer 7

Found the answer. we can use

 item.setIcon(R.drawable.icon_name) 

to change the icon .. will try to respond imporve

  bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_favorites: //change the icon item.setIcon(R.drawable.icon_name); case R.id.action_schedules: case R.id.action_music: } return true; } }); 

Answer 8

Thanks for the selector method that works for me ( api v26 )

For those who are interested in how to return the OnNavigationItemSelectedListener unselected icon programmatically, OnNavigationItemSelectedListener , consider adding it to your OnNavigationItemSelectedListener before switch(Java) or when(Kotlin) :

 private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item -> navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home) navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account) navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading) navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet) when (item.itemId) { R.id.navigation_home -> { message.setText(R.string.title_home) item.setIcon(R.drawable.ic_tab_home_active) return@OnNavigationItemSelectedListener true } R.id.navigation_account -> { message.setText(R.string.title_account) item.setIcon(R.drawable.ic_tab_account_active) return@OnNavigationItemSelectedListener true } R.id.navigation_trading -> { message.setText(R.string.title_trading) item.setIcon(R.drawable.ic_tab_trading_active) return@OnNavigationItemSelectedListener true } R.id.navigation_wallet-> { message.setText(R.string.title_wallet) item.setIcon(R.drawable.ic_tab_wallet_active) return@OnNavigationItemSelectedListener true } } false }