Styling Android

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.
(more…)

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.
(more…)

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…)

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…)

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.
(more…)

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.

(more…)

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:

1
2
3
4
5
6
7

< ?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<solid android:color="#000000"></solid>
	<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"></corners>
	<stroke android:color="#000000" android:width="1dp"></stroke>
</shape>

(more…)

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:

1
2
3
4
5
6

<style name="dialog">
	<item name="android:windowFrame">@null</item>
	<item name="android:windowIsFloating">true</item>
	<item name="android:windowNoTitle">true</item>
	<item name="android:windowContentOverlay">@null</item>
</style>

(more…)

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.

(more…)