In the previous article we looked at a tiled background pattern. In this article we’ll look at how we can create a panel with a 3D effect border created using drawables.
Let’s start by creating a new drawable in res/drawable/panel.xml:[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. This 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:[xml]
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:[xml]
If we run this we now get:
That concludes this short series on drawables.
The source code for this article can be found here.
© 2012 – 2014, 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.