Building beautiful User Interface in Android

25,006
-1

Published on

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

Published in: Technology

Building beautiful User Interface in Android

  1. 1. Lars Vogel | vogellaDesigning great User Interfaces inAndroid
  2. 2. Despite its title, this is atechnical talk. We talk about technical solutions fordesigning beautiful Android applications.
  3. 3. About me – Lars VogelIndependent Eclipse and Android consultant, trainerand book authorEclipse committerMore then a million visitors on http://www.vogella.de
  4. 4. About DesignThemes9-patch graphics and Android iconsXML drawablesVisual feedbackOwn LayoutsOwn ViewsQ&A
  5. 5. Are Android Apps beautiful?
  6. 6. Google Listen Shazam
  7. 7. …. the defaultAndroid applook is kind of ugly...Even though Android 3.0 and higher got better
  8. 8. Yet it is possibleto make adifference
  9. 9. Google SeesmicCalendar
  10. 10. ExampleListView
  11. 11. Using Themes
  12. 12. StyleA style is a collection of properties that specify the lookand format for a View or window.Own XML resource in res/values/Style can be referred in your layout via attributestyle:@style/yourname
  13. 13. ThemesStyles applied to Activities orApplicationsAndroid provides standard themesAndroid 4.0 specifies the Holo themewhich the vendor is not allowed tochange
  14. 14. ThemesNot well documents, check out Androidsource and docu./frameworks/base/core/res/res/values/styles.xmlhttp://developer.android.com/reference/android/R.attr.htmlhttp://developer.android.com/reference/android/R.styleable.htmlhttp://developer.android.com/reference/android/R.style.htmlOwn Themes go into /res/valuesCan extend existing themes
  15. 15. 9-patch Graphics
  16. 16. Icons
  17. 17. Re-use Android iconsPath: /android-sdks/platforms/android-xx/data/res/drawable-qualifier
  18. 18. Touch Area
  19. 19. NextExample
  20. 20. Providevisualfeedback..especiallyon longrunningoperations
  21. 21. XML drawables
  22. 22. Theremust bemore....
  23. 23. You canalways createyou ownViews
  24. 24. The following examples arebased on a presentation of EricBurke (Square) at the OReillyAndroid Open Conference inSan Francisco.Thanks to Eric!
  25. 25. Own Layout - Having a little shine
  26. 26. Own ImageView withRound Corner
  27. 27. Alpha Bending
  28. 28. Transparent Frame
  29. 29. Code Example:Available onhttp://www.vogella.de/code/code.htmlde.vogella.android.userinterface
  30. 30. Android: Where to go from here:Android Introduction Tutorial http://www.vogella.de/articles/Android/article.htmlOr Google for „Android Development Tutorial“Android SQLite and ContentProvider Bookhttp://www.amazon.com/dp/B006YUWEFEMore on Androidhttp://www.vogella.de/android.html
  31. 31. Thank youFor further questions:Lars.Vogel@gmail.comhttp://www.vogella.deTwitter http://www.twitter.com/vogellaGoogle+ http://gplus.to/vogella
  32. 32. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×