How to Design an App for Android

Do you want create an app for Android?

Have you thought about how you want the User Interface to look?

One thing to consider when creating an app is the design. Using conventions and guidelines based on the platform you are creating for your app will help you to avoid two big problems: breaking conventions and clashing styles.

By following platform specific conventions and guidelines for your app, you help the user work in your app without thinking. You don’t want your users to be confused! People interact differently with different devices – I’m an iPhone user and have no clue what I’m doing when it comes to using an Android device!

Each of the mobile platforms has different physical controls, navigational architectures, screen sizes, and resolutions. All of these affect the visual design of applications. They also have their own clear design philosophies – an app designed specifically for iOS would look very out of place on an Android device.

The image below compares the UI of the messages apps on iOS and Android:

So how do you create a UI for an Android app? I’ll show you by following Google’s guidelines. 

Design Guidelines

The best way to create a platform specific UI is to work from the design guidelines. Google has a really handy website for developers. It provides information on everything design related from choosing fonts and colour palettes, to layout and measurements.

I followed Google’s Android design guidelines to create the UI for a simple two line list – the inbox of an email app. I did this in LiveCode and following these steps:

1. Layout the controls

2. Set the text properties

3. Choose a colour palette

Before I reach the colour palette stage of the design, I will be using a combination of black and white on a grey background.

1. Lay out the Controls

The first thing I am going to do is add the controls I need to create the UI and then lay them out. For a simple two line list, I will need the following:

• Toolbar – title, menu icon and search icon
• Content block comprised of rows – avatar (circle icon), two line list with text and secondary text, dividing line

Before we can position the controls correctly, we need to choose a screen size. The Google design guide uses measurements of dp and sp. Using the Android developer guide to screen sizes, I have chosen to create the UI for a screen size of 320 px x 480 px so that 1dp = 1sp = 1px. All sizes I work with will be in pixels, so 24×24 means 24px x 24px.

To help with the layout, I suggest downloading the handy, colour-coded layout templates provided by Google. You can get them here. I will work from these templates to first lay out the toolbar correctly.

The height of the toolbar is 72. All of the controls within the toolbar need to be vertically centered. In other words: the y location of each of the controls in the toolbar is 36. The icons have the same size: 24 x 24. The menu icon is placed such that there is a buffer of 16 between the left of the screen and the left of the menu icon. The search icon is placed such that there is a buffer of 16 between the right of the screen and the right of the search icon. The text of the title should be left aligned with a buffer of 72 between the left of the screen and the left of the title.

For the content block, I will continue to work from the templates, but I will also refer to this guide for more specific layout guidelines for a two line list. You will notice that a list is comprised of tiles and each row sits in the tile – you do not need to physically create the tile that the controls for the row will be placed in. The tile is a 320 x 72 box, where the top tile has a buffer of 8 between its top and the bottom of the toolbar. The location of the top tile is therefore 160, 116.

The size of the avatar, which I will replace with a circle icon for now, is 36 x 36. It is vertically centered and there is a buffer of 16 between the left of the icon and the left of the screen. Both fields that display text have size 232 x 20. They each have a buffer of 72 on the left and a buffer of 16 to the right. The field that displays the main text (in this case, the contact name) is positioned 10 above the vertical center of the tile. The field that displays the secondary text (in this case, the first line of the email) is positioned 10 below the vertical center of the tile so that there is a buffer of 20 between it and the field above. The size of the dividing line is 248 x 2. There is a buffer of 72 on the left and the bottom of the line lines up with the bottom of the tile.

2. Set the Text Properties

The font family used in Android apps is Roboto, which is available for download here.

This page provides the information you will need to know which exact font your text should have, and what size and style it should be. I will be using it in conjunction with the list style guide.

The font of the toolbar title is Roboto-Medium and has size 20. The primary text in the list has font Roboto-Regular and size 16. The secondary text in the list should have font Roboto-Regular at size 14.

3. Choose a Colour Palette

The guide for how to set the colours of your controls can be found here. Choose a colour palette for the toolbar. The colour of the toolbar background should be the 500 colour in your chosen colour palette. I have chosen the indigo colour palette for this example.

Notice the text colour on the palette: lighter colours have black text and darker colours have white text. It is important that the text and icons have the correct colour as indicated on the colour palette. For the 500 colour in the indigo colour palette, the text is white. So the text and icons in the toolbar must be white.

The background colour of the list is white, so all icons, graphics and text in the list should be black. We then change the opacity to achieve the desired look.

Set the opacity of:

• the circle icon to 54
• the primary text to 87
• the secondary text to 54
• the bottom line to 12

And there you have at! A list view in the style of an Android app:

The Final App

Lets see how it looks with a full list, with avatars in place of the circle icons:

Here are some examples of how it might look with different colour palettes:

Now you can design the UI for your own Android app!

What do you think? Are you thinking of creating an Android App? Have you already created an Android App? Please share your thoughts and recommendations in the comments!