Material Design for Developers By Li Jia Li 

Who am i ? ● My name is Li Jia Li ● Co-Founder / Web Architect of Hexcores ● A Web Developer who know a bit about design. 

You don’t need to be a designer to make a beautiful app. You just need to know some tools to help you. 

What is Material Design ? 

No content

Material Design for Android http://developer.android.com/design/material/index.html 

Material Theme @android:style/Theme.Material (dark version) @android:style/Theme.Material.Light (light version) @android:style/Theme.Material.Light.DarkActionBar 

Material Theme Customize the color palette <!-- Main theme colors --> <!-- your app branding color for the app bar --> <item name="android:colorPrimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="android:colorPrimaryDark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="android:colorAccent">@color/accent</item> 

https://www.materialpalette.com 

Typography scale-independent pixel (sp) a unit of length for specifying the size of a font of type. Its length depends on the user’s preference for font size, set in the Settings app of the Android device. Tips ?android:textAppearanceSmall (14sp) ?android:textAppearanceMedium (18sp) ?android:textAppearanceLarge ( 22sp) 

Typography (Color & Contrast) A text color that is too similar to the background color is hard to read. Text with too much contrast can also be hard to read. This is especially true of light-colored text against dark backgrounds. 

More Typography guide at https://www.google.com/design/spec/style/typography.html 

Drawable Resources What are these for ? drawable - for xml shapes drawable-hdpi - for 240 dpi devices drawable-mdpi - for 160 dpi devices drawable-nodpi - for images which shouldn’t scale based on density drawable-xhdpi - for 320 dpi devices drawable-xxhdpi - for 480 dpi devices drawable-xxxhdpi - for approximately 640 dpi devices For more : http://developer.android.com/guide/topics/resources/providing-resources.html Language based resources - drawable-mdpi-my 

Material Icons https://www.google.com/design/icons/ 

Material Icon Generator for Android Studio https://github.com/konifar/android-material-design-icon-generator-plugin 

Design Support Library http://developer.android.com/tools/support-library/index.html -> compatible with devices running Android 1.6 (API level 4) and up. ● Navigation View ● Floating labels for editing text ● Floating Action Button ● Snackbar ● Tabs ● CoordinatorLayout, motion, and scrolling ● CoordinatorLayout and floating action buttons ● CoordinatorLayout and the app bar ● Collapsing Toolbars ● CoordinatorLayout and custom views 

Resources Material Design for Android Developers https://www.udacity.com/course/material-design-for-android-developers--ud862 

Material Design is only for Android ? 

No, it isn’t. You can implement it to any platform. Web, iOS, etc. 

Material Design for Web 

Polymer https://www.polymer-project.org/1.0/ ● Polymer is more than material design. ● The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web. 

Polymer Elements https://elements.polymer-project.org/ 

Material Design Lite http://getmdl.io ● Material Design Lite lets you add a Material Design look and feel to your websites. ● doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use ● gracefully degrade in older browsers, and offer an experience that is immediately accessible. 

Material Design Lite http://getmdl.io https://speakerdeck.com/addyosmani/material-design-for-the-web 

Material Design Lite http://getmdl.io With Awesome example template 

Material Design Lite http://getmdl.io 

Other MD frameworks for your web projects ● MaterializeCSS (http://materializecss.com/) ● Material Design for Bootstrap (https://fezvrasta.github.io/bootstrap-material- design/) ● Angular Material (https://material.angularjs.org) And much more …. 

Other Inspiration and resources 

https://design.google.com/resources/ 

http://www.materialup.com/ 

Thanks