Material Design – the state of software design across mobile and web platforms by Chet Haase & Nick Butcher

1. PapercraftMaterial design + implementation
Material Design for Developers

2. A long time ago…

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

4. 2011

5. theverge.com

6. loliboat.wordpress.com
Holo

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

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

9. This was an industry-wide problem.

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

12. A coherent cross-platform
experience

13. A coherent cross-platform
experience
A more flexible design system
for Android

14. A coherent cross-platform
experience
A more flexible design system
for Android
A rational approach to visual,
interaction, and motion design

15. Applied Material

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

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

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

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

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

22. Tangible surfaces1

24. Interaction cues
(scrolling and pinning)

25. Surface
reaction

26. <div id="myCard" class="card"></div>
<paper-shadow id="myShadow" z="1"></div>
// Assign a target explicitly
myShadow.target =
document.getElementById('myCard');
// Auto-assign the target.
<div class="card">
<paper-shadow z="1"></paper-shadow>
</div>

27. paper-focusable
paper-button-base
paper-button
active
focused
pressed
disabled
isToggle
raised
recenteringTouch
fill
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>

28. paper-focusable
paper-button-base
paper-fab
icon
src
mini
<paper-fab icon="add"></paper-fab>
<paper-fab mini icon="favorite"></paper-fab>
<paper-fab src="star.png"></paper-fab>

29. View elevation
View plane
Permanent
z-depth of view
elevation
Transient
z delta
translationZ
Z = elevation + translationZ

30. <ImageView
...
android:elevation="8dp" />
view.animate().translationZ(…).start();
View elevation

31. <ImageView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:elevation="8dp"
android:stateListAnimator=“@anim/my_state_list_animator”
... />
StateListAnimator
Note: the Button provides this automatically

32. Outline
A view’s outline defines the shadow it casts
By default, the outline is derived from the view’s background
<shape android:shape="oval">
<solid android:color=“@color/blue“ />
</shape>
Custom outline: see OutlineProvider

33. A card is a piece of paper
that contains a unique
data set of related,
heterogeneous
information.
Cards

34. A card is a piece of paper
that contains a unique
data set of related,
heterogeneous
information.
Cards
outline
elevation

35. Cards
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
!
<!-- Your card content -->
!
</android.support.v7.widget.CardView>

36. Don’t over
cardify!
x

37. Print-like design2

38. Refined
typography

39. Refined
typography

40. Typographic
scale
Display 4
!
Display 3
!
Display 2
!
Display 1
!
Headline
!
Title
!
Subhead
!
Body 2
!
Body 1
!
Caption
!
Menu
!
Button

41. Baseline
grids +
keylines

42. NOTHING
TO SEE
HERE
Baseline
grids +
keylines

43. Bold
color

44. Primary
+
Accent

45. <style name=“MyTheme”
parent=“android:Theme.Material.Light.DarkActionBar”>
<item name=“android:colorPrimary">@color/indigo_500</item>
<item name=“android:colorPrimaryDark">@color/indigo_700</item>
<item name=“android:colorAccent”>@color/teal_a200</item>
</style>

46. colorPrimary
<style name=“MyTheme”
parent=“android:Theme.Material.Light.DarkActionBar”>
<item name=“android:colorPrimary">@color/indigo_500</item>
<item name=“android:colorPrimaryDark">@color/indigo_700</item>
<item name=“android:colorAccent”>@color/teal_a200</item>
</style>

47. colorPrimaryDark
colorPrimary
<style name=“MyTheme”
parent=“android:Theme.Material.Light.DarkActionBar”>
<item name=“android:colorPrimary">@color/indigo_500</item>
<item name=“android:colorPrimaryDark">@color/indigo_700</item>
<item name=“android:colorAccent”>@color/teal_a200</item>
</style>

48. colorPrimaryDark
colorPrimary colorAccent
<style name=“MyTheme”
parent=“android:Theme.Material.Light.DarkActionBar”>
<item name=“android:colorPrimary">@color/indigo_500</item>
<item name=“android:colorPrimaryDark">@color/indigo_700</item>
<item name=“android:colorAccent”>@color/teal_a200</item>
</style>

49. Content can
provide color

50. Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted

51. Palette p = Palette.generate(bitmap);
Palette
Swatch vibrant = p.getVibrantSwatch();
int vibrantColor = vibrant.getRgb();
int titleColor = vibrant.getTitleTextColor();

52. Meaningful motion3

53. <core-animated-pages transitions="hero-transition cross-fade">
<section id="page1">
<div id="hero1" hero-id="hero" hero></div>
<div id="bottom1" cross-fade></div>
</section>
<section id="page2">
<div id="hero2" hero-id="hero" hero></div>
<div id="bottom2" cross-fade></div>
</section>
</core-animated-pages>
core-selector
core-animated-pages
transitions
lastSelected

55. Activity Transitions
1. Specify any
<ImageView
...
android:transitionName="@string/transition_album_cover" />
layout/album_details.xml

56. Activity Transitions
2
Intent intent = ... // setup Intent as usual
!
ActivityOptionsCompat opts = ActivityOptionsCompat
.makeSceneTransitionAnimation(. . .);
!
// Now start the Activity, using our options bundle
ActivityCompat.startActivity(activity, intent, opts.toBundle());

57. Users
initiate
change

58. <paper-ripple/>
paper-ripple initialOpacity
opacityDecayVelocity

59. RippleDrawable
<ripple android:color=“?android:colorControlHighlight”>
<item>
<shape android:shape="rectangle">
<solid android:color=“@color/grey“ />
</shape>
</item>
</ripple>
Bound to another Drawable
New (v21+)

60. Circular Reveal

61. Circular Reveal
Animator reveal
= ViewAnimationUtils.createCircularReveal(
viewToReveal, // View to reveal
centerX, // mask centre x
centerY, // mask centre y
startRadius, // mask start radius
endRadius); // mask end radius
reveal.start();

62. Fast,
precise
motion
@interpolator/
fast_out_slow_in

63. Fast,
precise
motion
@interpolator/
linear_out_slow_in
@interpolator/
fast_out_linear_in

64. Asymmetric
motion

65. Adaptive design4

67. Toolbar

68. Toolbar
<core-toolbar>
<core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
<div flex>Title</div>
<core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
</core-toolbar>

69. Toolbar
<Toolbar
android:id=”@+id/my_toolbar”
android:layout_height=”?android:actionBarSize”
android:layout_width=”match_parent”
android:background=”?android:colorPrimary” />
Place it within your layouts
Toolbar toolbar = findViewById(R.id.my_toolbar);
setActionBar(toolbar);
Then in your Activity/Fragment
New (v21+)

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

71. Q? +Nick Butcher
@crafty
+Chet Haase
@chethaase
google.com/design/spec