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