Description of 4 key Principles of Material Design Motion. Including examples of how to implement the components in Android code.

1. Mastering Material Motion
by Mike Wolfson
Droidcon NYC 2016
Download Demo App Now:
http://goo.gl/pq8VdA
1 @mikewolfson

2. Material Design
2014 - Material Design Guidelines
https://material.google.com
2016 - Motion Guidelines
https://material.google.com/motion
2 @mikewolfson

3. Material Design Principles
1. Material is the metaphor
2. Bold, graphic, intentional
3. Motion Provides Meaning
3 @mikewolfson

4. Motion Provides
Meaning
"Key Giveaway of a High Quality App"
"Makes Material, Material"
"Most often overlooked part of making an
App Great"
-- John Schlemmer Motion Lead at Google
4 @mikewolfson

5. Why do we need
Motion Guidelines?
• Describe works and what doesn't
• Pinpoint what feels "right"
• Avoid going overboard
5 @mikewolfson

6. Motion Principles
Material in motion has the following
characteristics:
• Responsive
• Natural
• Aware
• Intentional
6 @mikewolfson

7. Principle 1
Responsive
Motion respects and reinforces the user as
the prime mover.
• Touch Feedback
• Elevation
7 @mikewolfson

8. How to: Default Ripple
selectableItemBackground
<TextView
...
android:background="?attr/selectableItemBackground"
/>
Ripple without Border
?attr/selectableItemBackgroundBorderless
8 @mikewolfson

9. How to: Custom Ripple
API 21+ can use RippleDrawable
1. Selector - support older OS
resdrawablebg_foo.xml
2. Ripple
resdrawable-v21bg_foo.xml
3. Apply to View:
<TextView
...
android:background="@drawable/bg_selector"/>
9 @mikewolfson

10. Custom Ripple XML
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent"> <!-- Ripple Color -->
<!-- Mask keeps Ripple within View bounds -->
<color android:color="@android:color/white"/>
<item android:id="@android:id/mask"/>
<!-- Default Background Omit for none-->
<item android:drawable="@color/grey_300"/>
</ripple>
10 @mikewolfson

11. Elevation: stateListAnimator
1. Create Folder
resanimator
2. Create StateListAnimator
resanimatorraise.xml
3. Apply to View
<TextView
...
`android:stateListAnimator="@animator/raise"`/>
https://blog.stylingandroid.com/statelistanimator/
11 @mikewolfson

12. StateListAnimator XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>
12 @mikewolfson

13. How to: Custom Ripple with Elevation
<TextView
...
android:background="@drawable/bg_selector"
android:stateListAnimator="@animator/raise"/>
13 @mikewolfson

14. Principle 1
Responsive
Demo
User generates energy in the form of ripple,
and the material raising to the touch
14 @mikewolfson

15. Principle 2
Natural
Inspired by Reality
Material depicts natural movement
inspired by forces in the real world.
• Duration
• Easing
15 @mikewolfson

16. Duration
Best Practices
• Keep it Fast (on all screens)
• Duration specific to screen size
• Natural Easing Curves
• Don't do it
16 @mikewolfson

17. Duration
Multiple screen sizes
Don't use single duration for all animations
• Tablet 130% 390ms
• Normal 100% 300ms
• Wearable 70% 210ms
17 @mikewolfson

18. Easing Curves
Motion Duration and Easing Guidelines
https://material.google.com/motion/duration-easing.html
Android Animation Interpolators
https://developer.android.com/reference/android/view/animation/
Interpolator.html
Chet Haase "Interpolator Playground"
https://github.com/google/android-ui-toolkit-demos/tree/master/
Animations/InterpolatorPlayground
18 @mikewolfson

19. Standard curve
Objects quickly accelerate and slowly
decelerate between on-screen locations.
Use FastOutSlowInInterpolator
19 @mikewolfson

20. Acceleration curve
(“Easing in”)
Objects leave the screen at full velocity.
They do not decelerate when off-screen.
Use FastOutLinearInInterpolator
20 @mikewolfson

21. Deceleration curve
(“Easing out”)
Objects enter the screen at full velocity
from off-screen and slowly decelerate to a
resting point.
Use LinearOutSlowInterpolator
21 @mikewolfson

22. Principle 2
Natural
Demo
22 @mikewolfson

23. Bad - Don't specify Interpolator
Default is Linear
exitBad.setOnClickListener(new View.OnClickListener() {
// BAD- no interpolator, will default to Linear
public void onClick(View view) {
Animation anim3 = AnimationUtils.loadAnimation(mActivity,
R.anim.slideup_in);
bigRedBall.startAnimation(anim3); }
});
23 @mikewolfson

24. Good - Use correct Interpolator
For exit animation
exitGood.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Animation anim1 = AnimationUtils.loadAnimation(mActivity, R.anim.slideup_in);
Interpolator interpFosi = AnimationUtils.loadInterpolator(mActivity,
android.R.interpolator.fast_out_slow_in);
anim1.setInterpolator(interpFosi);
bigRedBall.startAnimation(anim1); }
});
24 @mikewolfson

25. Good - Use correct Interpolator
For enter animation
enterGood.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Animation anim2 = AnimationUtils.loadAnimation(mActivity, R.anim.slidedown_out);
Interpolator interpFoli = AnimationUtils.loadInterpolator(mActivity,
android.R.interpolator.fast_out_linear_in);
anim2.setInterpolator(interpFoli);
bigRedBall.startAnimation(anim2); }
});
25 @mikewolfson

26. Principle 3
Aware
Material is aware of its surroundings,
including the user and other material
around it. It can be attracted to objects and
respond appropriately to user intent.
26 @mikewolfson

27. Automatic animation
Layout on right has following attribute:
<LinearLayout
...
android:animateLayoutChanges="true" >
27 @mikewolfson

28. RecyclerView
Use adapter methods
- notifyItemInserted(2)
- notifyItemRangeChanged(2, 6)
- notifyItemRemoved(2)
- https://developer.android.com/reference/android/support/v7/util/
DiffUtil.html
28 @mikewolfson

29. Principle 4
Intentional
Material in motion guides focus to the right
spot at the right time.
29 @mikewolfson

30. Intentional
Single Element
One item moves
30 @mikewolfson

31. Intentional
Two Elements
Good
Two items move together
31 @mikewolfson

32. Intentional
Too many elements
Bad
Two items move differently
32 @mikewolfson

33. Intentional
Too many elements
Really, Really Bad
Normal speed
33 @mikewolfson

34. Intentional
Too many elements
Demo - slowed down
33% of normal speed
34 @mikewolfson

35. How to: SharedElementTransition
1. Enable transitions in base styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:windowContentTransitions">true</item>
...
</style>
35 @mikewolfson

36. How to: SharedElementTransition
2. Transition Attribute in Start and End layouts
//Activity #1
<ImageView
android:id="@+id/hero_img1"
...
android:transitionName="@string/trans_hero1" />
//Activity #2
<ImageView
android:id="@+id/hero_img1_lg"
...
android:transitionName="@string/trans_hero1" />
36 @mikewolfson

37. How to: SharedElementTransition
3. Call transition in Java
final ImageView heroImg1 = (ImageView) findViewById(R.id.hero_img1);
final String transHero = getResources().getString(R.string.trans_hero1);
heroImg1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(mActivity, IntentionalEndActivity.class);
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(mActivity, (View)heroImg1, transHero);
startActivity(intent, options.toBundle());
}
});
37 @mikewolfson

38. Review: Motion
Principles
Material in motion has the following
characteristics:
• Responsive
• Natural
• Aware
• Intentional
38 @mikewolfson

39. Thank You
Resources
http://android-developers.blogspot.com/2014/10/implementing-
material-design-in-your.html
http://www.mikewolfson.com
http://goo.gl/pq8VdA
https://github.com/mwolfson/MaterialMotionApp
39 @mikewolfson

40. Review
Style 1
Style 2
• Style 3
40 @mikewolfson