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

More Decks by Jérémie Laval

Other Decks in Technology


  1. Developers that adopt Material Design now will be leaps and

    bounds ahead of the competition when Android L releases. Andy Chief Android Mascot
  2. Theming Your App ▪ Three Colors ▪ Primary Dark ▪

    Primary (Brand Color) ▪ Accent Color Easier than ever
  3. 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>

  4. 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/
  5. 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 :
 return view;

  6. RecyclerView Super ListView ▪ Auto ViewHolder Recycling ▪ Built-in Animations

  7. 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
  8. Compatibility ▪ Only available in Android L - Activity Transition

    - Touch feedback - Reveal - Path-based animations ▪ Wrap code in version check Animations
  9. 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