In My Bottom navigation bar, I am using an icon in the menu XML, the icon color changed with the theme color when selected.
after the tab click the icon totally change I am totally stuck why this happens with the png image.
Bottom navigation
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
app:labelVisibilityMode="labeled"
app:itemBackground="#color/transparent"
app:itemTextColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_navigation_main" />
Selector
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_compas"
android:state_checked="false"/>
<item android:drawable="#drawable/discover_green"
android:state_enabled="true"/>
</selector>
Bottom_nav_menu
<?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/chatMenuFragment"
android:enabled="true"enter code here
android:icon="#drawable/chat_selector"
android:title="Chat"
app:showAsAction="always" />
<item
android:id="#+id/contactsFragment"
android:enabled="true"
android:icon="#drawable/people_selector"
android:title="People"
app:showAsAction="always" />
<item
android:id="#+id/discoverFragment"
android:enabled="true"
android:icon="#drawable/discover_selector"
android:title="Discovery"
android:backgroundTint="#color/white"
app:showAsAction="always|withText" />
<item
android:id="#+id/myProfileFragment"
android:enabled="true"
android:icon="#drawable/user_selector"
android:title="My"
app:showAsAction="always|withText" />
</menu>
screenshots
Before selection:
After selection:
I ran into a similar issue, the problem is that by default the bottom navigation view adds a tint to the drawables and fills everything that is not transparent (like the case of your assets).
try adding this line
bottomNavigationView.itemIconTintList = null
"#drawable/discover_green" check this drawble , is it what you you're getting after pressing the compass ?
you're using a state list drawable so when you press compass the icon changes to discover_green, it is same as you defined.
The solution is the completely delete the state list drawble and use just the icon or changed the green dot icon to something you want to use.
The problem is that selected state apply color filter for whole not transparent part of icon. To fix your selected icon you have to make arrows on green circle transparent not white. Ask designer for change it or do it in some editor by your own.
Your problem arises from the fact that discover_green.png file has no transparent area. So when the menu item is selected the green tint is applied to the whole image hence you see a green circle.
However in ic_compas.png everything except the compas is transparent, Meaning if you use it as icon the compas in image will turn green when selected. For this you will have to modify the Discovery menu item as
<item
android:id="#+id/discoverFragment"
android:enabled="true"
android:icon="#drawable/ic_compas"
android:title="Discovery"
app:showAsAction="always|withText" />
This will give you a grey compas if item is not selected and a green compas when selected.
You have to create color icon and simple icon both and at selection time you have to change icon form plain to color and on not select time you have to change color icon to plain icon this is the simplest way to do that.
You can delete the white filter on the drawable item (png or vector) with this code (but you cant colour the icons on touch):
bottomNavigationView.itemIconTintList = null
Related
If I select the Particular item in bottom navigation, left and right side item's background color has to change. Please help me if anyone having any idea.Thank you in advance
On your BottomNavigationView, inthe XML file, add a property called "app:itemBackground" and set a drawable.
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_nav_view_height"
android:background="#color/white"
app:itemBackground="#drawable/item_bottom_nav"
app:menu="#menu/bottom_navigation" />
Then, create the drawable, giving it a normal drawable and a selected drawable. For the selected item, give it the flag android:state_selected="true" like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/bg_item_bottom_nav_select" />
<item android:drawable="#drawable/bg_item_bottom_nav_deselect"/>
</selector>
The last part it's just create two new drawables (the example code above i called "bg_item_bottom_nav_select" and "bg_item_bottom_nav_deselect"). One for the item selected and another for the item when it's not selected. Customize it like you want.
Hope this helps you! :)
I'm using a custom menu for my bottom navigation. But my second icon is not what it should be...
How it shows
What it should be
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_overview"
android:enabled="true"
android:icon="#mipmap/overzicht"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_modifies"
android:enabled="true"
android:icon="#mipmap/nieuw2"
app:showAsAction="ifRoom"
android:visible="true" />
<item
android:id="#+id/action_create"
android:enabled="true"
android:icon="#mipmap/create"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_profile"
android:enabled="true"
android:icon="#mipmap/profiel"
app:showAsAction="ifRoom" />
It's weird that all my icons are working expect the second one.
Icons are supposed to be all one color but you actually have two colors in your image.
See how the side of the triangle at the upper left is green in your image but white in the menu? Your green pixels are being tinted white, the same color as your background, so you don't see them.
If you really want a "negative" image like this, my recommendation would be to take all the green pixels that are surrounded by white pixels and make them transparent. That way the background green will show through and it will look like you expect.
While you're at it, you might as well change those upper triangle pixels from green to white, since they will be tinted white anyways.
I want to set the background (red image) on selected tab bar.
Initially I set like this
When i change in the code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selected_tab"
android:state_selected="true" />
</selector>
Its look like
My requirement to look like below this. Please help to achieve this.
you need to do like this way
For Tab background you need to create selector like this way
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selected_tab"
android:state_selected="true" />
<item android:drawable="#drawable/default_tab"/>
</selector>
now you can create Button with different layout for your tab button like this way. For this requirement Button View to set your tab icon at drawable top with text.
tab_add_photo_btn.xml
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#id/tab_search"
android:background="#drawable/tab_selector"
android:drawableTop="#drawable/add_photo_icon"
android:text="ADD PHOTO"
android:textColor="#fff"
android:padding="10dp"/>
I feel its nothing to do with XML coding .. just make some design trick
you need to make two different twiky images for each tab icon .
make Image background of tab which have little top part transparent (Not selected resource )
make selected image with same size with contain selected background (Selected resource )
I would like to change the color of the android button in my application to be dark grey instead of light grey. I intent to keep the color of the focus/pressed the same. I just want to change the color of the button in 'normal' state to dark grey.
I have found this thread:
Standard Android Button with a different color
I think the easiest way is to do this. Is that correct? But how can I make the LightingColor Filter to make it darkgrey?
button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));
I have tried
button.getBackground().setColorFilter(new LightingColorFilter(0xffffffff, 0xFF3A3A3A));
But all I get is a white color.
That's similar to what I am doing in my TabHost tabs in XML. If you have custom buttons and graphics it can be done in Java, but it is much easier if you're able to do it in your XML.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/settings"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/mountain" />
</selector>
You could use the default light theme
Example
I'm adding tab icon via selector like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_cart_selected" android:state_selected="true" />
<item android:drawable="#drawable/tab_cart" />
</selector>
http://img844.imageshack.us/img844/2535/questionn.jpg
All is fine, but my icon is smaller then tab itself and I want to set background color same as icon color. But I cant seem to figure out hot to do that.
Any suggestions?
use a .png transparency.
How to Make a Transparent PNG
test with this image and you will see