material design demytified - ran nachmany, google
TRANSCRIPT
![Page 1: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/1.jpg)
• 10 - 11 Material Design • 11 - 12 Tools for the (mobile) web • 12 - 13 Angular.js • 13 - 14 Lunch! • 14 - 16:30 Cloud Platform intro +
1:1 mentoring
![Page 2: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/2.jpg)
Material Design
+Ran Nachmany
![Page 3: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/3.jpg)
M A T E R I A L D E S I G N
![Page 4: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/4.jpg)
A coherent cross-platform experience
![Page 5: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/5.jpg)
A coherent cross-platform experience
A more flexible design system for Android
![Page 6: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/6.jpg)
A coherent cross-platform experience
A more flexible design system for Android
A rational approach to visual, interaction, and motion design
![Page 7: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/7.jpg)
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
![Page 8: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/8.jpg)
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
![Page 9: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/9.jpg)
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
![Page 10: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/10.jpg)
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
![Page 11: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/11.jpg)
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
![Page 12: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/12.jpg)
Tangible surfaces1
![Page 13: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/13.jpg)
![Page 14: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/14.jpg)
Constrained depth
![Page 15: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/15.jpg)
Interaction cues (scrolling and pinning)
![Page 16: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/16.jpg)
Surface reaction
![Page 17: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/17.jpg)
Z-eam me up, Scotty
Elevation The base Z-depth of a View ! + !Translation Z The transient delta Z=
![Page 18: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/18.jpg)
<ImageView ... android:elevation="8dp" />
view.animate().translationZ(…).start();
Z-eam me up, Scotty
![Page 19: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/19.jpg)
<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
![Page 20: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/20.jpg)
anim/my_state_list_animator.xml
</selector>
<selector>
StateListAnimator
![Page 21: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/21.jpg)
<item android:state_pressed="true" android:state_enabled="true"> <objectAnimator android:propertyName="translationZ" android:valueTo="8dp" android:valueType="floatType"/> </item>
</selector>
<selector>
StateListAnimatoranim/my_state_list_animator.xml
![Page 22: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/22.jpg)
<item> <objectAnimator android:propertyName="translationZ" android:valueTo="0" android:valueType="floatType"/> </item>
</selector>
<selector>
StateListAnimatoranim/my_state_list_animator.xml
![Page 23: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/23.jpg)
OutlineA 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>
![Page 24: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/24.jpg)
OutlineBut you can do much more with Outline. Say you want an avatar clipped within a circle…
static class OvalOutlineProvider extends ViewOutlineProvider { @Override public void getOutline(View view, Outline outline) { outline.setOval(0, 0, view.getWidth(), view.getHeight()); } } !
view.setOutlineProvider(new OvalOutlineProvider());
![Page 25: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/25.jpg)
A card is a piece of paper that contains a unique data set of related, heterogeneous information.
“
”
Cards
![Page 26: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/26.jpg)
A card is a piece of paper that contains a unique data set of related, heterogeneous information.
“
”
Cards
outlineelevation
![Page 27: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/27.jpg)
Cards
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content"> !
<!-- Your card content --> !
</android.support.v7.widget.CardView>
![Page 28: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/28.jpg)
Print-like design2
![Page 29: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/29.jpg)
![Page 30: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/30.jpg)
![Page 31: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/31.jpg)
![Page 32: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/32.jpg)
Front View Side View
![Page 33: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/33.jpg)
YES NO
![Page 34: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/34.jpg)
Refined typography
![Page 35: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/35.jpg)
Refined typography
![Page 36: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/36.jpg)
Typographic scale
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
![Page 37: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/37.jpg)
android:TextAppearance.Material.
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
![Page 38: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/38.jpg)
TextAppearance.AppCompat.
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
![Page 39: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/39.jpg)
Bold color
![Page 40: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/40.jpg)
Primary + Accent
![Page 41: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/41.jpg)
colorPrimaryDark
colorPrimary colorAccent
![Page 42: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/42.jpg)
Theme.Material
<style name=“MyAwesomeTheme" parent=“android:Theme.Material.Light.DarkActionBar”> !
<item name="android:colorPrimary">@color/blue</item> <item name=“android:colorPrimaryDark">@color/darker_blue</item> <item name=“android:colorAccent">@color/teal</item> !
</resources>
API v21 and above
![Page 43: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/43.jpg)
Theme.AppCompat
<style name=“MyAwesomeTheme" parent=“Theme.AppCompat.Light.DarkActionBar”> !
<item name="colorPrimary">@color/blue</item> <item name="colorPrimaryDark">@color/darker_blue</item> <item name="colorAccent">@color/teal</item> !
</resources>
API v7 and above
![Page 44: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/44.jpg)
Content can provide color
![Page 45: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/45.jpg)
Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted
![Page 46: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/46.jpg)
Palette p = Palette.generate(bitmap);
P
SwatchSwatchSwatch
Swatch vibrant = p.getVibrantSwatch(); Swatch darkVibrant = p.getDarkVibrantSwatch(); Swatch lightVibrant = p.getLightVibrantSwatch();
![Page 47: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/47.jpg)
What’s in a Swatch?getRgb()The RGB value of this Swatch (aka the colour)
getPopulation()The relative amount of pixels this color represents
getHsl()The HSL value of this Swatch
getTitleTextColor()ARGB color for legible ‘title’ text over this Swatch
getBodyTextColor()ARGB color for legible ‘body’ text over this Swatch
TitleBody
![Page 48: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/48.jpg)
3 Meaningful Motion
![Page 49: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/49.jpg)
Activity transitions1. Enable the feature
<style name="MyTheme" parent=“android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowContentTransitions">true</item> </style>
requestWindowFeature(Window.FEATURE_CONTENT_TRANSITIONS);
From your theme
From your Activity
![Page 50: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/50.jpg)
<ImageView ... android:transitionName="@string/transition_album_cover" />
layout/album_details.xml
2. Specify the shared element(s)Activity transitions
![Page 51: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/51.jpg)
Intent intent = ... // setup Intent as usual !
String transitionName = getString(R.string.transition_album_cover); !
ActivityOptionsCompat opts = ActivityOptionsCompat .makeSceneTransitionAnimation( activity, // Our starting Activity albumCoverView, // The view which starts the transition transitionName // The transitionName of the view we’re transitioning to ); !
// Now start the Activity, using our options bundle ActivityCompat.startActivity(activity, intent, opts.toBundle());
3. Start the Activity (transition)Activity transitions
![Page 52: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/52.jpg)
Asymmetric motion
![Page 53: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/53.jpg)
Users initiate change
![Page 54: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/54.jpg)
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+)
![Page 55: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/55.jpg)
RippleDrawable
Bound to an invisible mask
<ripple android:color=“?android:colorControlHighlight”> <item android:id=“@android:id/mask"> <shape android:shape="rectangle"> <solid android:color=“@color/white“ /> </shape> </item> </ripple>
New (v21+)
![Page 56: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/56.jpg)
RippleDrawableNew (v21+)
<ripple android:color=“?android/colorControlHighlight” />
Unbounded
![Page 57: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/57.jpg)
Ripples
android:selectableItemBackgroundBounded ripple
android:selectableItemBackgroundBorderlessUnbounded ripple New (v21+)
![Page 58: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/58.jpg)
Circular Reveal
![Page 59: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/59.jpg)
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();
![Page 60: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/60.jpg)
Fast, precise motion
![Page 61: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/61.jpg)
Adaptive design4
![Page 62: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/62.jpg)
![Page 63: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/63.jpg)
Keylines
![Page 64: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/64.jpg)
Increments
64dp
56dp
![Page 65: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/65.jpg)
Think in blocks
![Page 66: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/66.jpg)
Toolbar
![Page 67: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/67.jpg)
Toolbar
![Page 68: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/68.jpg)
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+)
![Page 69: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/69.jpg)
Toolbar (AppCompat)
<android.support.v7.widget.Toolbar android:id=”@+id/my_toolbar” android:layout_height=”?actionBarSize” android:layout_width=”match_parent” android:background=”?colorPrimary” />
Place it within your layouts
Toolbar toolbar = findViewById(R.id.my_toolbar); setSupportActionBar(toolbar);
Then in your ActionBarActivity/Fragment
New (v7+)
![Page 70: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/70.jpg)
M A T E R I A L D E S I G N
![Page 71: Material Design Demytified - Ran Nachmany, Google](https://reader034.vdocuments.site/reader034/viewer/2022042715/55a20bbe1a28abbd4e8b4654/html5/thumbnails/71.jpg)
Q?+Ran Nachmany @shed2k