With Android Design guidelines becoming more robust and easier to implement, it's easy to have your application's design lost in a homogenized sea of "Holo Themed" user interfaces.
When is it ok to break away from the Design Guidelines? In this session, we will examine and showcase examples where developers have "thought outside the box" and implemented beautiful interfaces and animations that create captivating and unique experiences for their users.
We will also discuss how to achieve some of these design features in your own applications by looking at common patterns for a variety of designs that will leave your users delightfully surprised and help you push the boundaries of Android's paradigms in the future.
Note: Most images are animated gifs, but unfortunately will not animate in this format.
10. All holo apps look the
same
Thursday, November 7, 13
11. All holo apps look the
same
‣ Default styles are easy to implement
Thursday, November 7, 13
12. All holo apps look the
same
‣ Default styles are easy to implement
‣ ActionBar is really hard to customize
Thursday, November 7, 13
13. All holo apps look the
same
‣ Default styles are easy to implement
‣ ActionBar is really hard to customize
‣ Deviation isn’t encouraged
Thursday, November 7, 13
14. New York Times
News
Weak Branding
(these could all be the same)
Circa
Thursday, November 7, 13
Currents
19. Users wants results,
not rules
‣ Creativity is rewarded
‣ “Generally fit” into ecosystem
is enough
Thursday, November 7, 13
20. Users wants results,
not rules
‣ Creativity is rewarded
‣ “Generally fit” into ecosystem
is enough
‣ Don’t listen to Android
design trolls
Thursday, November 7, 13
21. “Don’t port your iOS
design to android”
Thursday, November 7, 13
22. “Don’t port your iOS
design to android”
This doesn’t mean design
should not be a priority
Thursday, November 7, 13
35. Don’t be that guy
‣ Designers aren’t here to ruin the product or
everyone’s lives (just yours)
Thursday, November 7, 13
36. Don’t be that guy
‣ Designers aren’t here to ruin the product or
everyone’s lives (just yours)
‣ Most of the time, they’re requests are
reasonable, it just requires extra work
Thursday, November 7, 13
37. Don’t be that guy
‣ Designers aren’t here to ruin the product or
everyone’s lives (just yours)
‣ 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.
Thursday, November 7, 13
38. Example
Can we increase the padding
between the home icon and
the back carrot?
Thursday, November 7, 13
39. Example
Can we increase the padding
between the home icon and
the back carrot?
No
Ugh, Google designed
it this way for a
reason
Thursday, November 7, 13
40. Example
Can we increase the padding
between the home icon and
the back carrot?
No
Ugh, Google designed
it this way for a
reason
Thursday, November 7, 13
Yes!
I’m sure there’s
something we can do,
I’ll get back to you
41. 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.
Thursday, November 7, 13
42. 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.
No
You can’t really
change the color of
action bar text
programmatically.
Thursday, November 7, 13
43. 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.
No
You can’t really
change the color of
action bar text
programmatically.
Thursday, November 7, 13
Yes!
Sure! It’s not as
straightforward as
just changing the
color, but we can
create a custom view
and use that instead.
44. Example
Can we add a cool flippy
animation to our dialogs to
make them feel like cards?
Thursday, November 7, 13
45. Example
Can we add a cool flippy
animation to our dialogs to
make them feel like cards?
No
Unfortunately,
animating dialogs
isn’t supported very
well and there isn’t
much we can do.
Thursday, November 7, 13
46. Example
Can we add a cool flippy
animation to our dialogs to
make them feel like cards?
No
Unfortunately,
animating dialogs
isn’t supported very
well and there isn’t
much we can do.
Thursday, November 7, 13
Yes!
Hmm that could be tricky!,
We can style an Activity to
look like a dialog and use
Activity Transitions
49. Note to Designers
‣ We probably say no too often
‣ Don’t hate on your developers! It’s not their fault!
(Random fun stuff isn’t well supported)
Thursday, November 7, 13
50. Note to Designers
‣ We probably say no too often
‣ Don’t hate on your developers! It’s not their fault!
(Random fun stuff isn’t well supported)
‣ We’re afraid to work on things that have
unpredictable deadlines
Thursday, November 7, 13
51. Note to Designers
‣ We probably say no too often
‣ Don’t hate on your developers! It’s not their fault!
(Random fun stuff isn’t well supported)
‣ 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
Thursday, November 7, 13
52. 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?
Thursday, November 7, 13
58. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
Thursday, November 7, 13
59. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
‣ Manages animations and state
Thursday, November 7, 13
60. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
‣ Manages animations and state
‣ Manages header tag
Thursday, November 7, 13
61. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
‣ Manages animations and state
‣ Manages header tag
‣ 7 types of child views
Thursday, November 7, 13
62. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
‣ Manages animations and state
‣ Manages header tag
‣ 7 types of child views
‣ Stateless
Thursday, November 7, 13
63. Architecture
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
‣ Manages animations and state
‣ Manages header tag
‣ 7 types of child views
‣ Stateless
‣ Manages it’s own design
Thursday, November 7, 13
66. Issues
Always animating
‣ Since main screen is a ViewPager, the
Animations were always running
‣ Animation implementation breaking other
unrelated animations
Thursday, November 7, 13
67. Issues
Always animating
‣ Since main screen is a ViewPager, the
Animations were always running
‣ Animation implementation breaking other
unrelated animations
‣ Header Views are never recycled
Thursday, November 7, 13
68. Issues
Always 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
Thursday, November 7, 13
69. Issues
Always 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
‣ Hurts scroll performance
Thursday, November 7, 13
86. Screen Action Items
- Actionable items outside of
the ActionBar
Thursday, November 7, 13
87. Screen Action Items
- Actionable items outside of
the ActionBar
- Unique experience of
blending your passive
content
Thursday, November 7, 13
88. Screen Action Items
- Actionable items outside of
the ActionBar
- Unique experience of
blending your passive
content
- Provide unique branding
Thursday, November 7, 13
89. Screen Action Items
- Actionable items outside of
the ActionBar
- Unique experience of
blending your passive
content
- Provide unique branding
- Great place to have “fun”
Thursday, November 7, 13
90. How’d we do it?
Screen Action Items can be difficult
to integrate into existing code bases.
Use case questions must be
answered:
Thursday, November 7, 13
91. How’d we do it?
Screen Action Items can be difficult
to integrate into existing code bases.
Use case questions must be
answered:
- Shoud view always be present?
Thursday, November 7, 13
92. How’d we do it?
Screen Action Items can be difficult
to integrate into existing code bases.
Use case questions must be
answered:
- Shoud view always be present?
- Hide on select or scroll?
Thursday, November 7, 13
93. How’d we do it?
Screen Action Items can be difficult
to integrate into existing code bases.
Use case questions must be
answered:
- Shoud view always be present?
- Hide on select or scroll?
- Every Activity (or fragment)?
Thursday, November 7, 13
94. How’d we do it?
Screen Action Items can be difficult
to integrate into existing code bases.
Use case questions must be
answered:
- Shoud view always be present?
- Hide on select or scroll?
- Every Activity (or fragment)?
- Moveable?
Thursday, November 7, 13
96. How’d we do it?
- Create Views Dynamically
Thursday, November 7, 13
97. How’d we do it?
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility
Thursday, November 7, 13
98. How’d we do it?
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility
(getWindow().getDecorView())
Thursday, November 7, 13
99. How’d we do it?
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility
(getWindow().getDecorView())
- If targeting API < 11, position using left / top margins
Thursday, November 7, 13
100. How’d we do it?
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility
(getWindow().getDecorView())
- If targeting API < 11, position using left / top margins
- If targeting API >= 11, can position using setX / setY or
using animators
Thursday, November 7, 13
101. What can I do today?
Thursday, November 7, 13
102. What can I do today?
Add fun press states!
Thursday, November 7, 13
116. Everything we have
started as someones idea
‣ ViewPager
‣ Double-Tap to zoom
‣ Slide to dismiss list-items
Thursday, November 7, 13
117. Everything we have
started as someones idea
‣ ViewPager
‣ Double-Tap to zoom
‣ Slide to dismiss list-items
‣ Pretty much everything
Thursday, November 7, 13
155. How’d we do it
Before launching any activity,
capture the bitmap of the current
window and save it in image cache.
Thursday, November 7, 13
156. How’d we do it
Before 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
Thursday, November 7, 13
157. How’d we do it
Before 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
Open source coming soon!
Thursday, November 7, 13
162. Wrapping up
‣ Say YES, it’s what makes our shit
awesome
Thursday, November 7, 13
163. Wrapping up
‣ Say YES, it’s what makes our shit
awesome
‣ Be WHIMSICAL!
Thursday, November 7, 13
164. Wrapping up
‣ Say YES, it’s what makes our shit
awesome
‣ Be WHIMSICAL!
‣ Be a DESIGN LEADER and push
beyond the guidelines
Thursday, November 7, 13