The Android Experience

The Android Experience
24/05/2012
Emanuele Di Saverio
Guido Parlato

intro ia signature gestures multitask wrap up

Android evolved into a ﬁrst-class
design platform.
Today we really have an
Android Experience

Whymca Mobile Developer Conference 2012


Who?
Guido Parlato
Interaction designer @
Interaction Designer and Information Architect
specializing in the area of mobile and web interface.

@higui

Whymca Mobile Developer Conference 2012 3


Who?
Emanuele Di Saverio
Senior Design Technologist @
Book Author @ http://www.androidavanzato.it
(with Stefano Sanna @gerdavax)

@hazam


frog drives innovation
for the connected world.

6

A global team

Seattle Amsterdam Kiev & Vinnitsa
Boston
Milano Munich
San Francisco
New York

Austin Shanghai
Bangalore

Johannesburg

Apr 09 Sep 09 Oct 09 May 10 Dec 10 Feb 11 Oct 11

Over the hills and Far away

http://d.android.com/design
Google launched an up-to date, accurate and structured web repository
for guidelines about application design


With ICS has been developed a
new system of design guidelines to
combine beauty, simplicity and
purpose to create an exceptional
experience


Rule of thumb

The thumb has limited range and ﬂexibility,
only about a third of the screen is in truly
eﬀortless

Frequently used buttons should occupy the
bottom of the screen for easy tapping, while
other controls should be nudged out of
harm's way

Toolbars and navigation typically land at the
bottom edge of phone interfaces


Rule of thumb

Stacking controls in a touch
interface should always be
avoided, especially at screen
bottom

For Android, app navigation and
controls should ﬂoat to the top

Foursquare
Foursquare


Rule of thumb

It is not just a matter of thumb
comfort, but also that ﬁngers
obscure the screen.
The bottom is where hovering
hands are least likely to cover
content



Almost 6 months ago

Action bar

Main navigation

Filter bar

Search bar

Filter bar



Foursquare Foursquare
Before ICS release After ICS release



ActionBar

• Navigation (tabs and drop down)
• Up button
• Action items
• Option menu
• Split action bar (contextualized action items)



“The Action Bar is arguably the
most important structural element
of an Android app.”
Android Design site



Good boy
you can build neat UI following the rules

TED
TED Conferences



Good boy Pocket
you can build neat UI following the rules Read It Later



so eﬀective to be ported into iOS applications



Style out Action Bar

Android has powerful styling
Decoupling is good but, every decoupling brings one level on indirectness
Styling is a matter of doc research (sometimes source code)

Small projects like Action Bar Style Generator can save days of research!
http://jeﬀgilfelt.com/



Style out Action Bar
<resources>
<style name="Theme.example" parent="android:style/Theme.Holo.Light">
<item name="android:selectableItemBackground">@drawable/selectable_background_example</item>
<item name="android:popupMenuStyle">@style/example_PopupMenu</item>
<item name="android:dropDownListViewStyle">@style/example_DropDownListView</item>
<item name="android:actionBarTabStyle">@style/example_ActionBarTabStyle</item>
<item name="android:actionDropDownStyle">@style/example_DropDownNav</item>
<item name="android:actionBarStyle">@style/example_ActionBar</item>
</style>
<style name="example_ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">@drawable/ab_solid_example</item>
<item name="android:backgroundStacked">@drawable/ab_stacked_solid_example</item>
<item name="android:backgroundSplit">@drawable/ab_bottom_solid_example</item>
</style>
<style name="example_PopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>
</style>
<style name="example_DropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">@drawable/selectable_background_example</item>
</style>
<style name="example_ActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">@drawable/tab_indicator_ab_example</item>
</style>
<style name="example_DropDownNav" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:background">@drawable/spinner_background_ab_example</item>
<item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>
<item name="android:dropDownSelector">@drawable/selectable_background_example</item>
</style>
</resources>



Get in Control

ActionBar standard support does a lot of stuﬀ, more importantly
does a lot of device-adaptive, platform compliant stuﬀ.

It’s possible to take complete control and build a custom title bar,
or do whatever.

Weigh your options!

Build it
+ Scale it
+ Update it
= $$$



Bad Boy
Twist the Action Bar to give personality
Astrid Task Flud News
Astrid Inc. Flud

25



Bad Boy
Twist the Action Bar to give personality
Fancy Kaleidoscope
Thingd Inporia Inc



Get in Control

requestWindowFeature(Window.FEATURE_NO_TITLE);
getActionBar().hide();
better yet is to set it up on the app theme

<style name="Theme.MyApp" parent="android:Theme.Holo.Light">
<item name="android:windowNoTitle">false</item>
</style>

At the beginning of each layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/app_bkg">
<include layout="@layout/header_layout" />
...



“Creating an identity for your app
goes beyond the action bar.
Your app communicates its identity through
its data, the way that data is arranged, and
how people interact with it. ”
Android Design site



Foodspotting Skitch
Foodspotting Evernote Corp.



A Custom View
public class CustomView extends View {

private Paint mPaint;
private RectF mRect;
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(); mPaint.setAntiAlias(true);
mRect = new RectF();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(
MeasureSpec.getSize(widthMeasureSpec),
MeasureSpec.getSize(heightMeasureSpec));
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final Paint paint = mPaint;
paint.setStyle(Style.FILL); paint.setColor(Color.RED);
final RectF oval = mRect;
oval.left = 0; oval.right = getWidth();
oval.top = 0; oval.bottom = getHeight();
canvas.drawArc(mRect, 0, 90, true, paint);
}}



A Custom Animation
private float delta = 0;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final Paint paint = mPaint;
paint.setStyle(Style.FILL); paint.setColor(Color.RED);
final RectF oval = mRect;
oval.left = 0; oval.right = getWidth();
oval.top = 0; oval.bottom = getHeight();
canvas.drawArc(mRect, 0 + delta, 90, true, paint);
}

@Override
public void onClick(View v) {
ValueAnimator va = ValueAnimator.ofFloat(0, 360).setDuration(2000);
delta = 0;
va.addUpdateListener(new AnimatorUpdateListener() {

@Override
public void onAnimationUpdate(ValueAnimator animation) {
delta = (Float) animation.getAnimatedValue();
invalidate();
}
});
va.setInterpolator(new DecelerateInterpolator());
va.start();
invalidate();


Wide Gestures
Unleash your ﬁnger


ICS and swipes

IceCreamSandwich uses and sponsors
simple gestural control to quickly navigate
between detail views or tabs

Swipe is a simple way to express “move
away” intent

Easier than clicking somewhere - target
area is whole screen (Fitt’s Law)

Easier than free scrolling - the content is
paged (Hick’s Law)



Swipe made easy

Historically, Android developers had an hard time with this

Scrolling, inertias, bounce, attraction, paging
(and android.widget.Gallery
is not apt for the purpose)

Lots of eﬀorts from the community, only few high-quality ones
• Google’s ViewPager
+
(Jake Wharton’s ViewPagerIndicators)
• Cyril Mottier’s PagedView

ViewPager
Included in Compatibility Package v4 and v13
http://goo.gl/JRqfC



DIY: a shortcut
Opening activities with swipe

An easy way to be faithful to the Design Guidelines without
sweating too much is detach animation from gestures

SwipeDetector component that detects a discrete
UP/DOWN/RIGHT/LEFT

+
Context.startActivity(Intent
i);
Context.overridePendingTransition(R.anim.swipe_i
n,
0);



SwipeDetector
public class SwipeDetector implements View.OnTouchListener {
....
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
downT = event.getEventTime();
return true;

case MotionEvent.ACTION_UP:
if (mListener == null || event.getEventTime() - downT > 1000)
return false;

final float deltaX = downX - event.getX();
final float deltaY = downY - event.getY();
// swipe vertical?
if (Math.abs(deltaY) > yThreshold
&& Math.abs(deltaX) < whoKnowsThreshold) {
// top or down
if (deltaY < 0) {
mListener.onSwipeDown();
} else {
mListener.onSwipeUp();
}
return true;
}



Oldies but goldies
Jake Wharton’s DirectionalViewPager SlidingDrawer


Prepare to multi-task
(seriously)


Android lets people combine
applications into new workﬂows
through multitasking, notiﬁcations,
and sharing across apps.


Whymca Mobile Developer Conference 2012 X


Multi-tasking++

Android has always been characterized by the
ability to keep multiple app running at once.

Even if not really running, system components
are “paused” resumed, stopped and restarted
,
whenever the system feels like.

“All apps running at the same time”



Do your homework

Activities should save and restore their status:
Activity.onSaveInstanceState(Bundle
b);

Activity.onRestoreInstanceState(Bundle
b);

Views should use:
Parcelable
View.onSaveInstanceState();

View.onRestoreInstanceState(Parcelable
state);

When changing conﬁguration (device rotation):
Activity.onRetainNonConfigurationInstance()

Activity.getLastNonConfigurationInstance()

are deprecated! Use Fragment.setRetainInstance()



Fragment (ation?)

Lifecycle-aware modularization of UI chunks
http://slidesha.re/iHxTqO



1. It’s a lifecycle concept: don’t use it like an <include
/>!

2. getLastNonConfigurationInstance() is deprecated
setRetainInstance()

3. cannot be nested!

4. in/out animation and back stack together don’t work

5. you can use fragments in ViewPager

6. onCreateDialog() is deprecated
android.app.DialogFragment

7. only viable option is with Android Compatibility library
Fragment API is fragmented (???)


Floating windows
Enhancing multitasking


AirCalc
MBFG


OverSkreen
MBFG

Whymca Mobile Developer Conference 2012 X


Overlays

The key to implement ﬂoating, always on top views is exploiting
overlays, through the usage of WindowManager system service

Android displays views on diﬀerent layers (+15 layer types)
Application usually manage a Window.TYPE_APPLICATION

Examples of other window types:
Status Bar, Application Dialog, System Dialog, IME



public class FloatingButtonService extends Service {

public void onCreate() {
super.onCreate();
mButton = new Button(this);
mButton.setText("Forever Here");
mButton.setOnTouchListener(new OnTouchListener() {
...something...
});
WindowManager.LayoutParams params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.TYPE_SYSTEM_ALERT,
LayoutParams.FLAG_NOT_FOCUSABLE
| LayoutParams.FLAG_NOT_TOUCH_MODAL,
PixelFormat.TRANSLUCENT);
params.gravity = Gravity.CENTER;
mWm = (WindowManager) getSystemService(WINDOW_SERVICE);
mWm.addView(mButton, params);
}

public void onDestroy() {
mWm.removeView(mButton);
super.onDestroy();
}

Intent serv = new Intent(this, <uses-permission android:name=
FloatingButtonService.class); "android.permission.SYSTEM_ALERT_WINDOW" />
startService(serv);



Android is the service design
platform.
Capabilities are limitless
Headaches are limitless
Step your game up.



Links

http://d.android.com/design

http://code.google.com/p/androidavanzato/

http://slidesha.re/GSalF6 - @gerdavax on NFC

http://www.frogdesign.com


The Android Experience

More Related Content

What's hot

Viewers also liked

Similar to The Android Experience

More from Emanuele Di Saverio

Recently uploaded

The Android Experience

Editor's Notes