0

I have created a custom icon for the action bar with color 333333ff(RGBA) and 60% opacity and 32 dp as per the docs. But the icon is barely visible in the action bar. Only when i long click on the space where the icon is supposed to show, i can see it a bit more distinctly. What is wrong with the design of the icon?

Here's a screenshot : enter image description here

Here is a screenshot when i long click on it : enter image description here

It is very clear if i use it within the body of the app, instead of in the action bar. So does that mean there is some extra transformation done by the action bar on icons?

faizal
  • 3,497
  • 7
  • 37
  • 62
  • What happens if you do zero transparency with the icon? – Shobhit Puri Oct 23 '14 at 06:06
  • @ShobhitPuri if i give 100% opacity, the colour in the .svg and exported png darkens considerably. But it makes very little difference in the action bar. – faizal Oct 23 '14 at 06:13
  • okay. Actually your color `333333ff` seems to make it 20% transparent as per http://stackoverflow.com/questions/15852122/hex-transparency-in-colors. I was wondering what happens is that 20% transparency is removed. – Shobhit Puri Oct 23 '14 at 06:18
  • @ShobhitPuri the colour code format used by Inkscape is `RGBA`. So the Alpha value i am using is `ff`(100%), not `33`. There is a separate opacity setting, which i mentioned in previous comments. – faizal Oct 23 '14 at 06:25
  • You are using a dark icon colour, instead of a light (white) colour. – IAmGroot Oct 23 '14 at 08:11

1 Answers1

0

Make the below changes to the icon design in Inkscape:

  1. Change the opacity of the icon to 80% since the OP is about a dark action bar. 60% is appropriate only for light action bar.

  2. Change the color to #ffffffcc. #cc represents 80% opacity. #ffffff is the color recommended by the docs for dark action bar, as opposed to #333333 for light action bar.

I am not sure why there are two different settings for opacity. But i set both just in case.

faizal
  • 3,497
  • 7
  • 37
  • 62