![Page 2: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/2.jpg)
Jérôme Van Der Linden
Android Lint Sonar Plugin
http://android-holo-colors.comQuality Tools For Android
jeromevdl @jeromevdl +jerome van der linden �2
![Page 4: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/4.jpg)
�4
Disclaimer : I’m not an Android FanBoy… :-)
![Page 5: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/5.jpg)
Have you ever heard / said ?
�5
Like iOS !Respect the design
(ed. iPhone PSD)
Androïd and iOS the same* idem as iPad
This is not the good icon, take the iPhone one
* In France an android is « androïde » with a diaeresis
![Page 6: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/6.jpg)
Have you ever heard / said ?
�5
Like iOS !Respect the design
(ed. iPhone PSD)
Androïd and iOS the same* idem as iPad
This is not the good icon, take the iPhone one
* In France an android is « androïde » with a diaeresis
![Page 7: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/7.jpg)
�6
Marketing Designers
ex-iOS Developers !
This is for you !
![Page 8: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/8.jpg)
�7
Android is not a second class system anymore ! !
You cannot just say : « OK now that iPhone app is created, let’s replicate it on Android »
!Users are demanding and want Android apps
!They will remind you if you forget…
![Page 9: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/9.jpg)
?
�8
![Page 10: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/10.jpg)
?
�8
![Page 11: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/11.jpg)
!
�9
![Page 12: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/12.jpg)
!
�9
![Page 13: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/13.jpg)
Screen resolutions*
320x480 640x9601136x960
320x480 240x320480x800 540x960
720x1280
1080x1920
768x1024768x1280
480x854
480x600768x1152
960x1280
A 640x960 PSD is not enough. Think dp, not px !
�10
ldpi mdpihdpixhdpi
xxhdpi
* phones only
![Page 14: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/14.jpg)
Screen ratios48
0 960
320
540 100 �11
Think relative ! Pixel Perfect is not
possible.
![Page 15: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/15.jpg)
Back to basics - tabs
�12Tabs go on top
http://developer.android.com/design/patterns/pure-android.html
![Page 16: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/16.jpg)
Back to basics - back button
�13
No back button on your app The system (or the device)
provides one
http://developer.android.com/design/patterns/navigation.html
![Page 17: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/17.jpg)
Back to basics - up button
�14
1
![Page 18: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/18.jpg)
Back to basics - up button
�14
Up button is not a back button : goes 1 level up in
navigation hierarchy
http://developer.android.com/design/patterns/navigation.html#up-vs-back
1
2
![Page 19: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/19.jpg)
Back to basics - up button
�14
Up button is not a back button : goes 1 level up in
navigation hierarchy
http://developer.android.com/design/patterns/navigation.html#up-vs-back
?
1
2
![Page 20: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/20.jpg)
Back to basics : app icons
�15http://developer.android.com/design/style/iconography.html#launcher
![Page 21: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/21.jpg)
Back to basics : app icons
�15
No rounded square, no rule! Feel free :-)
http://developer.android.com/design/style/iconography.html#launcher
![Page 22: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/22.jpg)
Back to basics : system icons
�16http://developer.android.com/design/style/iconography.html
Use platform icons to let users recognize them.
http://developer.android.com/design/downloads/index.html#action-bar-icon-pack
![Page 23: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/23.jpg)
Back to basics : share / open with
�17
Do not limit the sharing options to Twitter and Facebook
Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype
![Page 24: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/24.jpg)
Back to basics : share / open with
�17
Do not limit the sharing options to Twitter and Facebook
Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype
![Page 25: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/25.jpg)
Back to basics : splashscreen
�18
![Page 26: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/26.jpg)
Back to basics : splashscreen
�18
Avoid splash screens !http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/
![Page 27: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/27.jpg)
Avoid hidden features
�19
Swipe in UITableView cell
Prefer a visible arrow
Avoid long press and others hidden features,
prefer a clickable element
![Page 28: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/28.jpg)
ActionBar : use it…
�20
iOS Navigation Bar
… but use it well ! ActionBar is contextual to the screen and is part of Android (do not reinvent the wheel)
Android ActionBar
Icon and/or Title on the left Actions on the right
No f*cking back button
http://developer.android.com/guide/topics/ui/actionbar.html
![Page 29: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/29.jpg)
ActionBar : and use it again…
�21http://developer.android.com/guide/topics/ui/actionbar.html#SplitBar
Do not leave the screen to manipulate your data :
sort, filter, modify, delete
http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown
![Page 30: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/30.jpg)
ActionBar : and again !
�22
![Page 31: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/31.jpg)
ActionBar : and again !
�22
![Page 32: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/32.jpg)
ActionBar : and again !
�22
Search in the same screen … in the ActionBar !
http://developer.android.com/training/search/setup.html
![Page 33: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/33.jpg)
Left menu is standard
�23https://developer.android.com/design/patterns/navigation-drawer.html
Navigation Drawer is now a standard component.
![Page 34: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/34.jpg)
�24
But Android is sad like the Estonian Flag…
Holo Dark
Holo Light
#33b5e5
![Page 35: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/35.jpg)
ActionBar : customize it
�25
![Page 36: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/36.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
![Page 37: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/37.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
![Page 38: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/38.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar
![Page 39: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/39.jpg)
And the rest ? Customize too !
�26http://developer.android.com/design/style/branding.html http://android-holo-colors.com/
Android is not only blue
Adopt your branding : colors, icons, fonts
![Page 40: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/40.jpg)
Innovate !
�27
Expedia
Grand St.
Yahoo! Weather
Timely
![Page 41: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/41.jpg)
And go Further !
�28
Widgets are typical Android feature. Provide fast and easily any information.
![Page 42: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/42.jpg)
![Page 43: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/43.jpg)
Good or Bad ?
�30
![Page 44: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/44.jpg)
Good or Bad ?
�30
![Page 45: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/45.jpg)
Good or Bad ?
�31
![Page 46: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/46.jpg)
Good or Bad ?
�31
![Page 47: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/47.jpg)
Good or Bad ?
�32
![Page 48: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/48.jpg)
Good or Bad ?
�32
![Page 49: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/49.jpg)
Good or Bad ?
�33
![Page 50: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/50.jpg)
Good or Bad ?
�33
![Page 51: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/51.jpg)
Good or Bad ?
�34
![Page 52: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/52.jpg)
Good or Bad ?
�34
![Page 53: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/53.jpg)
Good or Bad ?
�35
![Page 54: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/54.jpg)
Good or Bad ?
�35
![Page 55: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/55.jpg)
Conclusion
�36
Android is not a second class system anymore ! Users are demanding with app UI and UX, Android UI and UX !!!!!!!!Two solutions : 1/ Respect Android guidelines / do NOT clone iOS screens 2/ Innovate ! but respect 1/ :-)
![Page 56: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/56.jpg)
Be inspired• Pattrn • Eye In Sky Weather • Pocket • Timer • Grand st. • Pinterest • Press (reader) • NYTimes • Expedia • Flipboard • TED • Timely • Circa • Etsy • airbnb • The Whole Pantry • Runtastic Heart Rate PRO • Tumblr • Umano • Yahoo! Weather
�37
![Page 57: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/57.jpg)
Resources
�38
http://www.androiduipatterns.com/
http://developer.android.com/guide/topics/ui/index.html
http://developer.android.com/design/index.html
Android Design in Action on Youtube
![Page 58: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/58.jpg)
�39jeromevdl @jeromevdl +jerome van der linden