Android User Interface Toby Kurien

Download as pdf or txt
Download as pdf or txt
You are on page 1of 12

Android User Interface Toby Kurien

User Interface
About 70% of your coding time will be spent on the user interface Most coders like to skimp on UI and focus on features Android Market will tell you to do the opposite
e.g. compass, spirit level, Evernote, etc.

I'll give you some trade secrets to make your apps look kick-ass with minimal effort

Our app design


Title bar Action bar List header List of names Footer (Designed using Pencil)

Build our app


Start with standard Android UI controls
We will skin it afterwards

Create a new blank app


We need an app icon in 72x72, 48x48, and 36x36

Create the main layout


Add our header Add the ListView Add and include a list header and footer

Let's get some graphics!


Go to http://elegantthemes.com Rip off whatever we need
Firefox's Page info is very handy for this

Use an image editor to splice together 9-patch images Use draw9patch tool to make 9-patch images

Incorporate the graphics


Create shapes for gradients
For buttons and selector drawables

Create tiles for tile-able images Create selectors for state-based images Add these to your layouts
Layout editor doesn't support all these, so you need to run the app to test it

Have fun tweaking


Try out different layouts for landscape/portrait Also for different pixel densities Add gradients for list items Add custom selectors for list items Have graphical elements in the list that have state-based drawables

Finished UI

Take away
Spend more time making scalable user interfaces
Use RelativeLayout, Layout weights, and multiple-dpi images Refactor all your styles, colours, strings, etc. into files (copy & paste is not faster!)

Use a graphic designer if possible Otherwise, grab website template graphics and use them in your app Adopt standard best-practises wherever possible, instead of creating your own, e.g. dashboard pattern, action bar, quick actions, etc.

See Also
Android UI utils:
https://code.google.com/p/android-ui-utils/ http://pencil.evolus.vn/ (Pencil mockup tool)

GreenDroid library:
https://github.com/cyrilmottier/GreenDroid

Scalable UI: Converting iOS to Android: Android design guidelines from Mutual Mobile
http://www.mutualmobile.com/wp-content/uploads/2011/04/ADG1.1.pdf

http://www.androiduipatterns.com/2011/05/designing-scalable-android-app

http://www.androiduipatterns.com/2011/04/5-tips-for-converting-ios-ui-to-

References

http://developer.android.com/guide/practices/ui_guideli http://androiduipatterns.com http://androidpatterns.com http://elegantthemes.com

Thanks @tobykurien http://tobykurien.com

Twitter @jhbgtug

You might also like