Text Shadows

Often tools like Photoshop are used to create graphic elements which are actually text with various effects applied to them, and an well used effect in such elements is the use of shadows. Android supports text shadows, and in this article we’ll explore a number of ways that we can use the built in shadows as it is much more efficient to use TextView than it is to include lots of bitmap elements for our text; it also makes designing for multiple screens much easier, as well, because the Android layout manager can scale TextView elements much easier than the bitmaps in ImageView objects.

Text shadows require four parameters:

1. The shadow colour: what colour the shadow will be
2. The X offset: where the shadow is positioned horizontally relative to the text
3. The Y offset: where the shadow is positioned vertically relative to the text
4. The radius: How much the edges of the shadow will be blurred

Text shadows are something of a misnomer because we can actually achieve some effects that bear absolutely no resemblance to a shadow as we shall see later. However, let’s start with a simple example which does resemble a shadow:

There are a couple of support files which define our colours which we’ll use throughout this article. These are res/values/colours.xml:

[xml]

#FFF #000 #7F7F7F #4F4F4F #0F0 #7F000000
[/xml]

and res/drawables/gradient.xml:

[xml]



[/xml]

If we run this, well see our text with a simple drop shadow:

There is one aspect of how shadows work which can cause some problems: The shadow radius must always be present, and it cannot be ‘0’ otherwise the shadow will not be drawn. In this example, I want a hard edge to the shadow so I have to put the radius to a tiny number to achieve this.

So, this example creates a simple grey shadow which is offset from the text by 3 pixels in each direction, and has an infinitesimally small radius which gives us a hard edge to the shadow.

We can soften the edge of the shadow by increasing the radius:

[xml]


[/xml]

And this gives us:

Another thing that we can do is to change the offsets to effectively change direction of the light source:

[xml]


[/xml]

This gives us:

There is another effect which is extremely widespread at the moment, and that it to give text an “engraved” look, and this works particularly well against grey or metallic backgrounds. We can achieve this by using a white shadow with a small blur, and only a small offset from the text:

[xml]


[/xml]

It looks like this:

Another way we can use shadows it to create glow effects by using X and Y offsets of 0, a largish blur and a shadow colour which matches the text colour:

[xml]


[/xml]

Which gives us:

We can also use a shadow to provide us with an outline glow by setting the text colour to match the background of the parent, and using a contrasting shadow with X and Y offsets of 0:

[xml]


[/xml]

It looks like this:

By simply changing the shadow colour, we can also change the feel of the glow effect:

[xml]


[/xml]

Which gives us:

Finally, let’s consider a rather practical issue. Sometimes when using text over a background which is either a gradient, or even a busy background bitmap drawable the text stands out perfectly well in some places, but gets lost in the background in others. Here is a simple example:

The text is easy to read on the left, but as we get further right where the background colour gets nearer to the text colour, we begin to lose the text in the background and it becomes more difficult to read. Let’s create a glow effect of a contrasting colour to the text:

[xml]


[/xml]

This helps the text to stand out when the background colour is similar to the text colour:

One final point which is certainly worth making is that just because you have learned a new technique does not mean that you should use it everywhere! Applying these kinds of effects to a block of body text will render it more difficult to read. Confine fancy effects to headers, and standalone blocks of text.

ADDENDUM: +Kirill Grouchnikov makes an excellent point in this post: Android does not make the bounding box larger when adding text shadows. All of the examples in this article have android:padding=”2dp” set otherwise the shadow may be clipped. Shadows with a large radius, or a large offset may require more padding to prevent clipping.

The source code for this article can be found here.

© 2011 – 2014, Mark Allison. All rights reserved.

Copyright © 2011 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.