Modern Android UI, or not by Action Bar alone

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?

anton.rutkevich@boolbalabs.comAnton Rutkevich at Google+http://www.linkedin.com/in/antonrutkevich