• 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