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

Material Design for Developers

Li Jia Li
October 03, 2015

Material Design for Developers

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

Li Jia Li

October 03, 2015
Tweet

More Decks by Li Jia Li

Other Decks in Design

Transcript

  1. Who am i ? • My name is Li Jia

    Li • Co-Founder / Web Architect of Hexcores • A Web Developer who know a bit about design.
  2. You don’t need to be a designer to make a

    beautiful app. You just need to know some tools to help you.
  3. 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>
  4. 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"/>
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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.
  10. 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 ….