Modern Android UI, or not by Action Bar alone Anton Rutkevich, CTO at Boolba Labs
Modern Android UI, or not by Action Bar alone
Jan 28, 2015
Android 4+ interface guidelines, core concepts, some tips for programmers and designers. Originally created for Mobile Optimized 2013 conference.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Modern Android UI, or
not by Action Bar alone
Anton Rutkevich, CTO at Boolba Labs
Intro
State of platform
Android 2.3 still valid (~40%),but will disappear in 0.5 .. 1 year
Android 3x skipped
Android 4 finally has design guidelines
Modern UI principles
Holo theme
Gives overall style
Backport: HoloEverywhere
Action Bar
Must be used for actions
Up button
Backport: ActionBarSherlock,
ActionBarCompat (soon)
ViewPager
Lateral navigation
Group of similar screens
Backport: android-support-
library, ViewPagerIndicator
NavigationDrawer
Dashboard pattern
replacement
Navigation between app
sections
Backport: android-support-library
Animation
Makes UI more dynamic
Many animations already included
Backport: NineOldAndroids
Responsive design
Problems
Unbalanced UI
Ideas
Divide content into Fragments
Use different layouts
Master-detail view
Alternative master-detail layoutsHide Expand/Collapse
Sliding Pane
Macro reflow
Limit width
List to Grid
Programmer tips
Coding
Use 9-patch and .xml drawables
Use sw<N>dp, w<N>dp
to detect large screens (ex. sw600dp,
w720dp)
Define common settings in style.xml,
themes.xml
Define dp values in dimens.xml
(padding, text size, line spacing, …)
ToolsShow GPU overdraw Show layout bounds
ToolsMulti-screen preview
3rd party libraries
Staggered Grid View Showcase ViewParallax Scroll View
Designer tips
developer.android.com/design
Android has more than one screen size
Ideas behind the visual representation
Good Holo style description
Ready to use assets
Android Asset StudioAndroid Holo Colors Action Bar Style Generator
Android Asset StudioDevice Frame Generator
Links
http://developer.android.com/designhttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Google I/O 2013 - Android Design for UI
Developers (some illustrations are taken from
there)
http://www.androidviews.net/
Thank you for your attention
Questions?
[email protected] Rutkevich at Google+http://www.linkedin.com/in/antonrutkevich
Related Documents
