Beyond Big Data : Mastering Data in Motion For Positive Business Impact
Mastering Material Motion
-
Upload
mike-wolfson -
Category
Mobile
-
view
209 -
download
0
Transcript of 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"> <!-- 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
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<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <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