Archive for the ‘Drawables’ Category

Ripples – Part 1

Friday, August 1st, 2014

At the time of writing, Goggle have recently announced the Android L Developer Preview which is a foretaste of some of the goodies coming in the full L release of Android. Over the coming weeks and months we’ll be covering a number of the new APIs and features being added in API 21. To start with, we’ll look at quite a subtle things that is the basis for providing touch feedback to our users: Ripples.

Dynamic Icon – Part 2

Friday, March 22nd, 2013

In the previous article we got a basic app set up and got our images set up ready to create an image in which part of the colour could change depending on the values of three SeekBars representing the red, green, and blue components. In this article we’ll look at how we actually apply those colour values and create the required image.

Dynamic Icon – Part 1

Friday, March 15th, 2013

Recently in my day job for Byte Squared I wanted to have an ImageButton in which a part of the image should change colour to match the a value selected by the user. In other words the icon needed to change dynamically. In this series of articles we’ll look at a method of achieving this.

Transparency – Part 1

Friday, May 25th, 2012

In this series of articles, we’ll take a look at transparency and how we can use it within our UI to create some nice effects. In this article we’ll have a look at some of the basics.

More Vector Drawables – Part 2

Friday, April 27th, 2012

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.

More Vector Drawables – Part 1

Friday, April 20th, 2012

In recent articles on Styling Android I have diverged a little from pure UI and covered some more subtle aspects to improve your UX. In this series we’re going to return to something that was covered in the very first post to Styling Android: Vector Drawables. Previously we have looked at how vector drawables can be used instead of bitmaps to provide better scaleability of your UI components between different devices & from-factors. In this series we’ll look at some further tricks that you can use to get the most out of vector drawables.

State List Drawables

Saturday, April 2nd, 2011

In the last article we covered the styling of a dialog box using vector drawables. In this article we are going to add a cancel button to that dialog box, and style the button. Styling widgets is a little more complex that the static styling that we’ve previously covered because widgets change state depending on whether they are disabled, have focus, are selected, clicked, etc. and they need to change visually to indicate that state to the user. State List drawables are the tool that we need to use to manage these state changes.


Vector Drawables – part 3

Tuesday, March 29th, 2011

In part 2 we got our basic dialog box look and feel working, but still had some tidying up to do.

The first things that we need to do it to make the dialog box title look a bit more like a dialog box title. We need to define a new drawable for the background of the title in res/drawable/dialog_title.xml:


Vector Drawables – part 2

Monday, March 28th, 2011

In part 1 we set up a basic dialog box project, but it was badly in need of some styling and it didn’t bear much resemblance to a dialog box.

Let’s begin part 2 by making this actually appear in a centralised dialog-style window. To do this, we need to begin defining the “dialog” style that we declared earlier in res/values/styles.xml:


Vector Drawables – part 1

Monday, March 28th, 2011

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.