Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design: From Concept to Implementation

Material Design: From Concept to Implementation

Jérémie Laval

October 09, 2014
Tweet

More Decks by Jérémie Laval

Other Decks in Technology

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