Android 4.0 UI Design TipsJustin Lee

0�+)%�� �#.1$/(����� �����2 �#.1,&!-*�

�"'��������

����������������������������������� ���������

Evolution of Android

Gingerbread Ice Cream SandwichHoneycombAndroid 2.3 Android 3.0 Android 4.0

One OS for Smartphones & Tablets

TopicsMajor UI ChangesDesign PatternsDo and Don’tICS widgets in Titanium Mobile

Major UI Changes

Fight for Fragmentation

Android is not easy to learn http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up

Inconsistent hardware buttons is a big problem

ICS drop hardware buttons

Gingerbread ICS

screen

Software Buttons are dynamic

Landscape Left

Landscape Right

Back Home Recents

What’s missing?

Menu Button

Menu button is NOT longer a primary button

Gingerbread ICS

Quiz: How to goto settings page?

Not to many people can get it by themselves

ICS make the menu much more easy to find

The menu button in legacy app still available on ICS

But it’s time to say goodbyehttp://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html

Migrate the global actions to the action bar & action overflow

Old New

Split action bar for contextual actions

Old New

Backwards compatibility

Legacy software

Legacy hardware

http://developer.android.com/design/patterns/compatibility.html

Back Button

The behavior of back button is inconsistent from user’s POV

?

In app navigation is much more predictable

Home Button

Home button perform too many functions before ICS

tap

long press

tap

The only function of home button on ICS is going home

How to goto a recent app?

Recents Button

Tap recents button to show recent app list

The new recents screen

tap to switch

swipe to remove

Long press gesture changedOld New

Open contextual menu Select the item

App UI Design Patterns

Common App UI

http://developer.android.com/design/get-started/ui-overview.html

1.Main Action Bar2.View Control3.Content Area4.Split Action Bar

General App StructureTop level views

Category views

Detail/edit view

New in ICS1.Navigation Bar

2.Action Bar

3.Multi-pane layouts

4.Selectionhttp://developer.android.com/design/patterns/new-4-0.html

Navigation

Back Up

In-app navigationsystem & in-app navigation

http://developer.android.com/design/patterns/navigation.html

Swipe ViewsSwiping Between Detail Views

Swiping Between Tabs

http://developer.android.com/design/patterns/swipe-views.html

Action Bar

http://developer.android.com/design/patterns/actionbar.html

1.App icon2.View Control3.Action Buttons4.Action overflow

Split Action Bars

http://developer.android.com/design/patterns/actionbar.html

1.Main action bar2.Top bar3.Bottom Bar

Multi-pane layouts

Smartphone Tablet

http://developer.android.com/design/patterns/multi-pane-layouts.html

Selection

Contextual action bar

Dynamically adjust CAB actions

http://developer.android.com/design/patterns/selection.html

Long press on an item in list to select

Notifications

http://developer.android.com/design/patterns/notifications.html

Do and Don’t

Do make the large, obvious tap targets

Touchable UI components are generally laid out along 48dp units.

http://developer.android.com/design/style/metrics-grids.htmlhttp://www.slideshare.net/AndroidDev/android-ui-design-tips

Do use screen density independent units (dp)

http://developer.android.com/guide/practices/screens_support.html

not density independent (px)

density independent (dp)

Do create versions of all resources for high density screens

http://developer.android.com/design/style/devices-displays.html

Do properly handle orientation changes

http://developer.android.com/design/style/devices-displays.html

Stretch/compress

Stack

Expand/collapse

Show/hide

Do follow Android icon guideline

http://developer.android.com/design/style/iconography.html

LauncherLauncher

Action Bar

Don't mimic UI elements from other platforms

Android

iOS

Windows Phone 7

http://developer.android.com/design/patterns/pure-android.html

Don't mimic UI elements from other platforms

http://developer.android.com/design/patterns/pure-android.html

Android

iOS

Windows Phone 7

Don't use bottom tab bars

http://developer.android.com/design/patterns/pure-android.html

Don't use labeled back buttons on action bars

http://developer.android.com/design/patterns/pure-android.html

Don't use right-pointing carets on line items

http://developer.android.com/design/patterns/pure-android.html

ICS widgets in Titanium Mobile

There is no action bar yethttps://jira.appcelerator.org/browse/TIMOB-2371

what to do?

Simulate it Extend the API

Javascript Module Native Module

Javascript Java + Javascript

exports - a free variable within a module, to which multiple properties may be added to create a public interface

module.exports - an object within a module, which may be REPLACED by an object representing the public interface to the module

Common JS Module

Preparing for assethttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

Question?

Thank You!