Material Design implementation in Android

Slide 1

Slide 1 text

Material Design implementation in Android Mix-IT Lyon - 04/17/2015

Slide 2

Slide 2 text

Capitaine Train @Mathieu_Calba +MathieuCalba

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What is Material Design?

Slide 6

Slide 6 text

A coherent cross-platform experience

Slide 7

Slide 7 text

A coherent cross-platform experience A more ﬂexible design system for Android

Slide 8

Slide 8 text

A coherent cross-platform experience A more ﬂexible design system for Android A rational approach to visual, interaction, and motion design

Slide 9

Slide 9 text

3 key principles Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 10

Slide 10 text

3 key principles Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 11

Slide 11 text

3 key principles Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 12

Slide 12 text

3 key principles Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 13

Slide 13 text

Material is the metaphor

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Z= Elevation The base depth of a view Translation Z For the animations of the element +

Slide 17

Slide 17 text

Elevation

Slide 18

Slide 18 text

Elevation API 21 and above You can deﬁne it in layout:   or you can set it in code: float elevation = getContext().getResources(). getDimension(R.dimen.elevation); myImageView.setElevation(elevation);

Slide 19

Slide 19 text

Raised elevation

Slide 20

Slide 20 text

float raisedElevation = getContext().getResources(). getDimension(R.dimen.raised_elevation); ! myImageView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { int action = motionEvent.getActionMasked(); switch (action) { case MotionEvent.ACTION_DOWN: view.animate().setDuration(100). translationZ(raisedElevation); return true; ! case MotionEvent.ACTION_UP: view.animate().setDuration(100). translationZ(0); return true; } return false; } }); Raised elevation API 21 and above - manually

Slide 21

Slide 21 text

In your layout: Raised elevation API 21 and above - StateListAnimator Then declare your StateListAnimator:

Slide 22

Slide 22 text

Outline The shadow is deduced from the view’s Outline. By default, the outline of a view is derived from it’s background. API 21 and above

Slide 23

Slide 23 text

Deﬁne a ViewOutlineProvider: static class OutlineProvider extends ViewOutlineProvider { @Override public void getOutline(View v, Outline outline) { outline.setRoundRect(0, 0, v.getWidth(), v.getHeight(), 8); } } ! ! Associate this Outline to you view: OutlineProvider outline = new OutlineProvider(); view.setOutlineProvider(outline); view.setClipToOutline(true); Outline API 21 and above - Custom

Slide 24

Slide 24 text

Cards “A card is a piece of paper with unique related data that serves as an entry point to more detailed information.”

Slide 25

Slide 25 text

Cards • Layout with round-rect ShapeDrawable background & clipped to outline ! • Elevation of 2 dp for subtle shadows

Slide 26

Slide 26 text

CardView API 7 and above In support lib v7 Real shadows on API 21+ PNG shadows on pre API 21 Add dependency in build.gradle: dependencies { compile ‘com.android.support:cardview-v7:22.0.0' } ! Use in your layouts: ! !

Slide 27

Slide 27 text

Bold, graphic, intentional

Slide 28

Slide 28 text

Primary! +! Accent

Slide 29

Slide 29 text

http://www.materialpalette.com/

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

colorPrimary

Slide 32

Slide 32 text

colorPrimary colorPrimaryDark

Slide 33

Slide 33 text

colorAccent colorPrimary colorPrimaryDark

Slide 34

Slide 34 text

Theme.Material API 21 and above Declare your application theme: <item name="android:colorPrimary"> @color/primary </item> <item name="android:colorAccent"> @color/accent </item> <item name="android:colorPrimaryDark"> @color/primary_dark </item>

Slide 35

Slide 35 text

Theme.AppCompat API 7 and above Add the AppCompat dependency: dependencies { compile ‘com.android.support:appcompat-v7:22.0.0' } ! Declare your application theme: <item name="colorPrimary">@color/primary</item> <item name="colorAccent">@color/accent</item> <item name="colorPrimaryDark">@color/primary_dark</item>

Slide 36

Slide 36 text

Imagery

Slide 37

Slide 37 text

Be immersive

Slide 38

Slide 38 text

Light Vibrant Light Muted Muted Vibrant Dark Muted Dark Vibrant Extract colour from images

Slide 39

Slide 39 text

Add dependency in build.gradle dependencies { compile ‘com.android.support:palette-v7:22.0.0' } ! Generate the Palette from a bitmap, synchronously: Palette p = Palette.generate(bitmap);  or asynchronously: Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors… } } ); Palette API 7 and above

Slide 40

Slide 40 text

Get the Swatches you need: Swatch vibrant = p.getVibrantSwatch(); Swatch darkVibrant = p.getDarkVibrantSwatch(); Swatch lightVibrant = p.getLightVibrantSwatch(); Swatch muted = p.getMutedSwatch(); Swatch darkMuted = p.getDarkMutedSwatch(); Swatch lightMuted = p.getLightMutedSwatch(); Palette

Slide 41

Slide 41 text

getRgb() The RGB value of this Swatch getTitleTextColor() ARGB color for legible ‘title’ text over this Swatch getBodyTextColor() ARGB color for legible ‘body’ text over this Swatch getHsl() The HSL value of this Swatch getPopulation() The relative amount of pixel this colour represent Palette - What’s in a swatch?

Slide 42

Slide 42 text

Reﬁned typography

Slide 43

Slide 43 text

Reﬁned typography

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

android:TextAppearance.Material. API 21 and above

Slide 46

Slide 46 text

TextAppearance.AppCompat. API 7 and above

Slide 47

Slide 47 text

Motion provides meaning

Slide 48

Slide 48 text

Animations

Slide 49

Slide 49 text

Activity transitions API 21 and above 1. Enable in your theme true ! ! ! or in your Activity getWindow().requestFeature(Window. FEATURE_CONTENT_TRANSITIONS);

Slide 50

Slide 50 text

2. Deﬁne your shared elements: ! This is possible from code too: ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE); ! You need to do this in both of your Activities Activity transitions API 21 and above

Slide 51

Slide 51 text

3. Start new Activity ActivityOptions options = ActivityOptions. makeSceneTransitionAnimation( this, mHeaderImageView, VIEW_NAME_HEADER_IMAGE);  startActivity(intent, options.toBundle()); ! We can of course pass multiple views & transition names here. Activity transitions API 21 and above

Slide 52

Slide 52 text

• Touch feedback indication ! • Animate state color change centered on the touch point Ripples

Slide 53

Slide 53 text

Bounded to another drawable     Ripples API 21 and above

Slide 54

Slide 54 text

Bounded to an invisible mask     Ripples API 21 and above

Slide 55

Slide 55 text

Unbounded Ripples API 21 and above

Slide 56

Slide 56 text

Automatic bounded ripple android:foreground="?android:selectableItemBackground" ! ! Automatic unbounded ripple android:foreground="?android: selectableItemBackgroundBorderless" Ripples API 21 and above

Slide 57

Slide 57 text

ViewAnimationUtils. createCircularReveal( viewToReveal, centerX, centerY, startRadius, endRadius). start(); Circular reveal API 21 and above

Slide 58

Slide 58 text

Adaptative design

Slide 59

Slide 59 text

Structure

Slide 60

Slide 60 text

https://play.google.com/store/apps/details?id=com.faizmalkani.keylines Keylines

Slide 61

Slide 61 text

Keylines https://play.google.com/store/apps/details?id=com.faizmalkani.keylines

Slide 62

Slide 62 text

Increments

Slide 63

Slide 63 text

Toolbar

Slide 64

Slide 64 text

Add the Toolbar in your layouts: ! Associate the Toolbar to your Fragment/Activity Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar); setActionBar(toolbar); Toolbar API 21 and above

Slide 65

Slide 65 text

Toolbar API 7 and above Add dependency in build.gradle: dependencies { compile 'com.android.support:appcompat-v7:22.0.0' } ! Add the Toolbar in your layouts: ! Associate the Toolbar to your Fragment/Activity Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar); setSupportActionBar(toolbar);

Slide 66

Slide 66 text

Add dependency in build.gradle: dependencies { compile 'com.android.support:support-v4:22.0.0' } ! Add the DrawerLayout in your layouts: ! ! ! NavigationDrawer API 4 and above

Slide 67

Slide 67 text

Questions?