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
   

   View Slide

2. Developers that adopt Material Design now
   will be leaps and bounds ahead of the
   competition when Android L releases.
   Andy
   Chief Android Mascot
   

   View Slide

3. Material Design
   Material is a metaphor
   Bold, graphic, intentional Motion provides meaning
   

   View Slide

4. Demo
   

   View Slide

5. GUIDELINES – DO NOT USE SLIDE
   Material Theme
   

   View Slide

6. Material Theme
   ■
   Theme.Material
   ■
   Theme.Material.Light
   ■
   Theme.Material.Light.DarkActionBar
   Beautiful new styles
   

   View Slide

7. GUIDELINES – DO NOT USE SLIDE
   

   View Slide

8. Theming Your App
   ■
   Three Colors
   ■
   Primary Dark
   ■
   Primary (Brand Color)
   ■
   Accent Color
   Easier than ever
   

   View Slide

9. UI Color Palette
   Primary and Accent Colors
   

   View Slide

10. Theming Your App
    New attributes
    
<br/><!-- Main theme colors -->
<br/><!-- your app's branding color (for the app bar) -->
<br/><item name="android:colorPrimary">@color/xam_blue</item>
<br/><!-- darker variant of colorPrimary -->
<br/><item name="android:colorPrimaryDark">@color/xam_dark_blue</item>
<br/><!-- theme UI controls like checkboxes and text fields -->
<br/><item name="android:colorAccent">@color/xam_purple</item>
<br/>

    

    View Slide

11. GUIDELINES – DO NOT USE SLIDE
    

    View Slide

12. Bring Your UI to Life
    Mixing images with color
    

    View Slide

13. View Slide

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/
    

    View Slide

15. Demo
    

    View Slide

16. Layout & Typography
    

    View Slide

17. Print Design
    

    View Slide

18. Baseline Grid
    

    View Slide

19. Roboto
    

    View Slide

20. Typographic Scale
    ?android/
    TextAppearance.Material.*
    

    View Slide

21. Keylines
    

    View Slide

22. Demo
    

    View Slide

23. GUIDELINES – DO NOT USE SLIDE
    Paper Craft
    

    View Slide

24. Paper Craft
    

    View Slide

25. Shadow Casting
    

    View Slide

26. Seams
    

    View Slide

27. Steps
    

    View Slide

28. Demo
    

    View Slide

29. End of Part I
    Xamarin Android Fanboys
    @jeremie_laval | @JamesMontemagno
    Jérémie Laval | James Montemagno
    

    View Slide

30. Material Design from
    Concept to
    Implementation
    Xamarin Android Fanboys
    @jeremie_laval | @JamesMontemagno
    Jérémie Laval | James Montemagno
    

    View Slide

31. Material Design
    Material is a metaphor
    Bold, graphic, intentional Motion provides meaning
    

    View Slide

32. GUIDELINES – DO NOT USE SLIDE
    Motion
    

    View Slide

33. Touch Feedback
    Ripple Ink Response Radial Actions
    

    View Slide

34. Demo
    

    View Slide

35. Transitions
    Activity Transitions Circle Reveal Curved Motion
    

    View Slide

36. Demo
    

    View Slide

37. GUIDELINES – DO NOT USE SLIDE
    

    View Slide

38. Card View
    

    View Slide

39. Theming Your App
    Frame View
    card:cardCornerRadius="2dp"

    card:cardBackgroundColor="#f9f9f9"

    … />
    https://www.nuget.org/packages/Xamarin.Android.Support.v7.CardView/
    

    View Slide

40. View Slide

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 (Resource.Id.textView1);

    holder.Description = view.FindViewById (Resource.Id.textView2);

    holder.Image = view.FindViewById (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;

    }

    

    View Slide

42. View Slide

43. RecyclerView
    Super ListView
    ■
    Auto ViewHolder Recycling
    ■
    Built-in Animations
    https://www.nuget.org/packages/Xamarin.Android.Support.v7.RecyclerView/
    

    View Slide

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
    

    View Slide

45. Compatibility
    ■
    Only available in Android L
    - Activity Transition
    - Touch feedback
    - Reveal
    - Path-based animations
    ■
    Wrap code in version check
    Animations
    

    View Slide

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
    

    View Slide

47. Distributing Material Design
    ⏰ Not yet
    

    View Slide

48. google.com/design/spec
    

    View Slide

49. The End!
    Xamarin Android Fanboys
    @jeremie_laval | @JamesMontemagno
    Jérémie Laval | James Montemagno
    

    View Slide