MfA tricks #5 - Using Shape for theming
Android supports all sort of drawable (
Bitmap like PNG or JPG being only one of them). The one we are going to talk about today is so-called Shape drawable.
They can be defined with a simple XML syntax and support a number of basic shapes like rectangles (with rounded corners or not) or ovals which can be filled with a solid color or a gradient (borders can also be defined).
You define those in the
drawable folder of your solution as normal. The Android designer in MonoDevelop is actually smart enough to pick up these ones so you can change them and see the result live while designing your application(!).
As a standalone drawable, it’s probably not that useful but used in conjunction with your
Views, it allows you to simply theme your widgets.
In the following image reused from a previous post, we actually have 3 different shape drawables in action:
First, the circle around the coffee cup is an oval drawable filled with a semi-transparent color to darken the main header background color. The shape source is following:
The layout XML references it in the following snippet (
To force the oval shape to be square, you have to force the size of the
FrameLayout. The value depends on your application, you can even do it dynamically but it has to be in code.
Second, the bottom bar where the location and date appear is a rectangle shape filled with a gradient to give it volume.
Gradients like that are a cheap way to give eye candy to your UI elements (see @chethaase and @romainguy Devoxx talk from 03:10 for more on that).
The bar shape XML is given below:
Here I’m combining the
<solid/> element to paint my base color and the
<gradient/> element to do the shading on top of it.
Again, to apply the effect, simply use the
android:background attribute on your element:
Finally, the overall round-corner border around the whole UI widget is also given by a shape drawable:
In that case, since we only care about borders, we set the filling color of the shape to be transparent. The
<stroke/> element define your borders while the
<corners/> element make them rounded.
As a final treat, if you combine things, you can also make fancy header using shape:
Shape XML (notice the padding left value for indenting):
TextView XML (as always, shape registered in
Now go add a bit of “woowoo” to your app!