Friday, September 13, 2013

on Leave a Comment

Android Quick Tip: Setting the alpha channel on a shape

On my current project I needed to have a rectangle with a translucent background and solid text overlaying an image. The desired effect is similar to the images below from the One Today and Google Plus apps.

Now I have written a lot of Android code and, as pervasive as this style is, I had never attempted it. It turns out that this effect is very simple. Essentially you have a layout with a background drawable. That background drawable is a shape with a solid color. Your initial thought may be to set the alpha of the layout like so:

The problem with setting the alpha channel directly only the layout is that it also affects the layouts children. This means that the text above will not stand out as in the examples above. What you have to do is create a shape drawable with a solid background color. You set the alpha in the color value for the solid element. Notice that the color below #88241101 is longer than you would normally see for a hex color. The reason for this is the first two digits (88) represent the alpha channel for the color. The range, being in hex, is from 00 to FF where 00 is completely transparent and FF is solid.

Powered by Blogger.