Top tips for designing Android apps

By Matt Legaspi
Senior Product Designer

theScore’s most recent Android update brought with it a subtle redesign. At theScore, we’re fully committed to ensuring sports fans not only have a great experience, but a great-looking experience too. Designing for the mobile screen is unlike anything else, particularly when it comes to Android devices.

So here are six musts for anyone looking to embark on possibly the most misinformed area of the mobile space, Android application design.

1. Read the Android Design Guidelines
Google has put together a nice little website to help app designers thoroughly understand the platform. It’s number one on this list because you shouldn’t go any further without reading it. If you’re designing an Android app, this website should be in your favorites.

Link: Android Design by Google Inc.

 

2. Don’t spend all of your time designing for just one screen
It is very important that your design remains intact. Your design should not be compromised, regardless of the device a user is on. We recommend designing for the highest resolution device available and tweaking for smaller devices/lower densities during the development phase.

android-image copy

 

3. Preview your designs on an Android device
You should be doing this regardless of the platform you’re designing in. We mention this here because of a nice little tool called Android Design Preview. It allows you to select an image on your computer and view it on an Android device via USB. We rate the efficiency of this method 9/10 in comparison to emailing mocks to yourself. We would give it a perfect score if you could preview on a device remotely, as a few tools for iOS seem to do very well.

Tools: Android Design Preview by Roman Nurik

 

4. Learn how to Create 9-Patch graphics
A 9-patch is a bitmap that can stretch and fill an area without destroying the graphic. There is a very specific way to create and name 9-patch graphics in order for them to work. We’d recommend learning to create them yourself at first, but we’ve also found this tool to be very handy. Creating a scalable bitmap using the Simple Nine-patch generator. The ‘Nine’ is for the number of regions your image is divided into. This will keep those nice round corners from stretching.

Tools: Simple Nine-patch Generator by Roman Nurik

1-3xbczpaLlfqLhfcSgIFxCQ

 

5. Understand how to measure your design in PX, DP and SP
This is probably the most important. If you plan on developing the application yourself or working with a developer, you need to understand how to measure your design. The worst thing you can do is leave your work open for interpretation, as this will reduce your UI Spec to a digital painting. The three major units of measurement for Android are PX (pixels), DP (Device-Independent Pixels) and SP (Scale-Independent Pixels). From my experience, we’ve generally used SP for measuring type, DP for width/height/spacing and PX for utilizing thin lines (such as separators and hairline shadows). Since you’ll be doing most of your design work in XXHDPI, you’ll need a way to convert those values to MDPI for development. The DPI Calculator by Sage42 is a lifesaver, and does just this. In the development phase, it’s also a great idea to make use of the ‘show layout bounds’ feature in your phone’s developer tools. With this turned on, you’ll have a better understanding of how all of the elements are laid out.

Tools: DPI Calculator by Sage42

A screenshot of the work-in-progress with the ‘show layout bounds’ toggle turned on.

1-dDrgLFxgIjvCqS7Zu9fsag

1-_1c49AMLe-qItnmv4lFLnA

 

6. Take time to perfect bitmap assets for ALL resolutions
You might feel the urge to export the crispiest graphics for the highest resolution (XXHDPI), and scale down the rest of the assets in an automated fashion as an afterthought. This can cause eye soreness  for users on some devices. Make sure to export a sharp asset set for each density.

1-3kjJFx0mekN2xnoMqKcANA


Matt Legaspi is Senior Product Designer at theScore, forming an integral part of the company’s in-house product development team. Follow him on Twitter @mattlegaspi