Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design implementation in Android

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

Mathieu Calba

April 17, 2015
Tweet

More Decks by Mathieu Calba

Other Decks in Programming

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