April 27, 2012

Let’s start by creating a new drawable in res/drawable/panel.xml:

On the outside we have a layer-list drawable. This allows us to position one drawable on top of another. At the moment we only have a single child drawable of our layer-list, but we’ll be adding another one in due course. This child is a simple shape drawable which has a dark grey border, and a subtle radial gradient which is positioned at the top edge.

If we try this we get the following:

That’s looking pretty good, but what about if we want a 3D effect on the border, giving the illusion of a raised panel. Thsi can be achieved by adding a second drawable to our layer-list. layer-list will draw its children in order, with the last one being drawn last, or on top of the others. We can use use an inset drawable with a transparent fill and a light grey border, with the bottom and right edges pushed outside the bounds of the layer-list:

This will effectively draw a light grey border over the left and top edges of the existing border giving us the 3D effect that we require:

Finally, we can add some text with a white shadow to give an engraved look as was covered in this article :

If we run this we now get:

That concludes this short series on vector drawable.

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

Posted by Mark Allison

Styling Android for Kindle

Styling Android is now available on your Kindle. Click the relevant Amazon logo to subscribe:

Social Media

AndroidConf Brasil 2011

You can view my presentation on Android Layouts from AndroidConf Brasil 2011 here

Recent Posts