Dialog Box / Inset Drawable / Shape Drawable

Shape Drawables – part 3

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:

This is very similar to the previous shape drawable that we defined in part 2. The aspects worth highlighting are that we are using a solid fill rather than a gradient (line 4), and we are only rounding the top two corners (line 5).

Now that we have defined this, we need to apply the background to the “title” style:

We assign the background drawable in line 5, and it now looks like this:

Almost There
Almost There

That’s pretty much done as far as the actual dialog box itself is concerned, however, it would be nicer if we could pull the sides of the dialog box in a little from the edge of the screen to further strengthen the visual metaphor of a floating dialog box. The simple way of doing this is to simply apply a margin to the “dialog” style:

This does what we want in putting a margin around the dialog box, but causes a problem with the title:

Oh Dear!
Oh Dear!

What is happening here is that the child objects are inheriting the margin settings from their parent. To fix this, we need to reset the margin for these child elements:

This is now looking complete:

Complete Dialog Box
Complete Dialog Box

However, there is another method of achieving the margin which is worth mentioning because it introduces us to another concept in vector drawables, and that is using an inset drawable. An inset drawable enables us to put a margin around an existing drawable. Let’s define an inset drawable at res/drawable/dialog.xml:

This is basically putting a wrapper around the existing dialog_background drawable, and insetting the left and right edges. To use this, we need to modify our styles slightly:

The main change here is on line 14 where we are using the dialog drawable instead of the dialog_background drawable. Also we have commented out the margins that we applied previously as we don’t want to apply the margin twice. Either method is fine, but it was worth showing that there are different ways of achieving the same result (as is often the case in Android).

The dialog box is now complete, it has some margins applied, and everything is looking good. The final thing worth showing is that it is possible to control how the background is changed. The default behaviour is for the background behind the dialog to be “dimmed” so that the dialog box stands out. However, we can change this behaviour so that the background is blurred instead. To do this, we actually need to do some Java coding for the first time in this article. The onCreate method of the MainActivity that was created by the New Android Project wizard in Eclipse looks like this:

We can blur the background by adding a few lines of code:

What we are doing here is getting the layout parameters for the window (line 6), overriding the “dimAmount” value to turn off the dimming (line 7), applies this back to the window (line 8), and finally sets the FLAG_BLUR_BEHIND flag on the window.

If we run this we’ll see the following:

Blurred Background
Blurred Background

That’s it! Hopefully this article has given some insight in to how vector drawables can be used to apply some simple but visually appealing styling to your Android apps. In the next article, we’ll have a look at state drawables which allow you to style individual widgets.

The source code for this article can be downloaded here.

© 2011 – 2014, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0 Shape Drawables – part 3 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *