Drawables / Inset Drawable / Shape Drawable

More Drawables – Part 2

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:

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:

Simple Border

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:

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:

3D Border

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:

With Text

That concludes this short series on drawables.

The source code for this article can be found here.

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

CC BY-NC-SA 4.0 More Drawables – Part 2 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

2 Comments

  1. First of all thank you very much for the article on Vector Drawables. I have a question, greatly appreciate if you can help. How can I added rounded corner in all sides for the 3d view of the drawable?

    I used on both the Shapes but only top left and bottom right are rounded. Please let me know. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *