Material Design Demytified - Ran Nachmany, Google
-
Upload
codemotion-tel-aviv -
Category
Technology
-
view
607 -
download
5
Transcript of Material Design Demytified - Ran Nachmany, Google
• 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
Material Design
+Ran Nachmany
M A T E R I A L D E S I G N
A coherent cross-platform experience
A coherent cross-platform experience
A more flexible design system for Android
A coherent cross-platform experience
A more flexible design system for Android
A rational approach to visual, interaction, and motion design
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
Tangible surfaces
Print-like design
Meaningful motion
Adaptive design
Tangible surfaces1
Constrained depth
Interaction cues (scrolling and pinning)
Surface reaction
Z-eam me up, Scotty
Elevation The base Z-depth of a View ! + !Translation Z The transient delta Z=
<ImageView ... android:elevation="8dp" />
view.animate().translationZ(…).start();
Z-eam me up, Scotty
<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
anim/my_state_list_animator.xml
</selector>
<selector>
StateListAnimator
<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
<item> <objectAnimator android:propertyName="translationZ" android:valueTo="0" android:valueType="floatType"/> </item>
</selector>
<selector>
StateListAnimatoranim/my_state_list_animator.xml
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>
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());
A card is a piece of paper that contains a unique data set of related, heterogeneous information.
“
”
Cards
A card is a piece of paper that contains a unique data set of related, heterogeneous information.
“
”
Cards
outlineelevation
Cards
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content"> !
<!-- Your card content --> !
</android.support.v7.widget.CardView>
Print-like design2
Front View Side View
YES NO
Refined typography
Refined typography
Typographic scale
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
android:TextAppearance.Material.
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
TextAppearance.AppCompat.
Display 4 !
Display 3 !
Display 2 !
Display 1 !Headline !Title !Subhead !Body 2 !Body 1 !Caption !Menu !Button
Bold color
Primary + Accent
colorPrimaryDark
colorPrimary colorAccent
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
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
Content can provide color
Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted
Palette p = Palette.generate(bitmap);
P
SwatchSwatchSwatch
Swatch vibrant = p.getVibrantSwatch(); Swatch darkVibrant = p.getDarkVibrantSwatch(); Swatch lightVibrant = p.getLightVibrantSwatch();
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
3 Meaningful Motion
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
<ImageView ... android:transitionName="@string/transition_album_cover" />
layout/album_details.xml
2. Specify the shared element(s)Activity transitions
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
Asymmetric motion
Users initiate change
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+)
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+)
RippleDrawableNew (v21+)
<ripple android:color=“?android/colorControlHighlight” />
Unbounded
Ripples
android:selectableItemBackgroundBounded ripple
android:selectableItemBackgroundBorderlessUnbounded ripple New (v21+)
Circular Reveal
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();
Fast, precise motion
Adaptive design4
Keylines
Increments
64dp
56dp
Think in blocks
Toolbar
Toolbar
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+)
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+)
M A T E R I A L D E S I G N
Q?+Ran Nachmany @shed2k