Material Design for Developers

Tips and resources about material design for developers.
Talked at DevFest Yangon 2015

Transcript

1. Material Design for Developers By Li Jia Li
2. Who am i ? • My name is Li Jia Li • Co-Founder / Web Architect of Hexcores • A Web Developer who know a bit about design.
3. You don’t need to be a designer to make a beautiful app. You just need to know some tools to help you.
4. What is Material Design ?
6. Material Design for Android http://developer.android.com/design/material/index.html
7. Material Theme @android:style/Theme.Material (dark version) @android:style/Theme.Material.Light (light version) @android:style/Theme.Material.Light.DarkActionBar
8. Material Theme Customize the color palette <resources> <!-- inherit from the material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- 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> </style> </resources>
9. https://www.materialpalette.com
10. 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) <TextView ... android:textAppearance="?android:textAppearanceLarge" android:textColor="@color/my_own_color" android:textColorLink="@color/my_own_link_color"/>
11. 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.
12. More Typography guide at https://www.google.com/design/spec/style/typography.html
13. 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
14. Material Icons https://www.google.com/design/icons/
15. Material Icon Generator for Android Studio https://github.com/konifar/android-material-design-icon-generator-plugin
16. 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
17. Resources Material Design for Android Developers https://www.udacity.com/course/material-design-for-android-developers--ud862
18. Material Design is only for Android ?
19. No, it isn’t. You can implement it to any platform. Web, iOS, etc.
20. Material Design for Web
21. 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.
22. Polymer Elements https://elements.polymer-project.org/
23. 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.
24. Material Design Lite http://getmdl.io https://speakerdeck.com/addyosmani/material-design-for-the-web
25. Material Design Lite http://getmdl.io With Awesome example template
26. Material Design Lite http://getmdl.io
27. 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 ….
28. Other Inspiration and resources
29. https://design.google.com/resources/
30. http://www.materialup.com/
31. Thanks