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.
Related
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
I am using a split ActionBar to display some simple media controls. See Below:
I used MenuItem.setActionView to override the default view for the Fast Forward and Rewind buttons because I need to detect when the user initially touches the control (to start rewinding) and subsequently releases the control (to finish rewinding). See code below:
ImageView rewindButton = new ImageView(getBaseContext());
rewindButton.setId(rewindViewID);
rewindButton.setClickable(true);
rewindButton.setImageResource(R.drawable.ic_action_rewind);
rewindButton.setOnTouchListener(forwardBackwardListener);
MenuItem rewindMenu = menu.findItem(R.id.menu_rewind);
rewindMenu.setActionView(rewindButton);
return true;
This is all working well for me but has had an unintended side effect. When I touch the fast forward or rewind button I do not get the default blue background (as shown on the skip backward control above). It displays no background at all. I tried setting the background in the onTouch handler but the background does not fill the height of the ActionBar in the same way as the default one (see example image below), it seems like there is some padding or margin in place, but I don't know how to remove it.
I have tried the following with no luck:
Setting the height of the ImageView Manually to try to fill the ActionBar
Returning True or False from the onTouch Handler
Does anyone know how I might resolve this?
I came up with a workaround which was to set the background of all the items to a small radial gradient when the item is selected. The gradient is still cut off a little but it is hardly noticeable. It makes the custom and regular buttons look almost the same.
First I created the radial gradient in a file called res/drawable/radialbackground.xml . Notice the end color is transparent, this is important to fade the gradient into nothing so it doesn't fill the whole rectangle.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#00FFFFFF"
android:gradientRadius="35"
android:startColor="#color/Gray"
android:type="radial"
/>
</shape>
Then I created a StateListDrawable called res/drawable/actionitembackground.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="true" android:drawable="#drawable/radialbackground" />
<item android:drawable="#android:color/transparent" />
</selector>
Then I assigned that statelistdrawable to the backgrounds of my custom ActionViews :
rewindButton.setBackgroundResource(R.drawable.actionitembackground);
Then I altered the style for the actionbar to include this new radial fill for the regular action bar items.
So, in values/styles.xml I added:
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light">
<item name="android:selectableItemBackground">#drawable/actionitembackground</item>
<item name="selectableItemBackground">#drawable/actionitembackground</item>
</style>
In my case, the base style was Theme.Sherlock.Light but you would replace that with whatever style you wanted to amend.
Then I set that style as the style for my application in AndroidManifest.xml
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/Theme.MyTheme"
android:uiOptions="splitActionBarWhenNarrow" >
This seemed easier than digging through trying to debug why the background is cut off. Perhaps I will spend more time on it another day.
I had exactly the same problem, but with a spinner on action bar,
you need to set de minHeight of yout view to actionBar height:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/drop_down"
android:minHeight="?android:attr/actionBarSize"
>
<Spinner
android:id="#+id/category_spinner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/default_selector"
android:minHeight="?android:attr/actionBarSize"
android:gravity="center_vertical|right"
android:paddingRight="5dp"
/>
How do I style an image button so that it displays as a PNG icon but on click/touch, the PNG shape gets a soft glowing edge?
You probably want to look at 9-patch
Basically you create a transparent png with the glow effect baked into the image, and it'll scale the edges while keeping the corners intact and letting you place the content within a predefined area of the image.
To map your images to a button, you need a selector, which is a xml file and goes into your projects drawables. A sample grabbed from another answer looks like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/red_button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/red_button_focus" />
<item android:drawable="#drawable/red_button_rest" />
</selector>
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