Takuo Suzuki – Developer Relations, Japan Lead, Google

1. Material·Deep·Dive¬
A design + implementation update on material
design, July 2015

2. +takuosuzuki
@taquo
Takuo Suzuki
Developer Relations Japan Lead, Google

3. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

4. A long time ago…

5. majorgeeks.com zdnet.comcomputer.howstuffworks.com
Gmail.com Android Mobile Web

6. 2011

7. Project Kennedy

8. theverge.com

9. loliboat.wordpress.com
Holo

10. smartphoneblogging.com
Gmail for Android
(Holo)
Gmail.com
(Kennedy)

11. This was an industry-wide problem.

13. M AT E R I A L D E S I G N

14. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

15. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

16. Tangible surfaces1

18. Depth focuses
attention and
provides structure

19. Interaction cues
(scrolling and pinning)

20. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

21. Print-like design2

22. Baseline
grids +
keylines

24. ROBOTO
BOLD
MEDIUM
REGULAR
LIGHT
THIN

25. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

26. Materials
transform

27. Instructive
motion

28. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

29. Master/detail

31. State·of·Material¬

32. 200K
Material Apps
40%
Since Lollipop

33. g.co/materialshowcase

35. Trello
One of our guiding themes during the
Material redesign was simplicity, and we
think this paid off nicely.”
Hamid
Mobile Lead
“

36. 10% increase in sessions per user per
week.
42% more boards created per session.
63% more people added to boards per
session.
Trello

37. The Hunt
Material design was a great way to start
building our Android app, it was like having
a team of design experts, helping you build
the best product for an android device.”
Jenny Davis
Product Designer
“

38. 30% improvement in starting “hunts” relative
to non-Material platforms.
The Hunt

39. Pocket Casts
Material design has really paid off and
made our app much better.
Philip Simpson
Co-founder & Android Developer
“

40. We found when we switched to material
design, when we updated our app, and
embraced all these new things that google
was giving us, we found our sales actually
increased by 30%. And the reception we
had was amazing. People love it…”
Russell Ivanovic
Co-Founder & Android Developer
“
Pocket Casts

41. New·Resources¬

44. Android Design Support Library
dependencies {
compile "com.android.support:design:22.2.+"
}

45. Deep·Dive¬
— FAB
— Coordinated motion
— Navigation
— Delightful details
— Branding

46. FAB¬

47. FAB Expansion

48. FAB Expansion

49. FloatingActionButton Simple
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/ic_done" />

50. FloatingActionButton Customised
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/ic_done"
app:backgroundTint="@color/blue"
app:fabSize="mini" />

51. Coordinated·Motion¬
CoordinatorLayout

52. FAB + Snackbar

53. App Bar Scrolling

54. App Bar

55. App Bar
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<!-- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

56. App Bar
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<!-- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

57. App Bar
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<!-- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

58. App Bar + Tabs

59. App Bar + Flexible Space

60. <android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="192dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim=“?attr/colorPrimary”>
<ImageView ... />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
App Bar + Flexible Space

61. <android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="192dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView ... />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
App Bar + Flexible Space

62. <android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="192dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView ... />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
App Bar + Flexible Space

63. Navigation¬

64. Navigation Patterns by # of Levels
Tabs Drawer Navigation + content
integration

65. Bonus: New options for desktop sizes

66. TabLayout

67. TabLayout
TabLayout tabLayout = findViewById(...);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
ViewPager viewPager = ...
PagerAdapter pagerAdapter = ...
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);

68. NavigationView

69. NavigationView
<android.support.v4.widget.DrawerLayout>
<!-- your content layout goes here -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

70. NavigationView
<android.support.v4.widget.DrawerLayout>
<!-- your content layout goes here -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

71. NavigationView (menu)
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_item_1"
android:icon="@drawable/ic_android"
android:title="@string/nav_item_1" />
<item
android:id="@+id/nav_item_2"
android:icon="@drawable/ic_android"
android:title="@string/nav_item_2" />
</group>

72. Delightful·Details¬
An experience crafted to exceed expectations

74. VectorDrawable
<vector ...>
<path
android:name="foo"
android:pathData="M300,70 l 0,-70...”
android:strokeColor=“#fff” />
<group>
<path ...>
<path ...>
</group>
</vector>

75. AnimatedVectorDrawable
Animated
Vector
Drawable
Vector
Drawable
Object
Animator(s)

76. Path operations
Translate
Scale
Rotate
Alpha
Trim start/end
Clip-path

78. <vector ...>
<path
android:name="stem"
android:pathData="@string/path_stem"
android:strokeWidth="@integer/stroke_width"
android:strokeColor="@color/stroke_color"
android:trimPathStart="@fraction/stem_search_trim_start"
android:trimPathEnd="@fraction/stem_search_trim_end" />
<path
android:name="search_circle"
android:pathData="@string/path_circle"
android:strokeWidth="@integer/stroke_width"
android:strokeColor="@color/stroke_color"
android:trimPathEnd="@fraction/circle_search_trim_end" />
<path

79. <animated-vector android:drawable="search" ...>
<target
android:name="stem"
android:animation="@animator/stem_search_to_back" />
<target
android:name="search_circle"
android:animation="@animator/hide_circle" />
<target
android:name="arrow_head_top"
android:animation="@animator/show_arrow_head" />
<target
android:name="arrow_head_bottom"
android:animation="@animator/show_arrow_head" />

80. Useful tools
SVG → VectorDrawable
http://inloop.github.io/svg2android/
Vector backport
https://github.com/wnafee/vector-compat
Drawing arcs/circles
http://complexdan.com/svg-circleellipse-to-path-converter/
http://users.ecs.soton.ac.uk/rfp07r/interactive-svg-examples/arc.html
Using SVG assets
https://github.com/trello/victor

81. Branding¬

83. Splash Launch screens
Nothing on
screen while
app loads
Fixed-duration
splash screen
even after
app is loaded
Launch
screens

84. Splash Launch screens
Placeholder UI
(more difficult)

85. Splash Launch screens

86. res/values/styles.xml
<style name="Theme.App.MainActivity" parent="Theme.App">
<item name="android:windowBackground">@drawable/launchscreen</item>
</style>

87. res/drawable/launchscreen.xml
<layer-list>
<item>
<color android:color="#fff" />
</item>
<item android:bottom="@dimen/launchscreen_icon_bottom">
<bitmap android:src="@drawable/launchscreen_icon"
android:gravity="center" />
</item>
<item android:bottom="@dimen/launchscreen_logotype_bottom">
<bitmap android:src="@drawable/launchscreen_logotype"
android:gravity="center_horizontal|bottom" />
</item>
</layer-list>

88. res/drawable/launchscreen.xml
<layer-list>
<item>
<color android:color="#fff" />
</item>
<item android:bottom="@dimen/launchscreen_icon_bottom">
<bitmap android:src="@drawable/launchscreen_icon"
android:gravity="center" />
</item>
<item android:bottom="@dimen/launchscreen_logotype_bottom">
<bitmap android:src="@drawable/launchscreen_logotype"
android:gravity="center_horizontal|bottom" />
</item>
</layer-list>

89. MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
if (showLaunchScreen) {
// run an animation, and when it's done,
// set the real window background
getWindow().setBackgroundDrawable(
new ColorDrawable(Color.WHITE));
}
}

90. Bonus: Empty States
Rich, on-brand
illustrations
Starter
onboarding
content

91. Bonus: Error States
How can you be
mad at this?

92. Handy resources
Design library example
https://github.com/chrisbanes/cheesesquare
Activity transitions pointers
https://halfthought.wordpress.com/ (from the author of the API)
https://github.com/googlesamples/android-topeka
http://www.androiddesignpatterns.com/
Material assets & inspiration
https://materialdesignicons.com/
http://www.materialpalette.com/
http://www.materialup.com/

93. +takuosuzuki
@taquo
Takuo Suzuki
Developer Relations Japan Lead, Google
Thank you!¬

94. Questions?¬

95. Appendix¬

96. Material Design Awards

97. May·2015·Updates¬
Resources
— google.com/design
— Icons tool
— Devices tool
— Android Design Support
Library
Spec
— adaptive layouts
— elevation
— splash screens
— FAB expansion
— navigation
— empty states

98. New·Resources¬

99. Making Material Design