How to apply opacity in Android color

Today I was chatting with my friend Andres Galante about colors in Android. He was about to send some colors for a developer team’s use in an Android app and asked me: Can you use rgba for the greys or they must be hex?

The short answer is:

How To Apply Opacity In Android Color - Yes We Can
Yes We Can

You can use the Android Color util method argb:

Color.argb(alpha, r, g, b);

But… it’s not common. Android developers usually set colors as a resource in XML file and unfortunelly XML resource not accept RGB only HEX

/res/values/color.xml

<color name="textColor">#FFFFFF</color>

So, He told me:

The problem is Material Design has specific opacity rules for text, icons, and dividers. How we apply it using HEX?

Well, It’s not a problem, because Android uses Hex ARGB values, which are formatted as #AARRGGBB

The first pair of letters (AA), represent the Alpha. You must convert your decimal opacity values to a Hexadecimal value. Here are the steps:

  1. Take your opacity as a decimal value and multiply it by 255. So, if you have a block that is 50% opaque the decimal value would be .5. For example: .5 x 255 = 127.5
  2. The fraction won’t convert to hex, so you must round your number up or down to the nearest whole number. For example: 127.5 rounds up to 128; 55.25 rounds down to 55.
  3. Enter your decimal value in a decimal to hexadecimal converters, like this decimal-to-hex-converter, and convert your values
  4. If you only get back a single value, prefix it with a zero. For example, if you’re trying to get 5% opacity and your going through this process you’ll end up with the hex value of D. Add a zero in front of it so it appears as 0D.

Source: Alpha Hex Value Process

/res/values/color.xml

<!-- Black text color with 87% of opacity -->
<color name="textColor">#DE000000</color>

… and if you are lazy (like me), I did the math for you

Add comment

By Daniel Passos