SlideShare a Scribd company logo
1 of 59
The Android Experience
24/05/2012
                         Emanuele Di Saverio
                               Guido Parlato
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
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
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
frog overview
what we do
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
Android Journey
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
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
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
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
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
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
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
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
intro                    ia           signature           gestures   multitask   wrap up




Foursquare                                             Foursquare
Before ICS release                                     After ICS release

             Whymca Mobile Developer Conference 2012                                                        16
intro                    ia           signature           gestures   multitask   wrap up




Foursquare                                             Foursquare
Before ICS release                                     After ICS release

             Whymca Mobile Developer Conference 2012                                                        16
intro                    ia           signature           gestures   multitask   wrap up




Foursquare                                             Foursquare
Before ICS release                                     After ICS release

             Whymca Mobile Developer Conference 2012                                                        16
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
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
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
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
intro                    ia           signature   gestures   multitask   wrap up




so effective to be ported into iOS applications




Whymca Mobile Developer Conference 2012                                            21
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
intro                    ia           signature    gestures         multitask          wrap up




 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>


 Whymca Mobile Developer Conference 2012                                                            23
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
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
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
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
Signature Element
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
intro                   ia           signature   gestures         multitask   wrap up




Foodspotting                                                               Skitch
Foodspotting                                                               Evernote Corp.



          Whymca Mobile Developer Conference 2012                                                  30
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
intro                    ia           signature   gestures   multitask   wrap up




     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();


     Whymca Mobile Developer Conference 2012                                            32
Wide Gestures
Unleash your finger
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
intro                    ia           signature   gestures   multitask   wrap up




Whymca Mobile Developer Conference 2012                                            35
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
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
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
intro                    ia           signature   gestures   multitask   wrap up




  Oldies but goldies
Jake Wharton’s DirectionalViewPager                                SlidingDrawer




  Whymca Mobile Developer Conference 2012                                            39
Prepare to multi-task
(seriously)
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
Whymca Mobile Developer Conference 2012   X
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
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
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
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
Floating windows
Enhancing multitasking
intro                    ia           signature   gestures   multitask   wrap up




                                                                                  AirCalc
                                                                                  MBFG




Whymca Mobile Developer Conference 2012                                            47
OverSkreen
                                              MBFG




Whymca Mobile Developer Conference 2012   X
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
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
And so what?
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
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
Emanuele Di Saverio
            emanuele.disaverio@gmail.com
                @hazam


            Guido Parlato
            guido@higui.it
                 @higui




© 2011 frog. All rights reserved.

More Related Content

What's hot

Large Multitouch infographic
Large Multitouch infographicLarge Multitouch infographic
Large Multitouch infographicAndreas Köster
 
Ultrabook Development Using Touch - Intel Ultrabook AppLab Berlin
Ultrabook Development Using Touch - Intel Ultrabook AppLab BerlinUltrabook Development Using Touch - Intel Ultrabook AppLab Berlin
Ultrabook Development Using Touch - Intel Ultrabook AppLab BerlinIntel Developer Zone Community
 
UX archetypes secondary
UX archetypes secondaryUX archetypes secondary
UX archetypes secondaryNicholas Evans
 
DeltaAIrlines User Experience Vision à 7 ans 2008 - 2015
DeltaAIrlines User Experience  Vision à 7 ans 2008 - 2015DeltaAIrlines User Experience  Vision à 7 ans 2008 - 2015
DeltaAIrlines User Experience Vision à 7 ans 2008 - 2015Christophe Cotin Valois
 
What you can do in Android that you can't in iOS
What you can do in Android that you can't in iOSWhat you can do in Android that you can't in iOS
What you can do in Android that you can't in iOSjnedumgottil
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesIRJET Journal
 
TheFuture of Mobile Application and Media Tablets
TheFuture of Mobile Application and Media TabletsTheFuture of Mobile Application and Media Tablets
TheFuture of Mobile Application and Media TabletsSoftware Park Thailand
 
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare Garlati
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare GarlatiAPPNATION IV - The State of Security in the Mobile Enterprise - Cesare Garlati
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare GarlatiMasha Geller
 
Monetizing The Keypad Real Estate On Mobile Devices 9.2009
Monetizing The Keypad Real Estate On Mobile Devices   9.2009Monetizing The Keypad Real Estate On Mobile Devices   9.2009
Monetizing The Keypad Real Estate On Mobile Devices 9.2009www.webhub.mobi by Yuvee, Inc.
 
Mobile Apps & Social Network Trends : Impact on Airline Business
Mobile Apps & Social Network Trends : Impact on Airline BusinessMobile Apps & Social Network Trends : Impact on Airline Business
Mobile Apps & Social Network Trends : Impact on Airline BusinessSoftware Park Thailand
 

What's hot (15)

Large Multitouch infographic
Large Multitouch infographicLarge Multitouch infographic
Large Multitouch infographic
 
Windows phone
Windows phoneWindows phone
Windows phone
 
Ultrabook Development Using Touch - Intel Ultrabook AppLab Berlin
Ultrabook Development Using Touch - Intel Ultrabook AppLab BerlinUltrabook Development Using Touch - Intel Ultrabook AppLab Berlin
Ultrabook Development Using Touch - Intel Ultrabook AppLab Berlin
 
UX archetypes secondary
UX archetypes secondaryUX archetypes secondary
UX archetypes secondary
 
DeltaAIrlines User Experience Vision à 7 ans 2008 - 2015
DeltaAIrlines User Experience  Vision à 7 ans 2008 - 2015DeltaAIrlines User Experience  Vision à 7 ans 2008 - 2015
DeltaAIrlines User Experience Vision à 7 ans 2008 - 2015
 
What you can do in Android that you can't in iOS
What you can do in Android that you can't in iOSWhat you can do in Android that you can't in iOS
What you can do in Android that you can't in iOS
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile Devices
 
Organic Design UI (2010)
Organic Design UI (2010)Organic Design UI (2010)
Organic Design UI (2010)
 
Android
AndroidAndroid
Android
 
TheFuture of Mobile Application and Media Tablets
TheFuture of Mobile Application and Media TabletsTheFuture of Mobile Application and Media Tablets
TheFuture of Mobile Application and Media Tablets
 
Mobile application design & development
Mobile application design & developmentMobile application design & development
Mobile application design & development
 
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare Garlati
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare GarlatiAPPNATION IV - The State of Security in the Mobile Enterprise - Cesare Garlati
APPNATION IV - The State of Security in the Mobile Enterprise - Cesare Garlati
 
Mobile Games
Mobile GamesMobile Games
Mobile Games
 
Monetizing The Keypad Real Estate On Mobile Devices 9.2009
Monetizing The Keypad Real Estate On Mobile Devices   9.2009Monetizing The Keypad Real Estate On Mobile Devices   9.2009
Monetizing The Keypad Real Estate On Mobile Devices 9.2009
 
Mobile Apps & Social Network Trends : Impact on Airline Business
Mobile Apps & Social Network Trends : Impact on Airline BusinessMobile Apps & Social Network Trends : Impact on Airline Business
Mobile Apps & Social Network Trends : Impact on Airline Business
 

Viewers also liked

Home automation
Home automationHome automation
Home automationahmkashwa
 
seminar presentation on Project ara
seminar presentation on Project araseminar presentation on Project ara
seminar presentation on Project araGeorgekutty Francis
 
Sixth sense-final-ppt
Sixth sense-final-pptSixth sense-final-ppt
Sixth sense-final-pptThedarkangel1
 
Introduction to computer network
Introduction to computer networkIntroduction to computer network
Introduction to computer networkAshita Agrawal
 
Internet Protocol version 6
Internet Protocol version 6Internet Protocol version 6
Internet Protocol version 6Rekha Yadav
 
The sixth sense technology complete ppt
The sixth sense technology complete pptThe sixth sense technology complete ppt
The sixth sense technology complete pptatinav242
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebRachel Andrew
 
The Future Of Work & The Work Of The Future
The Future Of Work & The Work Of The FutureThe Future Of Work & The Work Of The Future
The Future Of Work & The Work Of The FutureArturo Pelayo
 

Viewers also liked (11)

Home automation
Home automationHome automation
Home automation
 
Google's project ara
Google's project araGoogle's project ara
Google's project ara
 
seminar presentation on Project ara
seminar presentation on Project araseminar presentation on Project ara
seminar presentation on Project ara
 
Virtual machine
Virtual machineVirtual machine
Virtual machine
 
Fogscreen
FogscreenFogscreen
Fogscreen
 
Sixth sense-final-ppt
Sixth sense-final-pptSixth sense-final-ppt
Sixth sense-final-ppt
 
Introduction to computer network
Introduction to computer networkIntroduction to computer network
Introduction to computer network
 
Internet Protocol version 6
Internet Protocol version 6Internet Protocol version 6
Internet Protocol version 6
 
The sixth sense technology complete ppt
The sixth sense technology complete pptThe sixth sense technology complete ppt
The sixth sense technology complete ppt
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
 
The Future Of Work & The Work Of The Future
The Future Of Work & The Work Of The FutureThe Future Of Work & The Work Of The Future
The Future Of Work & The Work Of The Future
 

Similar to The Android Experience

Sencha touch in the wild
Sencha touch in the wildSencha touch in the wild
Sencha touch in the wildcarr
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite DifferentPanu Korhonen
 
2011 VMI DEMO Conference Highlights
2011 VMI DEMO Conference Highlights2011 VMI DEMO Conference Highlights
2011 VMI DEMO Conference HighlightsJulie_Vasquez
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile DevelopmentFoteini Valeonti
 
How to scale enterprise mobility and improve roi
How to scale enterprise mobility and improve roiHow to scale enterprise mobility and improve roi
How to scale enterprise mobility and improve roiApperian
 
Designing the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of AndroidDesigning the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of AndroidMutual Mobile
 
Embracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel venturesEmbracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel venturesnascent
 
Ficod - Optimizing android ux a case study
Ficod - Optimizing android ux a case studyFicod - Optimizing android ux a case study
Ficod - Optimizing android ux a case studyJerome Nadel
 
Bluemonitor Android Consulting Services
Bluemonitor Android Consulting ServicesBluemonitor Android Consulting Services
Bluemonitor Android Consulting Servicesbluemonitor
 
Dribbble inkod 2013
Dribbble inkod 2013Dribbble inkod 2013
Dribbble inkod 2013Ilan Dray
 
TiTokyo conference in Tokyo, Japan for Appcelerator community
TiTokyo conference in Tokyo, Japan for Appcelerator communityTiTokyo conference in Tokyo, Japan for Appcelerator community
TiTokyo conference in Tokyo, Japan for Appcelerator communityJeff Haynie
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Tom Deryckere
 
Webinar: Mobile trends and their impact on Nordic enterprises
Webinar: Mobile trends and their impact on Nordic enterprisesWebinar: Mobile trends and their impact on Nordic enterprises
Webinar: Mobile trends and their impact on Nordic enterprisesTieto Corporation
 
Big M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsBig M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsPaul Golding
 
Camerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapCamerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapJames Cameron
 
Customer experience and marketing become one
Customer experience and marketing become oneCustomer experience and marketing become one
Customer experience and marketing become oneFjord
 
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaApple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaArmedia LLC
 

Similar to The Android Experience (20)

Sencha touch in the wild
Sencha touch in the wildSencha touch in the wild
Sencha touch in the wild
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite Different
 
2011 VMI DEMO Conference Highlights
2011 VMI DEMO Conference Highlights2011 VMI DEMO Conference Highlights
2011 VMI DEMO Conference Highlights
 
Android
AndroidAndroid
Android
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile Development
 
How to scale enterprise mobility and improve roi
How to scale enterprise mobility and improve roiHow to scale enterprise mobility and improve roi
How to scale enterprise mobility and improve roi
 
Designing the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of AndroidDesigning the New Android Experience - The Golden Age of Android
Designing the New Android Experience - The Golden Age of Android
 
Embracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel venturesEmbracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel ventures
 
Ficod - Optimizing android ux a case study
Ficod - Optimizing android ux a case studyFicod - Optimizing android ux a case study
Ficod - Optimizing android ux a case study
 
Mobilemonday b2b flow pilots
Mobilemonday b2b   flow pilotsMobilemonday b2b   flow pilots
Mobilemonday b2b flow pilots
 
Bluemonitor Android Consulting Services
Bluemonitor Android Consulting ServicesBluemonitor Android Consulting Services
Bluemonitor Android Consulting Services
 
Dribbble inkod 2013
Dribbble inkod 2013Dribbble inkod 2013
Dribbble inkod 2013
 
TiTokyo conference in Tokyo, Japan for Appcelerator community
TiTokyo conference in Tokyo, Japan for Appcelerator communityTiTokyo conference in Tokyo, Japan for Appcelerator community
TiTokyo conference in Tokyo, Japan for Appcelerator community
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009
 
Open mic monday may 11 2015
Open mic monday may 11 2015Open mic monday may 11 2015
Open mic monday may 11 2015
 
Webinar: Mobile trends and their impact on Nordic enterprises
Webinar: Mobile trends and their impact on Nordic enterprisesWebinar: Mobile trends and their impact on Nordic enterprises
Webinar: Mobile trends and their impact on Nordic enterprises
 
Big M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsBig M Conference - Future Mobile Innovations
Big M Conference - Future Mobile Innovations
 
Camerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapCamerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snap
 
Customer experience and marketing become one
Customer experience and marketing become oneCustomer experience and marketing become one
Customer experience and marketing become one
 
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaApple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
 

More from Emanuele Di Saverio

Programming Sideways: Asynchronous Techniques for Android
Programming Sideways: Asynchronous Techniques for AndroidProgramming Sideways: Asynchronous Techniques for Android
Programming Sideways: Asynchronous Techniques for AndroidEmanuele Di Saverio
 
Android 1.5 to 3.0: a compatibility journey
Android 1.5 to 3.0: a compatibility journeyAndroid 1.5 to 3.0: a compatibility journey
Android 1.5 to 3.0: a compatibility journeyEmanuele Di Saverio
 
Android Bluetooth Hacking Java Day2010 Eng
Android Bluetooth Hacking Java Day2010 EngAndroid Bluetooth Hacking Java Day2010 Eng
Android Bluetooth Hacking Java Day2010 EngEmanuele Di Saverio
 

More from Emanuele Di Saverio (6)

In a Material world
In a Material worldIn a Material world
In a Material world
 
Programming Sideways: Asynchronous Techniques for Android
Programming Sideways: Asynchronous Techniques for AndroidProgramming Sideways: Asynchronous Techniques for Android
Programming Sideways: Asynchronous Techniques for Android
 
Android 1.5 to 3.0: a compatibility journey
Android 1.5 to 3.0: a compatibility journeyAndroid 1.5 to 3.0: a compatibility journey
Android 1.5 to 3.0: a compatibility journey
 
Dive Into Android [ITA] - Long
Dive Into Android [ITA] - LongDive Into Android [ITA] - Long
Dive Into Android [ITA] - Long
 
Whymca Dive into Android [ITA]
Whymca Dive into Android [ITA]Whymca Dive into Android [ITA]
Whymca Dive into Android [ITA]
 
Android Bluetooth Hacking Java Day2010 Eng
Android Bluetooth Hacking Java Day2010 EngAndroid Bluetooth Hacking Java Day2010 Eng
Android Bluetooth Hacking Java Day2010 Eng
 

Recently uploaded

Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxe-Definers Technology
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationJaime Brown
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosDuyDo100
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfDuyDo100
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfoliodhrumibshah13
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfFreixa Home Design
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Projectbuvanatest
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building DesignResDraft
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxjoshuaclack73
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistYudistira
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designKhushiGandhi15
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxArindamMookherji1
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 

Recently uploaded (20)

Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptx
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 

The Android Experience

  • 1. The Android Experience 24/05/2012 Emanuele Di Saverio Guido Parlato
  • 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
  • 6. frog drives innovation for the connected world. 6
  • 7. A global team Seattle Amsterdam Kiev & Vinnitsa Boston Milano Munich San Francisco New York Austin Shanghai Bangalore Johannesburg
  • 9. Apr 09 Sep 09 Oct 09 May 10 Dec 10 Feb 11 Oct 11 Over the hills and Far away
  • 10. http://d.android.com/design Google launched an up-to date, accurate and structured web repository for guidelines about application design
  • 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
  • 27. intro ia signature gestures multitask wrap up 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> Whymca Mobile Developer Conference 2012 23
  • 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
  • 36. intro ia signature gestures multitask wrap up 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(); Whymca Mobile Developer Conference 2012 32
  • 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
  • 46. Whymca Mobile Developer Conference 2012 X
  • 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
  • 59. Emanuele Di Saverio emanuele.disaverio@gmail.com @hazam Guido Parlato guido@higui.it @higui © 2011 frog. All rights reserved.

Editor's Notes

  1. \n
  2. Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&amp;#x2019;uso Android raffinata e di grande qualita&amp;#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&amp;#x2019; a quelle che hanno storicamente costituito lo stato\ndell&amp;#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  3. \n
  4. \n
  5. \n
  6. la mission di frog e&amp;#x2019; guidare l&amp;#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
  7. Frog e&amp;#x2019; distribuita su tutto il globo, e fornisce servizi di consulenza d&amp;#x2019;innovazione multidisciplinare: Design digitale ed industriale, consulenza strategica, tecnologia.Un ambito nel quale siamo molto forti e&amp;#x2019; il mobile, che e&amp;#x2019; anche il nostro focus principale.\n
  8. \n
  9. jjj\n
  10. \n
  11. \n
  12. \n\nL&amp;#x2019;ergonomia della nostra mano \n\nquindi l&amp;#x2019;euristica pi&amp;#xF9; accreditata afferma che le toolbars e le barre di navigazione debbano trovarsi nella parte bassa dello schermo\n
  13. \n
  14. \n
  15. \n
  16. Non potendo quindi suddividere la navigazione in posizioni distinte, in molte applicazioni asi \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. Modifiche delle guidelines android\nmodifica degli pattern attraverso delle contaminazioni con IOS (popover)\nreinterpretazione delle linee guida per assecondare le esigenze di navigazione\n
  28. Esigenze di design\nprincipalmente legate all&amp;#x2019;architettura e modelli di navigazione \nsperimentazione di nuovi pattern, che si stanno affermando come standard\n\n
  29. \n
  30. \n
  31. \n
  32. 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 &amp;#x201C;signature&amp;#x201D; element that sticks around in the user mind\n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&amp;#x2019;uso Android raffinata e di grande qualita&amp;#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&amp;#x2019; a quelle che hanno storicamente costituito lo stato\ndell&amp;#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  56. \n
  57. \n