Android bottomnavigationview icons color

How to change inactive color on bottom navigation?

I can’t change inactive color on my bottom navigation

and this my xml

and this my java

anyone can help?

5 Answers 5

If you are using the BottomNavigationView, the solution could be easy. You just need to create a selector as a ColorStateList, then assign the selector to the «itemIconTint» attribute of the BottomNavigationView.

Create file inside drawable

bottom_nav_icon_color_selector.xml

BotttomNavigationview.xml

Chrislis answer is a good start. However I like to solve this problem via styling and theming. I also used the new material BottomNavigationView for this example.

Create a new file under the color folder, for example: bottom_nav_item_color.xml

Add this line to your base theme located in themes.xml

Add this code to styles.xml

Now the BottomNavigationView should be styled correctly

Источник

Android: Bottom Navigation View — change icon of selected item

I have added BottomNavigationView in my application like.

main.xml

bottom_navigation_main.xml

MainActivity click

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

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

10 Answers 10

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

If above solutions are not working for you to change selected item icon then add below line to your code:

This will disable tint effect of selected item icon.

I had the same problem. I have added selector drawable for changing icon of BottomNavigationView item when its checked/selected.

I found this is better approach to use selector drawable:

At first create an xml file in your drawable folder. For example, xml file name is child_selector.xml at drawable folder.

Simply add child_selector in menu item of your bottom_navigation_main.xml:

And must add following line in your activity-

You need to reset the icon onclick, and then on the switch case you need to set only the one you need to change, so only when selected the icon change.

Okay I wanted to understand how to have each item have their own image, and with some confusion in the comments on where it should go, I wanted to type up this answer.

First create your menu and its items. Your selector will go inside those items in the ICON value. Here we have 2 selectors, each made for its menu item.

Now here is your selector file that will be housed in your drawable folder.

Final step was provided by @ KishanSolanki124

Add this line of code to your BottomNavigationView.

There you have it. All works like a charm.

The above answer from ajay singh https://stackoverflow.com/a/57248961/9793057 helped me out, as well as employing answers from above.

The following code within res->drawable folder (selector_stock_bottom_nav_view.xml)

These are the attributes in my bottom navigation view

I DID-NOT use «BottomNavigationView.setItemIconTintList(null)» anywhere in my code.

Now here comes the most important piece of code, make sure to return «TRUE» in bottom navigation view’s listener, i.e,

Bonus: To change size of text active/inactive state Place the following code in styles.xml file

The above answer is a compilation of answers from various answers in stackoverflow related to bottom navigation views, icon & text color/size change.

Источник

Android — Change color of icon and title of each tab bottom navigation

I’m trying to make a bottom navigation a bit tricky. Indeed I want this kind of bottom navigation : Each tab has a different color when it is selected. For example measure will be in red when selected (icon and title) and profile will be green when selected.
So I tried to use a selector per item (in my menu)
But the color is not applied. The icon change successfully (I tried to put a completely different icon when an item is selected) but not the color of the title of the tab.
I tried to remove 2 properties from my bottom navigation :

But it’s getting worse because the color of my theme app (primary) is applied when a tab is selected.

One of my selector (logic applied to all items):

And my menu (where I apply all of my selector) :

2 Answers 2

Bottom navigation bar overrides icon colors via app:itemIconTint, but removing that attribute from the XML just makes the nav bar use the app’s default colors instead. To prevent the bar from applying color changes, and let your selectors work as intended, you have to set the icon tint list to null in code, like this:

EDIT: I see you want to color the text as well, that’s a bit trickier. Only solution I can come up with is to forget about drawable selectors, and just replace the item’s icon tint list and text color every time the bottom nav bar selection changes. In your navbar-hosting activity, define these two:

Then in your navbar’s ItemSelectedListener, call updateBottomNavBarColor with the color you want:

And you would use it like this on your BottomNavigationView:

The app:itemIconTint and app:itemTextColor take a ColorStateList instead of a simple color. This means that you can write a selector for these colors that responds to the items’ state changes.

For example, you could have a bottom_navigation_colors.xml ColorStateList that contains:

used Colored Material Style

Also change colour by programmatically like this:

Источник

item selected color in android BottomNavigationView

I refer this. Schedules Activity is appeared when I click Schedules, but first item color (Favorites) is always selected. It doesn’t change Schedules item color from Favorites item color. And also, third item (Music). I use android:state_checked NOT android:state_enabled.» If working with startActivity, it doesn’t change Schedules item color from Favorites item color. If not, it change color. How to solve this color select problems.

7 Answers 7

create a color directory in res folder and create your xml file for customize your bottom navigation items:

res/color/bottom_nav_color.xml:

and in your BottomNavigationView set app:itemTextColor and app:itemIconTint values to @color/bottom_nav_color

1. Make a xml file in the drawable folder with the name of navigation_view_colored.xml and put this inside:

1. Add the xml you created to app:itemIconTint

here is simple solution to your question

the selector res/drawable/tab_color_selector.xml :

update tab item selector color what your required to.

just change theme :

create themes.xml in values and add this style

and set to BottomNavigationView

In my situation, I used BottomNavigationBarEx plugin. So, I had to do it like below:

In my res/layout/layout_navigation_view.xml:

Added app:itemIconTint=»@drawable/bottom_nav_colors» . Since, I only used icons. So if you have text add this: app:itemTextColor=»@drawable/bottom_nav_colors» also.

Then in res/drawable directory (because selector s need to include in drawable or animatable directory) add the selector (as others mentioned):

Then in res/values/colors.xml add your select and unselect colors, as ex:

Have you heard about the wrapper project called BottomBar of Roughike which makes the use of BottomNavigationView easier? Project can be found here.

I suggest you to use this project which is up to date and has contribution in a high level. If you refer to use this, You can simply insert the below code to change the colors when clicked on tabs and do much more customized stuff:

So basically what I do here, I color unselected tabs to #7E7E7E and clear the filter for coloring from selected ones so they appear with their original color of their icon. Of course, you can fill with another color when selected as well, that’s up to you.

Источник

Bottom Navigation Views

Bottom navigation provide easy navigation for switching between 3 to 5 different views. It was recently added to the Material Design spec, which provides an alternative between tabs and navigation drawers. This widget was also added to v25 of the support design library.

Simply declare a BottomNavigationView instance and make sure to set alignParentBottom=true to ensure that the view is placed on the bottom layout:

Next, similar to how menu items in the Toolbar, declare the tabbed items and the icons that will be displayed in a res/menu/menu_bottom_navigation.xml file:

You can create the icons by choosing them from the New -> Vector Asset :

Next, you can choose the Action and find the heart symbol:

Save the file as ic_favorite_white_24dp.xml . You can change the fill color after importing the vector drawable by modifying the fillColor :

You can repeat this process for the other icons. You can also download the icons directly from this GitHub repo too.

Finally, you will need to set the navigation select handler manually:

Note: as of com.google.android.material:material:1.4.0 , setOnNavigationItemSelectedListener has been deprecated. Use setOnItemSelectedListener instead.

You can use the bottom navigation drawer to swap Fragments:

The bottom navigation view also can be customized with several different options, including: app:itemBackground , app:itemIcontint , and app:ItemTextColor :

• app:itemBackground — The background for the bottom navigation’s items
• app:itemIconTint — The tinting for the bottom navigation’s items’ icons
• app:itemTextColor — The text color for the bottom navigation’s items’ text

When a bottom navigation menu item is selected, it is in a checked state. You can create a state list drawable to render different icons depending on whether the menu item is selected:

Источник