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

9949dfe0542bd0fd32676d63c97a625f?s=128

Mathieu Calba

April 17, 2015
Tweet

Transcript

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

  2. Capitaine Train @Mathieu_Calba +MathieuCalba

  3. None
  4. None
  5. What is Material Design?

  6. A coherent cross-platform experience

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

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

    Android A rational approach to visual, interaction, and motion design
  9. 3 key principles Material is the metaphor Bold, graphic, intentional

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

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

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

    Motion provides meaning
  13. Material is the metaphor

  14. None
  15. None
  16. Z= Elevation The base depth of a view Translation Z

    For the animations of the element +
  17. Elevation

  18. Elevation API 21 and above You can define it in

    layout: <ImageView … android:elevation="@dimen/elevation" />
 or you can set it in code: float elevation = getContext().getResources(). getDimension(R.dimen.elevation); myImageView.setElevation(elevation);
  19. Raised elevation

  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
  21. In your layout: <ImageView … android:elevation="2dp" android:stateListAnimator="@anim/my_state_list_animator" /> Raised elevation

    API 21 and above - StateListAnimator Then declare your StateListAnimator: <selector> <item android:state_pressed="true" android:state_enabled="true"> <objectAnimator android:propertyName="translationZ" android:valueTo="6dp" android:valueType="floatType" /> </item> <item> <objectAnimator android:propertyName="translationZ" android:valueTo="0" android:valueType="floatType" /> </item> </selector>
  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
  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
  24. Cards “A card is a piece of paper with unique

    related data that serves as an entry point to more detailed information.”
  25. Cards • Layout with round-rect ShapeDrawable background & clipped to

    outline ! • Elevation of 2 dp for subtle shadows
  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.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" > ! <!-- Your Card content --> ! </android.support.v7.widget.CardView>
  27. Bold, graphic, intentional

  28. Primary! +! Accent

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

  30. None
  31. colorPrimary

  32. colorPrimary colorPrimaryDark

  33. colorAccent colorPrimary colorPrimaryDark

  34. Theme.Material API 21 and above Declare your application theme: <style

    name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary"> @color/primary </item> <item name="android:colorAccent"> @color/accent </item> <item name="android:colorPrimaryDark"> @color/primary_dark </item> </style>
  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: <style name="AppTheme" parent="android:Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorAccent">@color/accent</item> <item name="colorPrimaryDark">@color/primary_dark</item> </style>
  36. Imagery

  37. Be immersive

  38. Light Vibrant Light Muted Muted Vibrant Dark Muted Dark Vibrant

    Extract colour from images
  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
  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
  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?
  42. Refined typography

  43. Refined typography

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

  46. TextAppearance.AppCompat. API 7 and above

  47. Motion provides meaning

  48. Animations

  49. Activity transitions API 21 and above 1. Enable in your

    theme <item name="android:windowContentTransitions">true</item> ! ! ! or in your Activity getWindow().requestFeature(Window. FEATURE_CONTENT_TRANSITIONS);
  50. 2. Define your shared elements: <ImageView 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
  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
  52. • Touch feedback indication ! • Animate state color change

    centered on the touch point Ripples
  53. Bounded to another drawable <ripple android:color="?android:colorControlHighlight">
 <item> <shape android:shape="rectangle"> <solid

    android:color="@color/purple" /> </shape> </item>
 </ripple> Ripples API 21 and above
  54. Bounded 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> Ripples API 21 and above
  55. Unbounded <ripple android:color="?android:colorControlHighlight" /> Ripples API 21 and above

  56. Automatic bounded ripple android:foreground="?android:selectableItemBackground" ! ! Automatic unbounded ripple android:foreground="?android:

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

    API 21 and above
  58. Adaptative design

  59. Structure

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

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

  62. Increments

  63. Toolbar

  64. Add the Toolbar in your layouts: <Toolbar 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
  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.support.v7.widget.Toolbar 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);
  66. Add dependency in build.gradle: dependencies { compile 'com.android.support:support-v4:22.0.0' } !

    Add the DrawerLayout in your layouts: <android.support.v4.widget.DrawerLayout android:layout_width="match_parent" android:layout_height="match_parent"> ! <!-- The main content view --> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" /> ! <!-- The navigation drawer --> <ListView android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="left" /> ! </android.support.v4.widget.DrawerLayout> NavigationDrawer API 4 and above
  67. Questions?