Modern Android UI,ornot by Action Bar aloneAnton Rutkevich,CTO at Boolba Labs
Intro
State of platformAndroid 2.3 still valid (~40%),but will disappear in 0.5 .. 1 yearAndroid 3x skippedAndroid 4 finally has...
Modern UI principles
Holo themeGives overall styleBackport: HoloEverywhere
Action BarMust be used for actionsUp buttonBackport: ActionBarSherlock,ActionBarCompat (soon)
ViewPagerLateral navigationGroup of similar screensBackport: android-support-library, ViewPagerIndicator
NavigationDrawerDashboard patternreplacementNavigation between appsections
AnimationMakes UI more dynamicMany animations already includedBackport: NineOldAndroids
Responsive design
ProblemsUnbalanced UI
IdeasDivide content into FragmentsUse different layouts
Master-detail view
Alternative master-detail layoutsHide Expand/CollapseSliding Pane
Macro reflow
Limit width
List to Grid
Programmer tips
CodingUse 9-patch and .xml drawablesUse sw<N>dp, w<N>dpto detect large screens (ex.sw600dp, w720dp)Define common settings ...
ToolsShow GPU overdraw Show layout bounds
ToolsMulti-screen preview
3rd party librariesStaggered Grid View Showcase ViewParallax Scroll View
Designer tips
developer.android.com/designAndroid has more than one screen sizeIdeas behind the visual representationGood Holo style des...
Android Asset StudioAndroid Holo Colors Action Bar Style Generator
Android Asset StudioDevice Frame Generator
Linkshttp://developer.android.com/designhttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.htmlGoogle I/O 2...
Thank you for your attentionQuestions?anton.rutkevich@boolbalabs.comAnton Rutkevich at Google+http://www.linkedin.com/in/a...
Upcoming SlideShare
Loading in …5
×

Modern Android UI, or not by Action Bar alone

2,531 views

Published on

Android 4+ interface guidelines, core concepts, some tips for programmers and designers. Originally created for Mobile Optimized 2013 conference.

Published in: Technology
  • Be the first to comment

Modern Android UI, or not by Action Bar alone

  1. 1. Modern Android UI,ornot by Action Bar aloneAnton Rutkevich,CTO at Boolba Labs
  2. 2. Intro
  3. 3. State of platformAndroid 2.3 still valid (~40%),but will disappear in 0.5 .. 1 yearAndroid 3x skippedAndroid 4 finally has design guidelines
  4. 4. Modern UI principles
  5. 5. Holo themeGives overall styleBackport: HoloEverywhere
  6. 6. Action BarMust be used for actionsUp buttonBackport: ActionBarSherlock,ActionBarCompat (soon)
  7. 7. ViewPagerLateral navigationGroup of similar screensBackport: android-support-library, ViewPagerIndicator
  8. 8. NavigationDrawerDashboard patternreplacementNavigation between appsections
  9. 9. AnimationMakes UI more dynamicMany animations already includedBackport: NineOldAndroids
  10. 10. Responsive design
  11. 11. ProblemsUnbalanced UI
  12. 12. IdeasDivide content into FragmentsUse different layouts
  13. 13. Master-detail view
  14. 14. Alternative master-detail layoutsHide Expand/CollapseSliding Pane
  15. 15. Macro reflow
  16. 16. Limit width
  17. 17. List to Grid
  18. 18. Programmer tips
  19. 19. CodingUse 9-patch and .xml drawablesUse sw<N>dp, w<N>dpto detect large screens (ex.sw600dp, w720dp)Define common settings instyle.xml, themes.xmlDefine dp values in dimens.xml(padding, text size, line spacing, …)
  20. 20. ToolsShow GPU overdraw Show layout bounds
  21. 21. ToolsMulti-screen preview
  22. 22. 3rd party librariesStaggered Grid View Showcase ViewParallax Scroll View
  23. 23. Designer tips
  24. 24. developer.android.com/designAndroid has more than one screen sizeIdeas behind the visual representationGood Holo style descriptionReady to use assets
  25. 25. Android Asset StudioAndroid Holo Colors Action Bar Style Generator
  26. 26. Android Asset StudioDevice Frame Generator
  27. 27. Linkshttp://developer.android.com/designhttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.htmlGoogle I/O 2013 - Android Design for UIDevelopers (some illustrations are taken fromthere)http://www.androidviews.net/
  28. 28. Thank you for your attentionQuestions?anton.rutkevich@boolbalabs.comAnton Rutkevich at Google+http://www.linkedin.com/in/antonrutkevic

×