Archive for the ‘Resource Types’ Category

App UI / UX – Part 1

Friday, May 23rd, 2014

In the previous series on Bluetooth LE we got a simple app working which read temperature and humidity values from a Texas Instruments SensorTag, and displayed them. Functionally the app worked quite well but, because the series was focused on BLE topics, we neglected the UI somewhat. In this series we’ll take a look at various techniques that we can employ to make our app feel much nicer, and provide a richer and, hopefully, more engaging experience for the user.

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.


Friday, April 8th, 2011

Note: I will use the UK and US spellings of colour / color interchangeably in this article because in some places the syntax and naming conventions dictate the US spelling. Where necessary, I shall use the spelling required by Android for it to work and highlight where spelling is important.

Up until now, we have specified colours where we need them as #RRGGBB values. While this has worked well for us, it can become difficult to maintain as projects grow in size. For example, if we have a specific shade of green, like the one that we used to style the button in the last article, and we use that in a large number of different styles and drawables. If we need to make a change to that shade of green, then tracking down and changing each instance where we use it, can be time consuming and, more significantly, prone to error. Thankfully there is a solution: colour resources – A resources file, which we create at res/values/colours.xml. Note: I have used the UK spelling for this file name, and the actual file name is not important – it is the elements within the file which need to be spelled correctly. Moreover, it is possible to store colour definitions, and indeed any resources, across multiple files without any strict naming conventions. However it is useful to store resources of the same type in a single file to make it easier to maintain your code.


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: