Material Design implementation in Android

In june 2014, Google introduced a new design language for its products called Material Design. Material Design introduced lot of new visuel elements like Ripples, Floating action buttons, etc. This deck presents what Material Design is, what are the API are available to us to implement it on Android with retro compatibility in mind.

French video: http://www.infoq.com/fr/presentations/material-design-android

Transcript

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

   View Slide

2. Capitaine Train
   @Mathieu_Calba
   +MathieuCalba
   

   View Slide

3. View Slide

4. View Slide

5. What is Material Design?
   

   View Slide

6. A coherent cross-platform experience
   

   View Slide

7. A coherent cross-platform experience
   A more flexible design system for
   Android
   

   View Slide

8. A coherent cross-platform experience
   A more flexible design system for
   Android
   A rational approach to visual,
   interaction, and motion design
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Material is the metaphor
    

    View Slide

14. View Slide

15. View Slide

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

    View Slide

17. Elevation
    

    View Slide

18. Elevation
    API 21 and above
    You can define it in layout:
    …
    android:elevation="@dimen/elevation" />

    or you can set it in code:
    float elevation = getContext().getResources().
    getDimension(R.dimen.elevation);
    myImageView.setElevation(elevation);
    

    View Slide

19. Raised elevation
    

    View Slide

20. 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
    

    View Slide

21. In your layout:
    …
    android:elevation="2dp"
    android:stateListAnimator="@anim/my_state_list_animator" />
    Raised elevation
    API 21 and above
    - StateListAnimator
    Then declare your StateListAnimator:
    
    android:state_enabled="true">
    android:valueTo="6dp"
    android:valueType="floatType" />
    
    
    android:valueTo="0"
    android:valueType="floatType" />
    
    
    

    View Slide

22. 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
    

    View Slide

23. Define 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
    

    View Slide

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

    View Slide

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

    View Slide

26. 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:
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    !
    
    !
    
    

    View Slide

27. Bold, graphic, intentional
    

    View Slide

28. Primary!
    +!
    Accent
    

    View Slide

29. http://www.materialpalette.com/
    

    View Slide

30. View Slide

31. colorPrimary
    

    View Slide

32. colorPrimary
    colorPrimaryDark
    

    View Slide

33. colorAccent
    colorPrimary
    colorPrimaryDark
    

    View Slide

34. Theme.Material
    API 21 and above
    Declare your application theme:
    parent="android:Theme.Material.Light.DarkActionBar">
    
    @color/primary
    
    
    @color/accent
    
    
    @color/primary_dark
    
    
    

    View Slide

35. Theme.AppCompat
    API 7 and above
    Add the AppCompat dependency:
    dependencies {
    compile ‘com.android.support:appcompat-v7:22.0.0'
    }
    !
    Declare your application theme:
    parent="android:Theme.AppCompat.Light.DarkActionBar">
    @color/primary
    @color/accent
    @color/primary_dark
    
    

    View Slide

36. Imagery
    

    View Slide

37. Be immersive
    

    View Slide

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

    View Slide

39. 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
    

    View Slide

40. 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
    

    View Slide

41. 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?
    

    View Slide

42. Refined
    typography
    

    View Slide

43. Refined
    typography
    

    View Slide

44. View Slide

45. android:TextAppearance.Material.
    API 21 and above
    

    View Slide

46. TextAppearance.AppCompat.
    API 7 and above
    

    View Slide

47. Motion provides meaning
    

    View Slide

48. Animations
    

    View Slide

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

    View Slide

50. 2. Define your shared elements:
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:id="@+id/robotoView"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/magic"
    android:transitionName="@transition/my_transition"/>
    !
    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
    

    View Slide

51. 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
    

    View Slide

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

    View Slide

53. Bounded to another drawable
    

    
    
    
    
    

    
    Ripples
    API 21 and above
    

    View Slide

54. Bounded to an invisible mask
    

    
    
    
    
    

    
    Ripples
    API 21 and above
    

    View Slide

55. Unbounded
    
    Ripples
    API 21 and above
    

    View Slide

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

    View Slide

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

    View Slide

58. Adaptative design
    

    View Slide

59. Structure
    

    View Slide

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

    View Slide

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

    View Slide

62. Increments
    

    View Slide

63. Toolbar
    

    View Slide

64. Add the Toolbar in your layouts:
    android:id="@+id/my_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?android/actionBarSize"
    android:background="?android/colorPrimary"/>
    !
    Associate the Toolbar to your Fragment/Activity
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setActionBar(toolbar);
    Toolbar
    API 21 and above
    

    View Slide

65. 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:
    android:id="@+id/my_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?actionBarSize"
    android:background="?colorPrimary"/>
    !
    Associate the Toolbar to your Fragment/Activity
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(toolbar);
    

    View Slide

66. Add dependency in build.gradle:
    dependencies {
    compile 'com.android.support:support-v4:22.0.0'
    }
    !
    Add the DrawerLayout in your layouts:
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    !
    
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    !
    
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="left" />
    !
    
    NavigationDrawer
    API 4 and above
    

    View Slide

67. Questions?
    

    View Slide