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

Material Design

Material Design

Presentation slides on Material Design for #forLoop 2.

Segun Famisa

June 18, 2016

More Decks by Segun Famisa

Other Decks in Programming


  1. Material Design Segun Famisa forLoop #2 June 18, 2016

  2. Introduction Hey there, I’m Segun Famisa, but you can call

    me SF. Previously, Android dev at Truppr. Currently, Software Engineer at Konga, working on KongaPay. Struggling French student, and I practise Karate in my spare time. segunfamisa
  3. Diving into material design

  4. What exactly is Material design? “Material design is a design

    language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.” This is material design. Material design is not a library, neither is it your fab. Introduced in Google I/O 2014, as part of Android Lollipop. Material design is platform agnostic.
  5. Core principles of material design

  6. Core principles of material design Tangible surfaces with tactile reality.

    Inspired by paper & ink. Print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments Meaningful motion
  7. Tangible surfaces The fundamentals of light, surface, and movement are

    key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
  8. Typography Roboto is the standard typeface on Android. Noto is

    the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto. Text Styles for material design
  9. Keylines and Margins Screen edge left and right margins: 16dp

    Content associated with an icon or avatar left margin: 72dp Horizontal margins on mobile: 16dp Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge
  10. Meaningful motion Material elements are unified by their speed, responsiveness,

    and intention. What makes a good transition? • Motion is quick • Motion is clear • Motion is cohesive
  11. Other Components Fab Cards Tabs Bottom Bar Bottom sheet

  12. And more? Check out http://www.google.com/design/spec/components

  13. State of material design

  14. State of material design As at May, 2016 there are

    over 1,000,000 material design apps on the Google Play store.
  15. State of material design Developer support Growing developer support •

    AppCompat library for android. • Android Design library. • 3rd party open source libraries. https://android-arsenal.com/search?q=material The more apps are updated to material design, the better experience users will have with a clean & uniform UI. And..the more out-of-place your non-material apps are
  16. Showcase Material design showcase g.co/materialshowcase

  17. What’s new in material design?

  18. What’s new in material design? • Timely • Glanceable •

    Easy to tap • Time-saving Material design for Wearables!
  19. What’s new in material design? Material design for Wearables Android

    Wear is designed around the core actions of suggest and demand. Provide the right information at the right time Keep interfaces uncluttered and easy to read. Organize information using a clear information hierarchy. Timely Glanceable Easy to tap Ensure tap targets are well-spaced and easy to tap Avoid creating complex experiences that rely on multiple steps to get a task done. Time saving
  20. What’s new in material design? Growth & Communications Best practices

    and components to help users quickly & intuitively understand what they can do with your app. • Onboarding • Feature discovery • Gesture education
  21. What’s new in material design? Onboarding

  22. What’s new in material design? Onboarding Self-select Quick start Top

    user benefit
  23. What’s new in material design? Feature discovery • Color •

    Tap-targets • Guided mode
  24. What’s new in material design? Gesture detection Mimic the movement

    of the real UI. The gesture indicator should pause then disappear once a tap gesture is detected. The gesture being taught should be the only way to dismiss the sandbox UI. For example, only a left or right swipe will dismiss a card describing a swipe gesture.
  25. How?

  26. How? The Design Support Library • compile 'com.android.support:design:23.4.0' • Widgets:

    ◦ android.support.design.widget.NavigationView ◦ android.support.v4.widget.DrawerLayout ◦ android.support.design.widget.CoordinatorLayout ◦ android.support.design.widget.CollapsingToolbarLayout ◦ android.support.design.widget.Snackbar ◦ android.support.design.widget.FloatingActionButton ◦ android.support.design.widget.AppBarLayout • Other libraries: ◦ CardView ◦ RecyclerView ◦ Palette
  27. How? Tangible surfaces Cards <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" <!-- card content

    --> </android.support.v7.widget.CardView> Elevation gives shadows <ImageView android:layout_width="match_parent" android:layout_height="@dimen/height_description_icon" android:elevation="2dp" ... />
  28. How? Print-based design Typography Using support library typography text appearances:

    @style/TextAppearance.AppCompat.Subhead Dynamic colors: Palette.
  29. How? Meaningful motion Ripples <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/ripple_light"> <item> ... </item>

  30. How? Meaningful motion StateListAnimator- Items respond to touch <selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="@dimen/touch_raise" android:valueType="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </item> </selector>
  31. How? Meaningful motion Activity/Fragment transitions ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, //

    The view which starts the transition view, //The transitionName of the view we’re transitioning to getString(R.string.transition_item_image) ); ActivityCompat.startActivity( MainActivity.this, intent, options.toBundle());
  32. Tools & resources

  33. Tools & resources Web Polymer https://www.polymer-project.org/1.0/ Material design lite https://getmdl.io/

  34. Tools & resources Android • AppCompat library for android. •

    Design library. • 3rd party open source libraries. https://android-arsenal.com/search?q=material
  35. Tools & resources Developer options: Show Layout Bounds App: Keyline

    Pushing App: Material Cue
  36. Tools & resources • Plaid app (Great material design demo

    app from Nick Butcher) https://github.com/nickbutcher/plaid • Material Colors for Mac. https://github.com/romannurik/MaterialColorsApp • Sketch • Photoshop :) • https://materialup.com • www.materialpalette.com
  37. References 1. Material design guidelines https://www.google.com/design/spec/material-design/introduction.html 2. Google Design https://design.google.com

    3. Google Design on Medium https://medium.com/google-design
  38. Questions?

  39. Go forth and be material! @segunfamisa segunfamisa.com