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 full-size slide

  2. Capitaine Train
    @Mathieu_Calba
    +MathieuCalba

    View full-size slide

  3. What is Material Design?

    View full-size slide

  4. A coherent cross-platform experience

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Material is the metaphor

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. Raised elevation

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. Bold, graphic, intentional

    View full-size slide

  23. Primary!
    +!
    Accent

    View full-size slide

  24. http://www.materialpalette.com/

    View full-size slide

  25. colorPrimary

    View full-size slide

  26. colorPrimary
    colorPrimaryDark

    View full-size slide

  27. colorAccent
    colorPrimary
    colorPrimaryDark

    View full-size slide

  28. Theme.Material
    API 21 and above
    Declare your application theme:
    parent="android:Theme.Material.Light.DarkActionBar">

    @color/primary


    @color/accent


    @color/primary_dark


    View full-size slide

  29. 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 full-size slide

  30. Be immersive

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. Refined
    typography

    View full-size slide

  36. Refined
    typography

    View full-size slide

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

    View full-size slide

  38. TextAppearance.AppCompat.
    API 7 and above

    View full-size slide

  39. Motion provides meaning

    View full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

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

    View full-size slide

  44. Bounded to another drawable







    Ripples
    API 21 and above

    View full-size slide

  45. Bounded to an invisible mask







    Ripples
    API 21 and above

    View full-size slide

  46. Unbounded

    Ripples
    API 21 and above

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Adaptative design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide