Learn about how to design for the Android platform from the designer behind Airbnb and Simple's Android apps.

1. TWO TOASTERS
ANDROID
DESIGNING FOR
4/26/201
3

2. WHO ARE YOU?
ADIT SHUKLA
Co-Founder & Creative Director
of Two Toasters
As design lead, he oversees product
conceptualization, creative strategy sessions,
and visual design. He has led Two Toasters'
design contribution on dozens of apps on both
iOS and Android, ranging from Airbnb and
Simple, to Go Try It On and Lexus.

3. WORKED WITH…
SMASHING!

4. BEGIN ANSWERING
Why should I design natively for Android?
How can I start designing idiomatically?
What should I probably avoid?
Where do I begin?
DRROOOIIID

5. USERS SPEAK IN
ANDROID
Not literally, of course
But, if you don’t design with Android paradigms,
you must either teach the user a new way of
interacting or risk losing them entirely.
IS THERE A ROSETTA
STONE ADD ON FOR
THAT?

6. Using elements from another platform
is like forcing a toilet to flush in a
different direction.
THAT’S TOTALLY NOT
IDIOMATIC!

7. LET’S START WITH
BASICS TERMS
LDPI, MDPI, HDPI and XHDPI
By far, XHDPI and HDPI are the most common
resolutions and LDPI is almost completely
deprecated.
Ratio of screens: 3:4:6:8
THAT’S KINDA
COMPLICATED.

8. WHAT THE HECK?
LET’S START WITH
BASICS TERMS
Density Independent Pixels (DP)
8 DP @ LDPI = 6 px
8 DP @ MDPI = 8 px
8 DP @ HDPI = 12 px
8 DP @ XHDPI = 16 px

9. INTERESTING!
LET’S START WITH
BASICS TERMS
Back Up
• Always go to previous
screen
• Can navigate to
outside the app
• Always go higher
within screen
hierarchy
• Can only navigate
inside app

10. WHERE AM I?
SOME BASIC
NAVIGATION
• Action bar
• Action bar - Tabs
• Action bar – View Control
• Drawer

11. THE ACTION BAR
OH YEAH, LET’S SEE
SOME ACTION.
As defined by Android guidelines:
The action bar is a dedicated
piece of real estate at the top
of each screen that is
generally persistent
throughout the app.
“

12. THE ACTION BAR
AH! SO THAT’S WHERE IT
GOES.
It is 48dp tall
in portrait

13. THE ACTION BAR
This is basically what it
looks like
OK, GOT IT!

14. THE ACTION BAR
COOL, SO I GUESS I CAN
TAP ON IT?
Usually the
application
icon

15. THE ACTION BAR
MAKES A WHOLE LOT
MORE SENSE.
When in screens further down
in navigation stack, the up
carat will typically be placed
here.

16. THE ACTION BAR
Obviously, this is where you
see the screen title.
It can also be great place for
logotype.
CONTEXTUAL!

17. THE ACTION BAR
These icons represent the
actions the user is most likely
going to require on this screen
SO LIKE REFRESH,
SEARCH..ETC?

18. THE ACTION BAR
Any action buttons
that don’t fit on
screen get placed
in overflow menu
SWEET, I CAN ADD A
BUNCH OF ACTIONS.

19. TAB NAVIGATION
SO TABS GO UP TOP?
It’s also 48dp
tall in portrait

20. TAB NAVIGATION
Tab bar styling is very simplified. Interestingly,
when user switches to landscape or tablet, the
tab bar gets incorporated into action bar.
PRETTY SIMPLE.

21. TAB NAVIGATION
Scrollable tab bars offer you more space, but
obfuscates the total number of tabs. This is 32dp
tall.
IT SLIDES!

22. VIEW CONTROL
Instead of tabs or
drop downs, use
the view control
spinner to handle
modifications to the
view below
LIGHTWEIGHT.

23. EASY PEEZY.
SIDE DRAWER
It’s important to
note that most
side drawer
libraries on
Android normally
require the action
bar

24. THINGS TO AVOID
• Chevrons
• Back Buttons
• Text Action Icons
• Rounded App Icons
AH, THE BAD SIDE OF
TOWN.

25. CHEVRONS
These are a very common design
element, but don’t belong in Android.
List actions that require tapping
behavior should be obvious.
YOU’RE KIDDING!

26. BACK BUTTONS
Rely on up and back behavior rather
than designing back buttons. This is,
very specifically, iOS elements.
WE COVERED THIS?

27. TEXT ACTIONS
Buttons in the action bar should be
icons. For save or done actions, use
contextual action bar. For next
buttons, rely on bottom navigation.
ICONS ARE HARD…

28. ROUNDED APP
ICONS
Android gives you the ability to
use transparent PNGs so you can
shape icons in any format.
I’M SO USED TO
ROUNDED SQUARES!

29. WHERE TO BEGIN
• The Set Up
• Style Guide
• Fragmentation
• Multiple Resolutions
• Landscape
• Tablet
• Slicing for Multiple Resolutions
• 9Patching
I’M READY!

30. THE SETUP
• Personally…Photoshop
• Use a single PSD and a
combo of layer comps with
smart objects to keep app-
wide easy
• Designing at XHDPI (768x1280px)
• 144DPI
• Use Skala Preview
• Use Invision for prototyping
TAKING NOTES.

31. STYLE GUIDE
• Simplify
• Simplify
• Simplify
• Everyone’s going simple
GEEZ, WE GET IT…YOU
LIKE THINGS SIMPLE

32. TWEET TWEET.

33. A TO THE Z.

34. SPOT-IFY

35. MULTIPLE
RESOLUTIONS
XHDPI
25.9%
HDPI
38.5%
MDPI
23.4%
THAT’S LIKE 88% OF
USERS COVERED?

36. MULTIPLE
RESOLUTIONS
• No easy answer, other than to try
and design a fluid layout.
• Use fewer textures and patterns
• Use 9patches (stretchable assets)
WHAT’S A 9PATCH?

37. LANDSCAPE
LAYOUTS
• Absolutely necessary and
expected
• Don’t just stretch elements, try
to see if a new layout emerges
that works better in landscape
DO I REALLY HAVE TO
WORRY ABOUT IT?

38. TABLETS
• Try to compound layouts for
large tablets
• For smaller tablets, you should
be fine scaling up your HDPI or
XHDPI assets and keeping the
design relatively the same
• This is where planning for
landscape layouts pays off
THEY’RE KINDA POPULAR
RIGHT NOW…

39. SLICING FOR
MULTIPLE
RESOLUTIONS
• A Tutorial
SWEET, TIME FOR
PHOTOSHOP!

40. 9PATCHING
SWEET DESIGN BRO.
9patching lets you compress an element
like this to stretch without artifacts.

41. 9PATCHING
OK?
First, reduce the element down to as small
as you can get it with stretchable areas in
mind.

42. 9PATCHING
FREE STUFF! NICE.
Drop it into the 9patch utility (available for
free)

43. 9PATCHING
SAY THAT AGAIN?
Draw outlines for portions of the element
that you want stretchable.

44. 9PATCHING
THAT MAKES SENSE…
Right and bottom
edge define the
area that’s
“content.”
Top and left
edge define
areas that are
stretchable.

45. TO CONCLUDE…
It’s important to consider the idiomatic
approach because it simplifies the
interactions you have to worry about.
However, it’s not the end all be all. Be
cognizant of these idioms so you can push
them further.
DONE YET?

46. Q&A TIME OOO! PICK ME FIRST!

47. TWO TOASTERS
Thank You!