mastering material motion

Mastering Material Motionby Mike WolfsonDroidcon NYC 2016

Download Demo App Now:http://goo.gl/pq8VdA

1 @mikewolfson

Material Design2014 - Material Design Guidelineshttps://material.google.com

2016 - Motion Guidelineshttps://material.google.com/motion

2 @mikewolfson

Material Design Principles1. Material is the metaphor2. Bold, graphic, intentional3. Motion Provides Meaning

3 @mikewolfson

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

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

5 @mikewolfson

Motion Principles

Material in motion has the following characteristics:

• Responsive• Natural• Aware• Intentional

6 @mikewolfson

Principle 1ResponsiveMotion respects and reinforces the user as the prime mover.

• Touch Feedback• Elevation

7 @mikewolfson

How to: Default RippleselectableItemBackground<TextView ... android:background="?attr/selectableItemBackground" />

Ripple without Border?attr/selectableItemBackgroundBorderless

8 @mikewolfson

How to: Custom RippleAPI 21+ can use RippleDrawable

1. Selector - support older OSres\drawable\bg_foo.xml

2. Rippleres\drawable-v21\bg_foo.xml

3. Apply to View:

<TextView ... android:background="@drawable/bg_selector"/>

9 @mikewolfson

Custom Ripple XML<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> 

 <color android:color="@android:color/white"/> <item android:id="@android:id/mask"/>  <item android:drawable="@color/grey_300"/></ripple>

10 @mikewolfson

Elevation: stateListAnimator1. Create Folder

res\animator2. Create StateListAnimator

res\animator\raise.xml3. Apply to View

<TextView ... `android:stateListAnimator="@animator/raise"`/>

https://blog.stylingandroid.com/statelistanimator/

11 @mikewolfson

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

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

13 @mikewolfson

Principle 1ResponsiveDemoUser generates energy in the form of ripple, and the material raising to the touch

14 @mikewolfson

Principle 2NaturalInspired by Reality

Material depicts natural movement inspired by forces in the real world.

• Duration• Easing

15 @mikewolfson

DurationBest Practices• Keep it Fast (on all screens)• Duration specific to screen size• Natural Easing Curves• Don't do it

16 @mikewolfson

DurationMultiple screen sizesDon't use single duration for all animations

• Tablet 130% 390ms

• Normal 100% 300ms

• Wearable 70% 210ms

17 @mikewolfson

Easing CurvesMotion Duration and Easing Guidelineshttps://material.google.com/motion/duration-easing.html

Android Animation Interpolatorshttps://developer.android.com/reference/android/view/animation/Interpolator.html

Chet Haase "Interpolator Playground"https://github.com/google/android-ui-toolkit-demos/tree/master/Animations/InterpolatorPlayground18 @mikewolfson

Standard curve

Objects quickly accelerate and slowly decelerate between on-screen locations.

Use FastOutSlowInInterpolator

19 @mikewolfson

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

Use FastOutLinearInInterpolator

20 @mikewolfson

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

Principle 2NaturalDemo

22 @mikewolfson

Bad - Don't specify InterpolatorDefault is LinearexitBad.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

Good - Use correct InterpolatorFor exit animationexitGood.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

Good - Use correct InterpolatorFor enter animationenterGood.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

Principle 3AwareMaterial 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

Automatic animation

Layout on right has following attribute:

<LinearLayout ... android:animateLayoutChanges="true" >

27 @mikewolfson

RecyclerViewUse adapter methods

- notifyItemInserted(2)

- notifyItemRangeChanged(2, 6)

- notifyItemRemoved(2)

- https://developer.android.com/reference/android/support/v7/util/DiffUtil.html

28 @mikewolfson

Principle 4IntentionalMaterial in motion guides focus to the right spot at the right time.

29 @mikewolfson

IntentionalSingle ElementOne item moves

30 @mikewolfson

IntentionalTwo ElementsGoodTwo items move together

31 @mikewolfson

IntentionalToo many elementsBadTwo items move differently

32 @mikewolfson

IntentionalToo many elementsReally, Really BadNormal speed

33 @mikewolfson

IntentionalToo many elementsDemo - slowed down33% of normal speed

34 @mikewolfson

How to: SharedElementTransition1. Enable transitions in base styles.xml<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  <item name="android:windowContentTransitions">true</item> ...</style>

35 @mikewolfson

How to: SharedElementTransition2. 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

How to: SharedElementTransition3. Call transition in Javafinal 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

Review: Motion PrinciplesMaterial in motion has the following characteristics:

• Responsive• Natural• Aware• Intentional

38 @mikewolfson

Thank YouResourceshttp://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

ReviewStyle 1Style 2• Style 3

40 @mikewolfson

mastering material motion

Mobile