Scribd Logo
Upload

Welcome to Scribd!

  • 137 views

    Android User Interface Toby Kurien

    Uploaded by

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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Android User Interface Toby Kurien

    Uploaded by

    Hans Christian V. Stockhausen
    137 views12 pages
    Johannesburg GTUG Meetup #5 presentation on Android UI development. Thanks Toby. http://jhb.gtug.co.za

    Original Title

    JHB_GTUG_AndroidUI

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    137 views12 pages

    Android User Interface Toby Kurien

    Uploaded by

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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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