Vector Drawables – part 1
One of the building blocks of styling and themeing Android apps is understanding drawables. Drawables are graphic elements that come in two distinct types:
- Bitmap Drawables – these are bitmap files such as PNG which are rendered as images by the OS. They can also be 9-patch bitmaps which enable the OS to anamorphically distort the image to fit a particular region.
- Vector Drawables – These consist of XML files which contain some basic vector drawing command which the OS renders dynamically at runtime.
The main difference between the two types of drawable is that a single vector drawable will scale much better on a variety of different display types. Whereas you may need to produce multiple bitmap images to render well on hdpi, mdpi, and ldpi displays. The downside to vector drawables is twofold: firstly they will require more processing power to render,particularly gradients; secondly the drawing primitives are not as flexible as those in your favorite image manipulation software.
We’ll cover bitmap drawables and 9-patch in a later article and, for now, we’ll focus on vector drawables.
Let’s start by creating a basic Android project with a default activity named MainActivity, and targeting Android 2.3.3 . What we’re going to do is to alter this activity to look like a dialog box. For a real application it may be easier to use a Dialog instead of an Activity depending on your requirements, but for this example to keep things simple we’ll we’ll use an Activity.
First let’s create a new file at res/values/styles.xml:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="title"></style> <style name="body"></style> <style name="dialog"></style> </resources>
For now this is just a placeholder, and we’ll modify the actual styles later on. We’ll put it in place now so that our project will build.
Next we need to change the layout for VectorDrawablesActivity by editing res/layout/main.xml.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:id="@+id/title" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_height="wrap_content" style="@+style/title" android:text="Styling Android" /> <TextView android:layout_width="wrap_content" android:id="@+id/body" android:layout_alignLeft="@id/title" android:layout_below="@id/title" android:layout_height="wrap_content" style="@+style/body" android:text="This is a demonstration of how to use vector drawables to style a dialog box." /> </RelativeLayout>
This should now compile, and run:
It works, but it’s ugly! In part 2 we’ll get it looking more like a dialog box.
© 2011, 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
Vector Drawables – part 1 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.