Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mastering Material Motion
by Mike Wolfson
Droidcon NYC 2016
Download Demo App Now:
http://goo.gl/pq8VdA
1 @mikewolfson
Material Design
2014 - Material Design Guidelines
https://material.google.com
2016 - Motion Guidelines
https://material.go...
Material Design Principles
1. Material is the metaphor
2. Bold, graphic, intentional
3. Motion Provides Meaning
3 @mikewol...
Motion Provides
Meaning
"Key Giveaway of a High Quality App"
"Makes Material, Material"
"Most often overlooked part of mak...
Why do we need
Motion Guidelines?
• Describe works and what doesn't
• Pinpoint what feels "right"
• Avoid going overboard
...
Motion Principles
Material in motion has the following
characteristics:
• Responsive
• Natural
• Aware
• Intentional
6 @mi...
Principle 1
Responsive
Motion respects and reinforces the user as
the prime mover.
• Touch Feedback
• Elevation
7 @mikewol...
How to: Default Ripple
selectableItemBackground
<TextView
...
android:background="?attr/selectableItemBackground"
/>
Rippl...
How to: Custom Ripple
API 21+ can use RippleDrawable
1. Selector - support older OS
resdrawablebg_foo.xml
2. Ripple
resdra...
Custom Ripple XML
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android...
Elevation: stateListAnimator
1. Create Folder
resanimator
2. Create StateListAnimator
resanimatorraise.xml
3. Apply to Vie...
StateListAnimator XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/a...
How to: Custom Ripple with Elevation
<TextView
...
android:background="@drawable/bg_selector"
android:stateListAnimator="@...
Principle 1
Responsive
Demo
User generates energy in the form of ripple,
and the material raising to the touch
14 @mikewol...
Principle 2
Natural
Inspired by Reality
Material depicts natural movement
inspired by forces in the real world.
• Duration...
Duration
Best Practices
• Keep it Fast (on all screens)
• Duration specific to screen size
• Natural Easing Curves
• Don't...
Duration
Multiple screen sizes
Don't use single duration for all animations
• Tablet 130% 390ms
• Normal 100% 300ms
• Wear...
Easing Curves
Motion Duration and Easing Guidelines
https://material.google.com/motion/duration-easing.html
Android Animat...
Standard curve
Objects quickly accelerate and slowly
decelerate between on-screen locations.
Use FastOutSlowInInterpolator...
Acceleration curve
(“Easing in”)
Objects leave the screen at full velocity.
They do not decelerate when off-screen.
Use Fa...
Deceleration curve
(“Easing out”)
Objects enter the screen at full velocity
from off-screen and slowly decelerate to a
res...
Principle 2
Natural
Demo
22 @mikewolfson
Bad - Don't specify Interpolator
Default is Linear
exitBad.setOnClickListener(new View.OnClickListener() {
// BAD- no inte...
Good - Use correct Interpolator
For exit animation
exitGood.setOnClickListener(new View.OnClickListener() {
public void on...
Good - Use correct Interpolator
For enter animation
enterGood.setOnClickListener(new View.OnClickListener() {
public void ...
Principle 3
Aware
Material is aware of its surroundings,
including the user and other material
around it. It can be attrac...
Automatic animation
Layout on right has following attribute:
<LinearLayout
...
android:animateLayoutChanges="true" >
27 @m...
RecyclerView
Use adapter methods
- notifyItemInserted(2)
- notifyItemRangeChanged(2, 6)
- notifyItemRemoved(2)
- https://d...
Principle 4
Intentional
Material in motion guides focus to the right
spot at the right time.
29 @mikewolfson
Intentional
Single Element
One item moves
30 @mikewolfson
Intentional
Two Elements
Good
Two items move together
31 @mikewolfson
Intentional
Too many elements
Bad
Two items move differently
32 @mikewolfson
Intentional
Too many elements
Really, Really Bad
Normal speed
33 @mikewolfson
Intentional
Too many elements
Demo - slowed down
33% of normal speed
34 @mikewolfson
How to: SharedElementTransition
1. Enable transitions in base styles.xml
<!-- Base application theme. -->
<style name="App...
How to: SharedElementTransition
2. Transition Attribute in Start and End layouts
//Activity #1
<ImageView
android:id="@+id...
How to: SharedElementTransition
3. Call transition in Java
final ImageView heroImg1 = (ImageView) findViewById(R.id.hero_img...
Review: Motion
Principles
Material in motion has the following
characteristics:
• Responsive
• Natural
• Aware
• Intention...
Thank You
Resources
http://android-developers.blogspot.com/2014/10/implementing-
material-design-in-your.html
http://www.m...
Review
Style 1
Style 2
• Style 3
40 @mikewolfson
Upcoming SlideShare
Loading in …5
×

Mastering Material Motion

650 views

Published on

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

Published in: Mobile
  • Be the first to comment

Mastering Material Motion

  1. 1. Mastering Material Motion by Mike Wolfson Droidcon NYC 2016 Download Demo App Now: http://goo.gl/pq8VdA 1 @mikewolfson
  2. 2. Material Design 2014 - Material Design Guidelines https://material.google.com 2016 - Motion Guidelines https://material.google.com/motion 2 @mikewolfson
  3. 3. Material Design Principles 1. Material is the metaphor 2. Bold, graphic, intentional 3. Motion Provides Meaning 3 @mikewolfson
  4. 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. 5. Why do we need Motion Guidelines? • Describe works and what doesn't • Pinpoint what feels "right" • Avoid going overboard 5 @mikewolfson
  6. 6. Motion Principles Material in motion has the following characteristics: • Responsive • Natural • Aware • Intentional 6 @mikewolfson
  7. 7. Principle 1 Responsive Motion respects and reinforces the user as the prime mover. • Touch Feedback • Elevation 7 @mikewolfson
  8. 8. How to: Default Ripple selectableItemBackground <TextView ... android:background="?attr/selectableItemBackground" /> Ripple without Border ?attr/selectableItemBackgroundBorderless 8 @mikewolfson
  9. 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. 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. 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. 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. 13. How to: Custom Ripple with Elevation <TextView ... android:background="@drawable/bg_selector" android:stateListAnimator="@animator/raise"/> 13 @mikewolfson
  14. 14. Principle 1 Responsive Demo User generates energy in the form of ripple, and the material raising to the touch 14 @mikewolfson
  15. 15. Principle 2 Natural Inspired by Reality Material depicts natural movement inspired by forces in the real world. • Duration • Easing 15 @mikewolfson
  16. 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. 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. 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. 19. Standard curve Objects quickly accelerate and slowly decelerate between on-screen locations. Use FastOutSlowInInterpolator 19 @mikewolfson
  20. 20. Acceleration curve (“Easing in”) Objects leave the screen at full velocity. They do not decelerate when off-screen. Use FastOutLinearInInterpolator 20 @mikewolfson
  21. 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. 22. Principle 2 Natural Demo 22 @mikewolfson
  23. 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. 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. 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. 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. 27. Automatic animation Layout on right has following attribute: <LinearLayout ... android:animateLayoutChanges="true" > 27 @mikewolfson
  28. 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. 29. Principle 4 Intentional Material in motion guides focus to the right spot at the right time. 29 @mikewolfson
  30. 30. Intentional Single Element One item moves 30 @mikewolfson
  31. 31. Intentional Two Elements Good Two items move together 31 @mikewolfson
  32. 32. Intentional Too many elements Bad Two items move differently 32 @mikewolfson
  33. 33. Intentional Too many elements Really, Really Bad Normal speed 33 @mikewolfson
  34. 34. Intentional Too many elements Demo - slowed down 33% of normal speed 34 @mikewolfson
  35. 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. 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. 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. 38. Review: Motion Principles Material in motion has the following characteristics: • Responsive • Natural • Aware • Intentional 38 @mikewolfson
  39. 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. 40. Review Style 1 Style 2 • Style 3 40 @mikewolfson

×