In the previous article in this series we looked at some dry examples which demonstrated some important aspects of using transparency in our UI. In this article we shall have a look at some real-world examples of how we can use transparency.
In a comment on an article in the series about GridLayout I was asked about labels as detailed in the Android Design website. The technique for doing this is not specific to GridLayout, it is simply a layout pattern that we can use in the layout for each cell. We can just as easily use the same layout pattern elsewhere. For example, we can use this pattern in an Adapter which creates layouts for a GridView or ListView.
Let’s look at a simple example:
[xml][/xml]
This is the contents of one cell in a GridLayout: a single ImageView showing the Styling Android logo.
The technique is to wrap our existing layout for the cell in a RelativeLayout, or use the existing RelativeLayout if the top level is already a RelativeLayout. RelativeLayout is the key here because it allows us to overlay our label on top of the ImageView. To add a simple label, all we need to do is add a TextView to the RelativeLayout, set it to match the parent width, wrap the content height, align to the bottom of the parent (the RelativeLayout), with text colour set to white, and the background set to black with transparency:
[xml]
[/xml]
It is the transparency that is key to getting the behaviour that is show in the Android Design spec. It allows some of the background image to show through the label.
If we run this we get the label behaviour that we want.
But suppose we want a slightly more complex label which contains two TextView? We place them both in another layout, in this case we’ll use a LinearLayout, and set the width, height, alignment, padding, and background of the LinearLayout instead. We’ll also add a shadow to the first peice of text:
[xml]
[/xml]
Again this gives us the following:
In the previous article we looked at how transparency can easily be lost when the background is the same colour as the transparency. Where we are overlaying images which may come from sources outside of our control we can easily get undesirable behaviour if the image is very close in hue to our transparency. However, in this case it really isn’t a problem because what we are trying to achieve is to keep the text visible. In fact that is the purpose of the transparent fill here, to separate the text from the background image. If the background image is the same hue as the text then the transparent fill covers it and we can read the text. If the background image is the same hue as the transparent fill then the text remains readable. The only thing that we need worry about is to have enough of a contrast between transparent fill and the text. Then it really doesn’t matter what the background image is, the text will always be readable.
In the next article we’ll further explore this technique of keeping text readable despite the background.
The source code for this article can be found here.
© 2012, Mark Allison. All rights reserved.
Copyright © 2012 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
Nice article. I use a similar technique in the forthcoming Sky News update to put a label in a semi-transparent rounded rect at the top of the module and a description in a semi-transparent rounded rect at the bottom.
I also apply a touch handler and a timer so that the labels fade after 5s but can be displayed again by a touch of the image.
It works well and the text is always readable no matter how “noisy” the image is,
Thanks for the articles on transparency; they’re great for someone starting out in Android Dev, just the right amount of explanation.