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
2. Capitaine Train @Mathieu_Calba +MathieuCalba
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
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/
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
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?