Styling Android

In the previous article we looked at the GridLayout label pattern and explored how it is designed to keep the label text visible irrespective of the background. In this article we’ll look at this concept further.

It is worth mentioning that transparency is not a requirement for keeping text readable despite the background. An obvious example of this is the Android Toast mechanism. This displays text in an opaque container that ensures that it will always stand out from the background. So given that Toast works really quite well, why not simply use opaque containers?

A simple answer is that semi-transparent containers allow something of the background to show through. Compare the GridLayout label shown on the Android Design website with a Toast. A Toast is fairly unobtrusive and would not overly annoy you if you were, for example, watching a video when it popped up. However the GridLayout label is much larger than a Toast and a semi-transparent container allows it to overlay the background without completely obscuring it, as an opaque container would.

As well as using a semi-transparent container to help text stand out from the background, there is another technique that we can use to help text to stand out from the background: using a text shadow to create a contrasting glow around the text. This was covered in the post on text shadows.

But surely we’re looking at transparency in this series, so why mention text shadows? When we specify a shadow radius to create the glow effect, this is actually implemented using transparency. If we create a TextView containing white text on top of the the black and white background that we used previously:

 
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Styling Android"
    android:textColor="#FFF"
    android:textSize="36sp" />

As we would expect, the white text disappears against the white background:

We now add a shadow to the text:

 
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:shadowColor="#666"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="4"
    android:text="Styling Android"
    android:textColor="#FFF"
    android:textSize="36sp" />

This uses a shadow with 0 offset from the shadowDx and shadowDy attributes to help the text stand out from the white background so that it remains readable:

Of course we can also experiment with using offsets and coloured shadows to create different effect. Here we use a semi-transparent shade of “Styling Android green” with an offset:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:shadowColor="#8014A804"
    android:shadowDx="6"
    android:shadowDy="6"
    android:shadowRadius="6"
    android:text="Styling Android"
    android:textColor="#FFF"
    android:textSize="36sp" />

This gives us the following:

It is interesting to note that the green effect all but disappears against the black background. As we have seen previously semi-transparent colours behave differently against different coloured backgrounds. In this case we are using a semi-transparent colour for the shadow, and this gets largely absorbed by the black background, while standing out clearly against the white background. This is yet another example of how we can get some rather subtle effects by the use of transparency.

In the next part of this series well move away from text and explore some other things that we can do with transparency.

The source code for this article can be found here.

© 2012, Mark Allison. All rights reserved. This article originally appeared on Styling Android.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License

Transparency – Part 3 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.

Tags: androiddev

This entry was posted on Friday, June 8th, 2012 at 10:00 am and is filed under Shadow, Text, Transparency. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.