Shape 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.
• Shape Drawables – These consist of XML files which contain some basic shape drawing commands 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 shape 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:

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.

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 – 2014, Mark Allison. All rights reserved.

Copyright © 2011 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.