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;
}
};
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.
BottomNavigationView will get its icons from the menu file so you cannot set them from your selector drawable. However, if you want to change their color for selected and not selected states you can do this as below.
Create your selector drawable nav_item_color_state as below
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_enabled="true" />
<item android:color="#color/colorPrimary" android:state_enabled="false" />
</selector>
set itemIconTint and itemTextColor using selector drawable as below and it will change color of your icon and text when selected.
<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:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
Check documentation from here
for some reason, "state_enabled" wasn't working in my case so I used the below-given selector.
nav_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/black" android:state_checked="true" />
<item android:color="#color/grey" android:state_checked="false" />
</selector>
Along with BottomNavigationView as
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
app:itemIconTint="#drawable/nav_color_selector"
app:itemTextColor="#drawable/nav_color_selector"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
This code changed the filled color of vector drawables which I linked in the bottom_nav_menu.xml
Related
How to change menu item text color in xml file
in drawable file the code looks like this file name: bottom_nav_menu_item_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color= "#color/bottom_nav_menu_item_selected_color"
android:state_checked="true"
android:state_selected="true"/>
<item
android:color= "#color/bottom_nav_menu_item_unselected_color"
/>
</selector>
Bottom Navigation Menu Bar looks like this in activity_main.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_nav_menu_bar"
app:menu="#menu/bottom_nav_menu_items"
app:itemTextColor="#drawable/bottom_nav_menu_item_text_color"
android:background="#color/white"
/>
Can add more info with SS or gif about current behaviour so exact solution can be provided
But as you asked question about changing color of BottomNavigationView text change then you can use as mentioned below
tab_text_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:color="#color/unselectedTab" />
<item android:state_selected="true" android:color="#color/selectedTab" />
<item android:color="#color/unselectedTab" />
</selector>
In Activity xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_nav_menu_bar"
app:menu="#menu/bottom_nav_menu_items"
app:itemTextColor="#drawable/tab_text_selector"
android:background="#color/white"
/>
I want the color of the icon to be the same as it but only for the selected one and some other color for the non-selected ones.
here is what I'm doing
XML:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navbar"
style="#style/Widget.MaterialComponents.BottomNavigationView"
android:layout_width="match_parent"
app:backgroundTint="#color/button_color_black1"
app:itemIconSize="35dp"
app:labelVisibilityMode="selected"
app:itemIconTint="#color/selector_for_navbar"
app:elevation="8dp"
app:itemRippleColor="#color/background_color"
app:menu="#menu/menu_items_for_navbar"
android:layout_height="70dp"/>
selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="x" />
<item android:color="#android:color/darker_gray" />
</selector>
I want x to be the same color that the icon has, and btw icon is multi-colored.
How can I do that?
I have used images as icon but I dont want them to look grey when they are not selected. It should look same as picture whether its active or not. What should I do?
com.google.android.material.bottomnavigation.BottomNavigationView
Thanks
Try using this in your XML file in the BottomNavigationView part
app:itemIconTint="null"
Or add this to your java file after defining your BottomNavigationView (with the findViewById)
//Replace BottomNavView with your nav bar id
BottomNavView.setItemIconTintList(null);
A long way to achieve it
mBottomNav.setItemIconTintList(null);
Then do the designs yourself. Don't forget to separate the buttons as clicked and not clicked.
Example Button XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--Clicked-->
<item android:drawable="#drawable/homeclicked" android:state_checked="true" />
<!--Not Clicked-->
<item android:drawable="#drawable/homenotclicked" android:state_checked="false" />
</selector>
And add them to the view: Example bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/homebuttons"
android:icon="#drawable/homebuttonxml />
<!--Other Buttons...-->
</menu>
And finally, Link view to bottomnavigationview
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:labelVisibilityMode="unlabeled"
app:elevation="0dp"
app:menu="#menu/bottom_navigation">
</com.google.android.material.bottomnavigation.BottomNavigationView>
The default color used by not selected items is based on the colorOnSurface color.
Just use:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:theme="#style/BottomNavigationViewThemeOverlay"
.... />
with:
<style name="BottomNavigationViewThemeOverlay">
<item name="colorOnSurface">#color/...</item>
</style>
Otherwise you can define your custom selector:
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#color/bottomnavicontint"
../>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="1.0" android:color="?attr/colorPrimary" android:state_checked="true"/>
<item android:alpha="0.6" android:color="#color/..."/>. <!-- not selected -->
</selector>
I am working in an Android app ,In this I have Bottom Navigation activity .
Bottom navigation contains 3 icons Home ,Reminders,settings.
And 3 fragments like Home Fragments,Reminder Fragments,Settings Fragments.
What I need to do is By default when I open the app I want to set a color for Home Icon and text(icon color and text color should be different for selected item),and If I selected other tabs from bottom navigation I want to change the color of the selected tab .
I have tried the following
res/color/bnv_tab_item_foreground.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/selected" />
<item android:color="#android:color/darker_gray" />
</selector>
values/colors.xml
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="selected">#25EB13</color>
<color name="not_selected">#EB1347</color>
</resources>
activity_main.xml
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation"
app:itemIconTint="#color/bnv_tab_item_foreground"
app:itemTextColor="#color/bnv_tab_item_foreground" />
The above code id not working for me.Please help me to solve this issue.
It's Easy! You can make drawable & color selectors. See how:
1 : Make drawable selector
res/ drawable/ drawable_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorAccent" android:state_checked="true" /> // you can take drawable too.
<item android:drawable="#color/colorAccentDark" />
</selector>
2. Make color selector
res/ color/ color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/white" android:state_checked="true"/>
<item android:color="#color/colorPrimary" />
</selector>
Now use both selectors in XML.
<android.support.design.widget.BottomNavigationView
...
app:itemBackground="#drawable/drawable_selector" // set background
app:itemIconTint="#color/color_selector" // set icon tint/color
app:itemTextColor="#color/color_selector" // set text color
app:menu="#menu/home_bottom_menu"
... />
In your selector, in your second item, try adding android:state_checked="false" :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:color="#color/selected" />
<item
android:state_checked="false"
android:color="#android:color/not_selected" />
</selector>
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.
activity_main.xml
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main"
#drawable/nav_item_color_state
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDark" android:state_enabled="false" />
</selector>
create a color directory in res folder and create your xml file for customize your bottom navigation items:
res/color/bottom_nav_color.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/your_color" />
<item android:state_checked="false" android:color="#color/your_color"/>
</selector>
and in your BottomNavigationView set app:itemTextColor and app:itemIconTint values to #color/bottom_nav_color
<android.support.design.widget.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/actionBarColor"
app:menu="#menu/my_navigation_items"
app:itemTextColor="#color/bottom_nav_color"
app:itemIconTint="#color/bottom_nav_color"/>
Make a xml file in the drawable folder with the name of navigation_view_colored.xml and put this inside:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:color="#color/gray" />
<item android:state_checked="true" android:color="#color/blue" />
</selector>
Add the xml you created to app:itemIconTint
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_navigation"
android:layout_alignParentBottom="true"
app:itemIconTint="#drawable/navigation_view_colored"
app:itemTextColor="#color/blue"
app:menu="#menu/bottom_navigation"
android:background="?android:attr/windowBackground"/>
just change theme:
create themes.xml in values and add this style
<style name="BottomNavThem" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryRed</item>
</style>
and set to BottomNavigationView
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/main_navigation_menu"
android:theme="#style/BottomNavThem"/>
here is simple solution to your question
<android.support.design.widget.TabLayout
....
app:tabBackground="#drawable/tab_color_selector"
...
/>
the selector res/drawable/tab_color_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/tab_background_selected" android:state_selected="true"/>
<item android:drawable="#color/tab_background_unselected" android:state_checked="false"/>
</selector>
update tab item selector color what your required to.
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.
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavBar"
android:background="#drawable/white_grey_border_top"
app:itemIconTint="#drawable/bottom_nav_colors"
app:menu="#menu/bottom_navigation_menu" />
Then in res/drawable directory (because selectors need to include in drawable or animatable directory) add the selector(as others mentioned):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:color="#color/grey" />
<item android:state_checked="true" android:color="#color/blue" />
</selector>
Then in res/values/colors.xml add your select and unselect colors, as ex:
<color name="grey">#bfbfbf</color>
<color name="blue">#3F51B5</color>
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:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
Tab tab = newTab().setIcon(new BitmapDrawable(getResources(), icon)));
tab.getIcon().setColorFilter(Color.parseColor("#7E7E7E"), PorterDuff.Mode.SRC_IN);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override public void onTabSelected(TabLayout.Tab tab) {
if (tab != null && tab.getIcon() != null) {
tab.getIcon().clearColorFilter();
}
}
#Override public void onTabUnselected(TabLayout.Tab tab) {
if (tab != null && tab.getIcon() != null) {
tab.getIcon()
.setColorFilter(Color.parseColor("#7E7E7E"),
PorterDuff.Mode.SRC_IN);
}
}
#Override public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
});
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.
Hope this helps you!
Cheers,
Renc
Other answers using the drawable selector didn't work for me.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/colorPrimary" />
<item android:color="#color/bottomnavUnselectedColor" />
</selector>
This worked in my case removing the state_checked="false"
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomnav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/transparent_rect"
app:layout_constraintBottom_toBottomOf="parent"
app:itemIconTint="#drawable/bottomnav_selector"
app:menu="#menu/bottomnav_menu"/>