Download - Android Design: Beyond the Guidelines

BEYOND THE GUIDELINES

Kevin Grant

Creating character and identity inyour Android applications

Thursday, November 7, 13

It’s still awesome


It’s still awesometumblr.com/jobs


ProblemAll basic apps look the same


All holo apps look the same


‣ Default styles are easy to implement




‣ ActionBar is really hard to customize




‣ ActionBar is really hard to customize

‣ Deviation isn’t encouraged



Weak Branding

(these could all be the same)

NewsNew York Times

Circa Currents


News Strong Branding

Flipboard Pulse


Users wants results, not rules


‣ Creativity is rewarded




‣ “Generally fit” into ecosystemis enough




‣ “Generally fit” into ecosystemis 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



‣ Say YES to your designers




‣ Make your applications WHIMSICAL




‣ Make your applications WHIMSICAL

‣ Be a DESIGN LEADER


SAYING YES

Designers send payments to [email protected]

Section 1


SAYING YES

Designers send payments to [email protected]

Section 1

PROBABLY DO THAT


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


‣ 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.

Don’t be that guy


ExampleCan we increase the padding between the home icon and the back carrot?



Ugh, Google designed it this way for a reason

No



Ugh, Google designed it this way for a reason

NoI’m sure there’s

something we can do, I’ll get back to you

Yes!


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



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

No



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

No Sure! It’s not as straightforward as

just changing the color, but we can

create a custom view and use that instead.

Yes!


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



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

No



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

NoHmm that could be tricky!, We can style an Activity to

look like a dialog and use Activity Transitions

Yes!


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?


(me)Thursday, November 7, 13

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

Architecture


IssuesAlways animating


‣ Since main screen is a ViewPager, the Animations were always running




‣ Animation implementation breaking other unrelated animations





‣ Header Views are never recycled






‣ always animating even if not visible






‣ always animating even if not visible

‣ Hurts scroll performance



The code sucks


The code sucksDoesn’t matter, still works


WhimsySection 2


Creative block?


Get drunk.


There is nothing fun about holo


Your app should be fun

There is nothing fun about holo


Use ColorsVine 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 Circa

(Check out 4.4 ListViewWindowCompat)


Add meaningless animations

Snapchat


Why?

its fun. We like to be delighted


Screen Action Items


- Actionable items outside of the ActionBar

Screen Action Items



- Unique experience of blending your passive content

Screen Action Items




- Provide unique branding

Screen Action Items




- Provide unique branding

- Great place to have “fun”

Screen Action Items


Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered:

How’d we do it?



- Shoud view always be present?

How’d we do it?



- Shoud view always be present?- Hide on select or scroll?

How’d we do it?




- Every Activity (or fragment)?

How’d we do it?




- 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?



- Add Views to DecorView for maximum flexibility (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

How’d we do it?


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 Activitysand Popup Components to

reduce Navigation Remorse


Facebook Tumblr


Action Animations make me feel special

What can I do today?Google+ Tumblr


Don’t be a follower

BE A DESIGN LEADERSection 3


Everything we have started as someones idea



‣ ViewPager



‣ ViewPager

‣ Double-Tap to zoom



‣ ViewPager


‣ Slide to dismiss list-items



‣ ViewPager


‣ Slide to dismiss list-items

‣ Pretty much everything


Navigation DrawerRemember when this was socially unacceptable?



‣ Junk Drawer / Trash Drawer




‣ Sloppy Design




‣ 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 rageThursday, November 7, 13

Until Google does it, then it’s fine


Pull To RefreshRemember when this was considered bad design

for Android?


Now it’s a behavior all users expect

show images of all the apps

Text

Twitter Foursquare Path


Now it’s a behavior all users expect

show images of all the apps

Text

Twitter Foursquare Path (the booger)


And Google added it into all of their productsNo official support yet =(

Gmail Google+ Drive


How does Chrome even fit in?


How does Chrome even fit in?

I dunno, but it’sawesome


What does this all mean?



Do something awesome



Do something awesome

(but don’t use lens flares)


Swipe Back(stolen from iOS7)


iOS != Bad


Even though I like to pretend it does

iOS != Bad


Design for a tiny hand.


- Up Button too far away



- Up Button too far away- Back button provides no context



- Up Button too far away- Back button provides no context- Why not?



Swipe Back


How’d we do it


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



Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView



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


‣ Say YES, it’s what makes our shit awesome

Wrapping up



‣ Be WHIMSICAL!

Wrapping up



‣ Be WHIMSICAL!‣ Be a DESIGN LEADER and push

beyond the guidelines

Wrapping up


“Good applications follow the guidelines,

better applications challenge them.”


Thank you!

[email protected]

kevinthebigapple.tumblr.com

@kevingrant5


mailto:[email protected]




