Material Design Segun Famisa forLoop #2 June 18, 2016

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

Diving into material design

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.

Core principles of material design

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

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.

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

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

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

Other Components Fab Cards Tabs Bottom Bar Bottom sheet

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

State of material design

State of material design As at May, 2016 there are over 1,000,000 material design apps on the Google Play store.

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

Showcase Material design showcase g.co/materialshowcase

What’s new in material design?

What’s new in material design? ● Timely ● Glanceable ● Easy to tap ● Time-saving Material design for Wearables!

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

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

What’s new in material design? Onboarding

What’s new in material design? Onboarding Self-select Quick start Top user benefit

What’s new in material design? Feature discovery ● Color ● Tap-targets ● Guided mode

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.

How?

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

How? Tangible surfaces Cards Elevation gives shadows

How? Print-based design Typography Using support library typography text appearances: @style/TextAppearance.AppCompat.Subhead Dynamic colors: Palette.

How? Meaningful motion Ripples ...

How? Meaningful motion StateListAnimator- Items respond to touch

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());

Tools & resources

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

Tools & resources Android ● AppCompat library for android. ● Design library. ● 3rd party open source libraries. https://android-arsenal.com/search?q=material

Tools & resources Developer options: Show Layout Bounds App: Keyline Pushing App: Material Cue

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

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

Questions?

Go forth and be material! @segunfamisa segunfamisa.com