Building beautiful User Interface in Android

Lars Vogel | vogella

Designing great User Interfaces in Android

Despite its title, this is a technical talk. We talk about

technical solutions for designing beautiful Android

applications.

Independent Eclipse and Android consultant, trainer and book author

Eclipse committer

More then a million visitors on http://www.vogella.de

About me – Lars Vogel

About Design

Themes

9-patch graphics and Android icons

XML drawables

Visual feedback

Own Layouts

Own Views

Q&A

Are Android Apps beautiful?

Google Listen Shazam

…. the default

Android app look is kind

of ugly...

Even though Android 3.0 and higher got better

Yet it is possible

to make a difference

Google Calendar

Seesmic

Example

ListView

Using Themes

A style is a collection of properties that specify the look and format for a View or window.

Own XML resource in res/values/

Style can be referred in your layout via attribute style:@style/yourname

Style

Styles applied to Activities or Applications

Android provides standard themes

Android 4.0 specifies the Holo theme which the vendor is not allowed to change

Themes

Not well documents, check out Android source and docu

./frameworks/base/core/res/res/values/styles.xml

http://developer.android.com/reference/android/R.attr.htmlhttp://developer.android.com/reference/android/R.styleable.htmlhttp://developer.android.com/reference/android/R.style.html

Own Themes go into /res/values

Can extend existing themes

Themes

9-patch Graphics

Icons

Re-use Android icons

Path: /android-sdks/platforms/android-xx/data/res/drawable-qualifier

Touch Area

Next Example

Provide visual feedback.. especially on long running operations

XML drawables

There must be more....

You can always create you own Views

The following examples are based on a presentation of Eric Burke (Square) at the O'Reilly Android Open Conference in San Francisco.

Thanks to Eric!

Own Layout - Having a little shine

Own ImageView with Round Corner

Alpha Bending

Transparent Frame

Code Example: Available on http://www.vogella.de/code/code.html

de.vogella.android.userinterface

Android: Where to go from here:

Android Introduction Tutorial http://www.vogella.de/articles/Android/article.html

Or Google for „Android Development Tutorial“

Android SQLite and ContentProvider Bookhttp://www.amazon.com/dp/B006YUWEFE

More on Android http://www.vogella.de/android.html

Thank you

For further questions:

[email protected]://www.vogella.deTwitter http://www.twitter.com/vogellaGoogle+ http://gplus.to/vogella

License & Acknowledgements

• This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License

– See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US