Scribd
Upload
169 views12 pages

Android User Interface Toby Kurien

Johannesburg GTUG Meetup #5 presentation on Android UI development. Thanks Toby. http://jhb.gtug.co.za

Uploaded by

Hans Christian V. Stockhausen
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
169 views12 pages

Android User Interface Toby Kurien

Johannesburg GTUG Meetup #5 presentation on Android UI development. Thanks Toby. http://jhb.gtug.co.za

Uploaded by

Hans Christian V. Stockhausen
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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