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 full-size 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 full-size slide

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

    View full-size slide

  4. GUIDELINES – DO NOT USE SLIDE
    Material Theme

    View full-size slide

  5. Material Theme

    Theme.Material

    Theme.Material.Light

    Theme.Material.Light.DarkActionBar
    Beautiful new styles

    View full-size slide

  6. GUIDELINES – DO NOT USE SLIDE

    View full-size slide

  7. Theming Your App

    Three Colors

    Primary Dark

    Primary (Brand Color)

    Accent Color
    Easier than ever

    View full-size slide

  8. UI Color Palette
    Primary and Accent Colors

    View full-size slide

  9. 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 full-size slide

  10. GUIDELINES – DO NOT USE SLIDE

    View full-size slide

  11. Bring Your UI to Life
    Mixing images with color

    View full-size slide

  12. 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 full-size slide

  13. Layout & Typography

    View full-size slide

  14. Print Design

    View full-size slide

  15. Baseline Grid

    View full-size slide

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

    View full-size slide

  17. GUIDELINES – DO NOT USE SLIDE
    Paper Craft

    View full-size slide

  18. Shadow Casting

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. GUIDELINES – DO NOT USE SLIDE
    Motion

    View full-size slide

  23. Touch Feedback
    Ripple Ink Response Radial Actions

    View full-size slide

  24. Transitions
    Activity Transitions Circle Reveal Curved Motion

    View full-size slide

  25. GUIDELINES – DO NOT USE SLIDE

    View full-size slide

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

    card:cardBackgroundColor="#f9f9f9"

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

    View full-size slide

  27. 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 full-size slide

  28. RecyclerView
    Super ListView

    Auto ViewHolder Recycling

    Built-in Animations
    https://www.nuget.org/packages/Xamarin.Android.Support.v7.RecyclerView/

    View full-size slide

  29. 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 full-size slide

  30. Compatibility

    Only available in Android L
    - Activity Transition
    - Touch feedback
    - Reveal
    - Path-based animations

    Wrap code in version check
    Animations

    View full-size slide

  31. 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 full-size slide

  32. Distributing Material Design
    ⏰ Not yet

    View full-size slide

  33. google.com/design/spec

    View full-size slide

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

    View full-size slide