Material Design: From Concept to Implementation

Videos:
- Part 1: https://www.youtube.com/watch?v=A1WKe08uxd4&list=FLoJhWFGTF2YY_eoXKSdiFmQ&index=2
- Part 2: https://www.youtube.com/watch?v=_q9lorDZn0Y&list=FLoJhWFGTF2YY_eoXKSdiFmQ&index=1

Given at Xamarin Evolve 2014

Transcript

1. Material Design from Concept to Implementation Xamarin Android Fanboys @jeremie_laval | @JamesMontemagno Jérémie Laval | James Montemagno
2. Developers that adopt Material Design now will be leaps and bounds ahead of the competition when Android L releases. Andy Chief Android Mascot
3. Material Design Material is a metaphor Bold, graphic, intentional Motion provides meaning
4. Demo
5. GUIDELINES – DO NOT USE SLIDE Material Theme
6. Material Theme ▪ Theme.Material ▪ Theme.Material.Light ▪ Theme.Material.Light.DarkActionBar Beautiful new styles
7. GUIDELINES – DO NOT USE SLIDE
8. Theming Your App ▪ Three Colors ▪ Primary Dark ▪ Primary (Brand Color) ▪ Accent Color Easier than ever
9. UI Color Palette Primary and Accent Colors
10. Theming Your App New attributes <style name="AppTheme" parent="android:Theme.Material.Light">
 <!-- Main theme colors -->
 <!-- your app's branding color (for the app bar) -->
 <item name="android:colorPrimary">@color/xam_blue</item>
 <!-- darker variant of colorPrimary -->
 <item name="android:colorPrimaryDark">@color/xam_dark_blue</item>
 <!-- theme UI controls like checkboxes and text fields -->
 <item name="android:colorAccent">@color/xam_purple</item>
 </style>

11. GUIDELINES – DO NOT USE SLIDE
12. Bring Your UI to Life Mixing images with color
14. Palette ▪ Vibrant ▪ Vibrant dark ▪ Vibrant light ▪ Muted ▪ Muted dark ▪ Muted light Generate Color Palette Automatically https://www.nuget.org/packages/Xamarin.Android.Support.v7.Palette/
15. Demo
16. Layout & Typography
17. Print Design
18. Baseline Grid
19. Roboto
20. Typographic Scale ?android/ TextAppearance.Material.*
21. Keylines
22. Demo
23. GUIDELINES – DO NOT USE SLIDE Paper Craft
24. Paper Craft
25. Shadow Casting
26. Seams
27. Steps
28. Demo
29. End of Part I Xamarin Android Fanboys @jeremie_laval | @JamesMontemagno Jérémie Laval | James Montemagno
30. Material Design from Concept to Implementation Xamarin Android Fanboys @jeremie_laval | @JamesMontemagno Jérémie Laval | James Montemagno
31. Material Design Material is a metaphor Bold, graphic, intentional Motion provides meaning
32. GUIDELINES – DO NOT USE SLIDE Motion
33. Touch Feedback Ripple Ink Response Radial Actions
34. Demo
35. Transitions Activity Transitions Circle Reveal Curved Motion
36. Demo
37. GUIDELINES – DO NOT USE SLIDE
38. Card View
39. Theming Your App Frame View <android.support.v7.widget.CardView
 card:cardCornerRadius="2dp"
 card:cardBackgroundColor="#f9f9f9"
 … /> https://www.nuget.org/packages/Xamarin.Android.Support.v7.CardView/
41. public override View GetView (int position, View convertView, ViewGroup parent)
 {
 MyViewHolder holder;
 var view = convertView;
 if (view != null)
 holder = view.Tag as MyViewHolder;
 if (holder == null) {
 holder = new MyViewHolder ();
 view = activity.LayoutInflater.Inflate (Resource.Layout.OptimizedItem, null);
 holder.Name = view.FindViewById<TextView> (Resource.Id.textView1);
 holder.Description = view.FindViewById<TextView> (Resource.Id.textView2);
 holder.Image = view.FindViewById<ImageView> (Resource.Id.imageView);
 view.Tag = holder;
 }
 holder.Name.Text = Names [position];
 holder.Description.Text = Descriptions [position];
 holder.Image.SetImageResource (Names [position].ToLower().Contains ("xamarin") ?
 Resource.Drawable.hexagongreen :
 Resource.Drawable.hexagopurple);
 return view;
 }

43. RecyclerView Super ListView ▪ Auto ViewHolder Recycling ▪ Built-in Animations https://www.nuget.org/packages/Xamarin.Android.Support.v7.RecyclerView/
44. Compatibility ▪ Material Theme - Only available in Android L • Define theme that inherits from older theme (like Holo) in res/ values/styles.xml • Set them as your app’s theme in manifest file New APIs ▪ Layouts - Do not use new XML attributes from Android L in pervious versions. - Provide alternative layouts • Android L Layouts: res/layout-v21 • Alternative: res/layout • Modify the style in res/values-v21 for new APIs
45. Compatibility ▪ Only available in Android L - Activity Transition - Touch feedback - Reveal - Path-based animations ▪ Wrap code in version check Animations
46. Compatibility ▪ Recycler View ▪ Palette - Both are available back to v7 - Exposed via support library UI Widgets ▪ CardView - Available back to v7 - Exposed as Support Library - Limitations (pre-L) - Uses programatic shadows - Does not clip children that intersect with rounded corners
47. Distributing Material Design ⏰ Not yet
48. google.com/design/spec
49. The End! Xamarin Android Fanboys @jeremie_laval | @JamesMontemagno Jérémie Laval | James Montemagno