Tips an Tricks how to build beautiful user interfaces. Partially based on examples from Eric Burke (Square). Code example can be found here: http://www.vogella.de/code/de.vogella.android.userinterface/codestartpage.html

1. Lars Vogel | vogella
Designing great User Interfaces in
Android

2. Despite its title, this is a
technical talk. We talk about
technical solutions for
designing beautiful Android
applications.

3. About me – Lars Vogel
Independent Eclipse and Android consultant, trainer
and book author
Eclipse committer
More then a million visitors on http://www.vogella.de

4. About Design
Themes
9-patch graphics and Android icons
XML drawables
Visual feedback
Own Layouts
Own Views
Q&A

5. Are Android Apps
beautiful?

6. Google Listen Shazam

7. …. the
default
Android app
look is kind
of ugly...
Even though Android 3.0
and higher got better

8. Yet it is
possible
to make a
difference

9. Google Seesmic
Calendar

10. Example
ListView

11. Using Themes

12. Style
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

13. Themes
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

14. 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.html
http://developer.android.com/reference/android/R.styleable.html
http://developer.android.com/reference/android/R.style.html
Own Themes go into /res/values
Can extend existing themes

15. 9-patch Graphics

16. Icons

17. Re-use Android icons
Path: /android-sdks/platforms/android-
xx/data/res/drawable-qualifier

18. Touch Area

19. Next
Example

20. Provide
visual
feedback..
especially
on long
running
operations

21. XML drawables

22. There
must be
more....

23. You can
always create
you own
Views

24. 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!

25. Own Layout - Having a little shine

26. Own ImageView with
Round Corner

27. Alpha Bending

28. Transparent Frame

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

31. 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 Book
http://www.amazon.com/dp/B006YUWEFE
More on Android
http://www.vogella.de/android.html

32. Thank you
For further questions:
Lars.Vogel@gmail.com
http://www.vogella.de
Twitter http://www.twitter.com/vogella
Google+ http://gplus.to/vogella

33. 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