Android Design: Beyond the Guidelines

BEYOND THE
GUIDELINES
Creating character and identity in
your Android applications

Kevin Grant
Thursday, November 7, 13

It’s still awesome


It’s still awesome
tumblr.com/jobs


Problem
All basic apps look the same


All holo apps look the
same


same
‣ Default styles are easy to implement


same
‣ ActionBar is really hard to customize


same
‣ ActionBar is really hard to customize
‣ Deviation isn’t encouraged


New York Times

News
Weak Branding
(these could all be the same)

Circa

Currents

News Strong Branding
Flipboard


Pulse

Users wants results,
not rules


not rules
‣ Creativity is rewarded


not rules
‣ “Generally ﬁt” into ecosystem

is enough


not rules
‣ “Generally ﬁt” into ecosystem

is enough
‣ Don’t listen to Android

design trolls


“Don’t port your iOS
design to android”


“Don’t port your iOS
design to android”
This doesn’t mean design
should not be a priority


Going to cover 3
topics today


Going to cover 3
topics today
‣ Say YES to your designers


Going to cover 3
topics today
‣ Make your applications WHIMSICAL


Going to cover 3
topics today
‣ Make your applications WHIMSICAL
‣ Be a DESIGN LEADER


Section 1
SAYING YES

Designers send payments to kevingrant5@gmail.com


Section 1
SAYING YES

PROBABLY DO THAT
Designers send payments to kevingrant5@gmail.com


Wouldn’t it be great if...


What do you think about...


What do you think about...
How hard would it be to...


Don’t be that guy


Don’t be that guy
‣ Designers aren’t here to ruin the product or

everyone’s lives (just yours)


Don’t be that guy

‣ Most of the time, they’re requests are

reasonable, it just requires extra work


Don’t be that guy

‣ Most of the time, they’re requests are

reasonable, it just requires extra work
‣ If your designer asks you to move a pixel,

YOU ASK HOW HIGH.


Example
Can we increase the padding
between the home icon and
the back carrot?


Example
the back carrot?

No
Ugh, Google designed
it this way for a
reason


Example
the back carrot?

No
Ugh, Google designed
it this way for a
reason


Yes!
I’m sure there’s
something we can do,
I’ll get back to you

Example
Can we change the text color
of a action button based on
it’s state? E.G. FOLLOW should
be white, UNFOLLOW should
be gray.


Example
be gray.

No
You can’t really
change the color of
action bar text
programmatically.


Example
be gray.

No
You can’t really
change the color of
action bar text
programmatically.


Yes!
Sure! It’s not as
straightforward as
just changing the
color, but we can
create a custom view
and use that instead.

Example
Can we add a cool flippy
animation to our dialogs to
make them feel like cards?


Example

No
Unfortunately,
animating dialogs
isn’t supported very
well and there isn’t
much we can do.

Example

No
Unfortunately,
animating dialogs
isn’t supported very
well and there isn’t
much we can do.

Yes!
Hmm that could be tricky!,
We can style an Activity to
look like a dialog and use
Activity Transitions

Note to Designers


Note to Designers
‣ We probably say no too often


Note to Designers
‣ Don’t hate on your developers! It’s not their fault!

(Random fun stuff isn’t well supported)


Note to Designers

‣ We’re afraid to work on things that have

unpredictable deadlines


Note to Designers

‣ We’re afraid to work on things that have

unpredictable deadlines
‣ Work with your project managers to make sure that

developers feel comfortable making design risks
that might end up not being used


Case Study - Trending Tag

Can we have these little boxes, and inside the
boxes, new posts come in from the left and right,
kind of like the Windows live tiles?

Architecture


Architecture
‣ HorizontalListView (Special touch interception for GingerBread)


Architecture
‣ Added as a Header to List


Architecture
‣ CustomViewSwitcher


Architecture
‣ Generates child views


Architecture
‣ Manages animations and state


Architecture
‣ Manages header tag


Architecture
‣ 7 types of child views


Architecture
‣ Stateless


Architecture
‣ Stateless
‣ Manages it’s own design

Issues
Always animating


Issues
Always animating
‣ Since main screen is a ViewPager, the

Animations were always running


Issues
Always animating

‣ Animation implementation breaking other

unrelated animations


Issues
Always animating


‣ Header Views are never recycled


Issues
Always animating


‣ always animating even if not visible


Issues
Always animating


‣ always animating even if not visible
‣ Hurts scroll performance


The code sucks


The code sucks
Doesn’t matter, still works


Section 2
Whimsy


Creative block?


Get drunk.


There is nothing fun about holo


There is nothing fun about holo

Your app should be fun


Use Colors
Vine


Rdio

Do unexpected things
Yelp


Do unexpected things
Yelp


Foursquare (iOS, but it’s still awesome)

Add meaningful animations
Pinterest


Circa

Add meaningful animations
Pinterest

(Check out 4.4 ListViewWindowCompat)


Circa

Add meaningless animations
Snapchat


Why?
its fun. We like to be delighted


Screen Action Items


Screen Action Items
- Actionable items outside of
the ActionBar


Screen Action Items
the ActionBar
- Unique experience of
blending your passive
content


Screen Action Items
the ActionBar
content
- Provide unique branding


Screen Action Items
the ActionBar
content
- Provide unique branding
- Great place to have “fun”


How’d we do it?
Screen Action Items can be difﬁcult
to integrate into existing code bases.
Use case questions must be
answered:


How’d we do it?
answered:
- Shoud view always be present?


How’d we do it?
answered:
- Hide on select or scroll?


How’d we do it?
answered:
- Every Activity (or fragment)?


How’d we do it?
answered:
- Every Activity (or fragment)?
- Moveable?


How’d we do it?


How’d we do it?
- Create Views Dynamically


How’d we do it?
- Add Views to DecorView for maximum flexibility


How’d we do it?
(getWindow().getDecorView())


How’d we do it?

- If targeting API < 11, position using left / top margins


How’d we do it?

- If targeting API < 11, position using left / top margins
- If targeting API >= 11, can position using setX / setY or
using animators


What can I do today?



Add fun press states!


Growing Press State


Growing Press State

Mileage may vary based
on how you want to
detect “move outside”


Growing Press State continued


Use more than 2
values


Use more than 2
values

Use Different
interpolators

Cooler Transitions


Dialog Themed Activitys
and Popup Components to
reduce Navigation Remorse

Facebook


Tumblr

Action Animations make me feel special
Google+


Tumblr

Section 3
BE A DESIGN LEADER
Don’t be a follower


Everything we have
started as someones idea


Everything we have
‣ ViewPager


Everything we have
‣ ViewPager
‣ Double-Tap to zoom


Everything we have
‣ ViewPager
‣ Slide to dismiss list-items


Everything we have
‣ ViewPager
‣ Slide to dismiss list-items
‣ Pretty much everything


Navigation Drawer
Remember when this was socially unacceptable?


Navigation Drawer
‣ Junk Drawer / Trash Drawer


Navigation Drawer
‣ Sloppy Design


Navigation Drawer
‣ Sloppy Design
‣ Doing it wrong


Now it’s a leading navigation style



ESPN ScoreCenter



ESPN ScoreCenter


Foursquare


ESPN ScoreCenter


Foursquare

Facebook


ESPN ScoreCenter


Foursquare

Facebook

Spotify

In Every Google App


But what if I want to change it a bit


But what if I want to change it a bit

Generates a lot of rage

Until Google does it, then it’s ﬁne


Pull To Refresh
Remember when this was considered bad design
for Android?


Now it’s a behavior all users expect
Twitter

Foursquare

Path

show images of all the apps
Text


Now it’s a behavior all users expect
Twitter

Foursquare

Path (the booger)

show images of all the apps
Text


And Google added it into all of their products
No ofﬁcial support yet =(
Gmail


Google+

Drive

How does Chrome even ﬁt in?


How does Chrome even ﬁt in?

I dunno, but it’s
awesome

What does this all mean?



Do something
awesome



Do something
awesome
(but don’t use lens flares)


Swipe Back
(stolen from iOS7)


iOS != Bad


iOS != Bad
Even though I like to
pretend it does


Design for a
tiny hand.


Design for a
tiny hand.
- Up Button too far away


Design for a
tiny hand.
- Back button provides no context


Design for a
tiny hand.
- Back button provides no context
- Why not?

Swipe Back


How’d we do it


How’d we do it
Before launching any activity,
capture the bitmap of the current
window and save it in image cache.


How’d we do it
Override setContentView in the
receiving activity and set the bitmap
on an ImageView behind the activity,
on the DecorView


How’d we do it
Override setContentView in the
receiving activity and set the bitmap
on an ImageView behind the activity,
on the DecorView
Open source coming soon!

Whatever you do:
Be consistent


We Took our cues
from Android...


And went a bit
further


Wrapping up


Wrapping up
‣ Say YES, it’s what makes our shit

awesome


Wrapping up

awesome
‣ Be WHIMSICAL!


Wrapping up

awesome
‣ Be WHIMSICAL!
‣ Be a DESIGN LEADER and push

beyond the guidelines


“Good applications
follow the guidelines,
better applications
challenge them.”


Thank you!

kevingrant@tumblr.com
kevinthebigapple.tumblr.com
@kevingrant5

Android Design: Beyond the Guidelines

More Related Content

Viewers also liked

Similar to Android Design: Beyond the Guidelines

Recently uploaded

Android Design: Beyond the Guidelines