04/12/2023

TWO TOASTERS

ANDROIDDESIGNING FOR

WHO ARE YOU?

ADIT SHUKLACo-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.

WORKED WITH…

SMASHING!

BEGIN ANSWERINGWhy should I design natively for Android?

How can I start designing idiomatically?

What should I probably avoid?

Where do I begin?

DRROOOIIID

USERS SPEAK IN ANDROIDNot 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?

Using elements from another platform is like forcing a toilet to flush in a different direction.

THAT’S TOTALLY NOT IDIOMATIC!

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.

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

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

WHERE AM I?

SOME BASIC NAVIGATION• Action bar

• Action bar - Tabs

• Action bar – View Control

• Drawer

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.

“

THE ACTION BAR

AH! SO THAT’S WHERE IT GOES.

It is 48dp tall in portrait

THE ACTION BAR

This is basically what it looks like

OK, GOT IT!

THE ACTION BAR

COOL, SO I GUESS I CAN TAP ON IT?

Usually the application icon

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.

THE ACTION BAR

Obviously, this is where you see the screen title.

It can also be great place for logotype.

CONTEXTUAL!

THE ACTION BAR

These icons represent the actions the user is most likely going to require on this screen

SO LIKE REFRESH, SEARCH..ETC?

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.

TAB NAVIGATION

SO TABS GO UP TOP?It’s also 48dp tall in portrait

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.

TAB NAVIGATION

Scrollable tab bars offer you more space, but obfuscates the total number of tabs. This is 32dp tall.

IT SLIDES!

VIEW CONTROL

Instead of tabs or drop downs, use the view control spinner to handle modifications to the view below

LIGHTWEIGHT.

EASY PEEZY.

SIDE DRAWER

It’s important to note that most side drawer libraries on Android normally require the action bar

THINGS TO AVOID• Chevrons

• Back Buttons

• Text Action Icons

• Rounded App Icons

AH, THE BAD SIDE OF TOWN.

CHEVRONSThese are a very common design element, but don’t belong in Android. List actions that require tapping behavior should be obvious.

YOU’RE KIDDING!

BACK BUTTONSRely on up and back behavior rather than designing back buttons. This is, very specifically, iOS elements.

WE COVERED THIS?

TEXT ACTIONSButtons 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…

ROUNDED APP ICONSAndroid gives you the ability to use transparent PNGs so you can shape icons in any format.

I’M SO USED TO ROUNDED SQUARES!

WHERE TO BEGIN• The Set Up

• Style Guide

• Fragmentation

• Multiple Resolutions

• Landscape

• Tablet

• Slicing for Multiple Resolutions

• 9Patching

I’M READY!

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.

STYLE GUIDE• Simplify

• Simplify

• Simplify

• Everyone’s going simple

GEEZ, WE GET IT…YOU LIKE THINGS SIMPLE

TWEET TWEET.

A TO THE Z.

SPOT-IFY

MULTIPLE RESOLUTIONS

XHDPI

25.9%

HDPI

38.5%

MDPI

23.4%

THAT’S LIKE 88% OF USERS COVERED?

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?

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?

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…

SLICING FOR MULTIPLE RESOLUTIONS• A Tutorial

SWEET, TIME FOR PHOTOSHOP!

9PATCHING

SWEET DESIGN BRO.

9patching lets you compress an element like this to stretch without artifacts.

9PATCHING

OK?

First, reduce the element down to as small as you can get it with stretchable areas in mind.

9PATCHING

FREE STUFF! NICE.

Drop it into the 9patch utility (available for free)

9PATCHING

SAY THAT AGAIN?

Draw outlines for portions of the element that you want stretchable.

9PATCHING

THAT MAKES SENSE…

Right and bottom edge define the area that’s “content.”

Top and left edge define areas that are stretchable.

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?

Q&A TIME OOO! PICK ME FIRST!

TWO TOASTERS

Thank You!