2. intro ia signature gestures multitask wrap up
Android evolved into a first-class
design platform.
Today we really have an
Android Experience
Whymca Mobile Developer Conference 2012
3. intro ia signature gestures multitask wrap up
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
4. intro ia signature gestures multitask wrap up
Who?
Emanuele Di Saverio
Senior Design Technologist @
Book Author @ http://www.androidavanzato.it
(with Stefano Sanna @gerdavax)
@hazam
Whymca Mobile Developer Conference 2012 4
11. intro ia signature gestures multitask wrap up
With ICS has been developed a
new system of design guidelines to
combine beauty, simplicity and
purpose to create an exceptional
experience
Whymca Mobile Developer Conference 2012
12. Rule of thumb
The thumb has limited range and flexibility,
only about a third of the screen is in truly
effortless
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
Whymca Mobile Developer Conference 2012 12
13. Rule of thumb
Stacking controls in a touch
interface should always be
avoided, especially at screen
bottom
For Android, app navigation and
controls should float to the top
Foursquare
Foursquare
Whymca Mobile Developer Conference 2012 13
14. Rule of thumb
It is not just a matter of thumb
comfort, but also that fingers
obscure the screen.
The bottom is where hovering
hands are least likely to cover
content
Whymca Mobile Developer Conference 2012 14
15. Rule of thumb
It is not just a matter of thumb
comfort, but also that fingers
obscure the screen.
The bottom is where hovering
hands are least likely to cover
content
Whymca Mobile Developer Conference 2012 14
16. Rule of thumb
It is not just a matter of thumb
comfort, but also that fingers
obscure the screen.
The bottom is where hovering
hands are least likely to cover
content
Whymca Mobile Developer Conference 2012 14
17. intro ia signature gestures multitask wrap up
Almost 6 months ago
Action bar
Main navigation
Filter bar
Search bar
Filter bar
Whymca Mobile Developer Conference 2012 15
18. intro ia signature gestures multitask wrap up
Foursquare Foursquare
Before ICS release After ICS release
Whymca Mobile Developer Conference 2012 16
19. intro ia signature gestures multitask wrap up
Foursquare Foursquare
Before ICS release After ICS release
Whymca Mobile Developer Conference 2012 16
20. intro ia signature gestures multitask wrap up
Foursquare Foursquare
Before ICS release After ICS release
Whymca Mobile Developer Conference 2012 16
21. intro ia signature gestures multitask wrap up
ActionBar
• Navigation (tabs and drop down)
• Up button
• Action items
• Option menu
• Split action bar (contextualized action items)
Whymca Mobile Developer Conference 2012 17
22. intro ia signature gestures multitask wrap up
“The Action Bar is arguably the
most important structural element
of an Android app.”
Android Design site
Whymca Mobile Developer Conference 2012
23. intro ia signature gestures multitask wrap up
Good boy
you can build neat UI following the rules
TED
TED Conferences
Whymca Mobile Developer Conference 2012 19
24. intro ia signature gestures multitask wrap up
Good boy Pocket
you can build neat UI following the rules Read It Later
Whymca Mobile Developer Conference 2012 20
25. intro ia signature gestures multitask wrap up
so effective to be ported into iOS applications
Whymca Mobile Developer Conference 2012 21
26. intro ia signature gestures multitask wrap up
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://jeffgilfelt.com/
Whymca Mobile Developer Conference 2012 22
28. intro ia signature gestures multitask wrap up
Get in Control
ActionBar standard support does a lot of stuff, more importantly
does a lot of device-adaptive, platform compliant stuff.
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
= $$$
Whymca Mobile Developer Conference 2012 24
29. intro ia signature gestures multitask wrap up
Bad Boy
Twist the Action Bar to give personality
Astrid Task Flud News
Astrid Inc. Flud
25
Whymca Mobile Developer Conference 2012
30. intro ia signature gestures multitask wrap up
Bad Boy
Twist the Action Bar to give personality
Fancy Kaleidoscope
Thingd Inporia Inc
Whymca Mobile Developer Conference 2012 26
31. intro ia signature gestures multitask wrap up
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" />
...
Whymca Mobile Developer Conference 2012 27
33. intro ia signature gestures multitask wrap up
“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
Whymca Mobile Developer Conference 2012
34. intro ia signature gestures multitask wrap up
Foodspotting Skitch
Foodspotting Evernote Corp.
Whymca Mobile Developer Conference 2012 30
35. intro ia signature gestures multitask wrap up
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);
}}
Whymca Mobile Developer Conference 2012 31
38. intro ia signature gestures multitask wrap up
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)
Whymca Mobile Developer Conference 2012 34
39. intro ia signature gestures multitask wrap up
Whymca Mobile Developer Conference 2012 35
40. intro ia signature gestures multitask wrap up
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 efforts 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
Whymca Mobile Developer Conference 2012 36
41. intro ia signature gestures multitask wrap up
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);
Whymca Mobile Developer Conference 2012 37
42. intro ia signature gestures multitask wrap up
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;
}
Whymca Mobile Developer Conference 2012 38
43. intro ia signature gestures multitask wrap up
Oldies but goldies
Jake Wharton’s DirectionalViewPager SlidingDrawer
Whymca Mobile Developer Conference 2012 39
45. intro ia signature gestures multitask wrap up
Android lets people combine
applications into new workflows
through multitasking, notifications,
and sharing across apps.
Whymca Mobile Developer Conference 2012 41
47. intro ia signature gestures multitask wrap up
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”
Whymca Mobile Developer Conference 2012 42
48. intro ia signature gestures multitask wrap up
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 configuration (device rotation):
Activity.onRetainNonConfigurationInstance()
Activity.getLastNonConfigurationInstance()
are deprecated! Use Fragment.setRetainInstance()
Whymca Mobile Developer Conference 2012 43
49. intro ia signature gestures multitask wrap up
Fragment (ation?)
Lifecycle-aware modularization of UI chunks
http://slidesha.re/iHxTqO
Whymca Mobile Developer Conference 2012 44
50. intro ia signature gestures multitask wrap up
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 (???)
Whymca Mobile Developer Conference 2012 45
52. intro ia signature gestures multitask wrap up
AirCalc
MBFG
Whymca Mobile Developer Conference 2012 47
53. OverSkreen
MBFG
Whymca Mobile Developer Conference 2012 X
54. intro ia signature gestures multitask wrap up
Overlays
The key to implement floating, always on top views is exploiting
overlays, through the usage of WindowManager system service
Android displays views on different layers (+15 layer types)
Application usually manage a Window.TYPE_APPLICATION
Examples of other window types:
Status Bar, Application Dialog, System Dialog, IME
Whymca Mobile Developer Conference 2012 48
55. intro ia signature gestures multitask wrap up
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);
Whymca Mobile Developer Conference 2012 49
57. intro ia signature gestures multitask wrap up
Android is the service design
platform.
Capabilities are limitless
Headaches are limitless
Step your game up.
Whymca Mobile Developer Conference 2012
58. intro ia signature gestures multitask wrap up
Links
http://d.android.com/design
http://code.google.com/p/androidavanzato/
http://slidesha.re/GSalF6 - @gerdavax on NFC
http://www.frogdesign.com
Whymca Mobile Developer Conference 2012 52
Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&#x2019;uso Android raffinata e di grande qualita&#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&#x2019; a quelle che hanno storicamente costituito lo stato\ndell&#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
\n
\n
\n
la mission di frog e&#x2019; guidare l&#x2019;innovazione per il mondo connesso, progettando e disegnando i servizi e i prodotti del futuro.\nQueste sono alcune foto prese da progetti recenti. \n
Frog e&#x2019; distribuita su tutto il globo, e fornisce servizi di consulenza d&#x2019;innovazione multidisciplinare: Design digitale ed industriale, consulenza strategica, tecnologia.Un ambito nel quale siamo molto forti e&#x2019; il mobile, che e&#x2019; anche il nostro focus principale.\n
\n
jjj\n
\n
\n
\n\nL&#x2019;ergonomia della nostra mano \n\nquindi l&#x2019;euristica pi&#xF9; accreditata afferma che le toolbars e le barre di navigazione debbano trovarsi nella parte bassa dello schermo\n
\n
\n
\n
Non potendo quindi suddividere la navigazione in posizioni distinte, in molte applicazioni asi \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Modifiche delle guidelines android\nmodifica degli pattern attraverso delle contaminazioni con IOS (popover)\nreinterpretazione delle linee guida per assecondare le esigenze di navigazione\n
Esigenze di design\nprincipalmente legate all&#x2019;architettura e modelli di navigazione \nsperimentazione di nuovi pattern, che si stanno affermando come standard\n\n
\n
\n
\n
SIGNATURE INTERACTIONS\n\nAndroid Widget library is fairly complete, most apps should get away with just styling those\nRemember the style.xml!\n\nCraft a &#x201C;signature&#x201D; element that sticks around in the user mind\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&#x2019;uso Android raffinata e di grande qualita&#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&#x2019; a quelle che hanno storicamente costituito lo stato\ndell&#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n