More Vector 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 a vector drawable.

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <stroke
                android:width="2dp"
                android:color="#999" />

            <gradient
                android:centerY="0.0"
                android:endColor="#BBB"
                android:gradientRadius="500"
                android:startColor="#DDD"
                android:type="radial" >
            </gradient>
        </shape>
    </item>

</layer-list>

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. 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:

    <item>
        <inset
            android:insetBottom="-3dp"
            android:insetLeft="0dp"
            android:insetRight="-3dp"
            android:insetTop="0dp" >
            <shape>
                <stroke
                    android:width="2dp"
                    android:color="#DDD" />

                <solid 
                    android:color="@android:color/transparent" />
            </shape>
        </inset>
    </item>

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:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Styling Android"
    android:textColor="#999"
    android:textSize="64sp" 
    android:shadowColor="#FFF"
    android:shadowDx="2"
    android:shadowDy="2"
    android:shadowRadius="4"/>

If we run this we now get:

With Text

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

Send the author to the moon!

Creative Commons License
More Vector Drawables – Part 2 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.

Tags:

2 Responses to “More Vector Drawables – Part 2”

  1. Muthu Lalapet says:

    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.

    • Mark Allison says:

      There were some bugs which crept in on 2.X whereby some of the corners are switched https://code.google.com/p/android/issues/detail?id=9161. This was fixed in 3.0. You can work around this by providing two resources, one which works with the broken 2.x implementation (put in /res/drawable) and another which works with the fixed 3.1+ implementation (out in /res/drawable-v12).

Leave a Reply