Material Design: From Concept to Implementation

Material Design: From Concept to Implementation

167f2c9daf3e040134359926747a510b?s=128

Jérémie Laval

October 09, 2014
Tweet

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

  13. None
  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/
  40. None
  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;
 }

  42. None
  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