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

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