Appcelerator Blog

The Leading Resource for All Things Mobile

Adding Transparent Background to Your Views

28 Flares 28 Flares ×

When you’re working with views, at some point you’ll need to add some transparency to the background, for example if you have text on top of an image and you want to make sure the text is readable. This was the case of the PhotoMEME app that I explain how to build in my book Build native cross-platform apps with Appcelerator.

Regular solid backgrounds are applied by using the RGB value, either in its HEX format, such as #FF0000 for red, or as Red, Green and Blue values like rgb(255,0,0).

Now, to make a red background transparent you use RGBA, where the A stands for the Alpha Channel. Hence, to apply a red background with 50% transparency on iOS, you do something like:

".myview":{
    backgroundColor : rgba(255,0,0,0.5)
}

Notice the emphasis on iOS, and the reason is because Android works a bit different. On iOS you specify the Alpha Channel as a number between 0 and 1, 0.5 being 50%. On Android however, the Alpha Channel is specified as a number between 0 and 255. So for Android, you’d use something like:

".myview":{
    backgroundColor : rgba(255,0,0,127)
}

Now, there’s a cross-platform way of achieving this, and that is by using ARGB (notice the Alpha Channel in the front). To use ARGB, you use HEX triplets just like HTML, so for red you’d use something like:

".myview":{
    backgroundColor : "#80FF0000"
}

In the code above above I’m using the typical HEX triplet for red which is FF0000, but I’m adding 80 to the front of it, which is the representation of 50%. There’s a mathematical formula for converting 50% to HEX, but I think it’s irrelevant – The important thing is to be able to express your percentage of opacity as HEX, and for this you could use the following table.

Alpha Level HEX Code
100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
0% 00

To learn more about this and other cool cross-platform tips, tricks, techniques and full apps, make sure you checkout my book Build native cross-platform apps with Appcelerator.

28 Flares Twitter 0 Facebook 0 Google+ 2 LinkedIn 26 Email -- 28 Flares ×

8 Comments

  1. Alejandro Thorne

    Nice! Thank you for this tip!

  2. Nico

    Question:

    Why not using “opacity” ?

    • Ricardo Alcocer

      Hi Nico. Yes, you could use the opacity property together with background color. This method takes care of both properties at once, but the result is essentially the same.

  3. Amanda Glosson

    One thing I’ve noticed while using the ‘opacity’ property, is that all the children of the view inherit the opacity of their parent.

    If I use the above trick with the backgroundColor, like “#80FF0000”. Will the children of this view inherit the opacity of 50%?

  4. Marcus Olovsson

    Is this an Alloy-specific feature or does it work with colors in the regular SDK too?

    • Ricardo Alcocer

      It’s part of the SDK, so it’s not Alloy-specific.

  5. In TSS do you not need to put that rgba in quotes? I believe this will be an error.

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
28 Flares Twitter 0 Facebook 0 Google+ 2 LinkedIn 26 Email -- 28 Flares ×