Introduction to Material Design

9087b9c125dea75c0eb2d3fa67ab9249?s=47 Harsh Dattani
December 14, 2014

Introduction to Material Design

Delivered a session on Introduction to Material Design at DevFest Ahmedabad 2014.


Harsh Dattani

December 14, 2014


  1. Introduction to Material Design Harsh Dattani

  2. About Me M.Tech Cyber Security Gujarat Forensic Sciences University, Gandhinagar

  3. Principle Styling the Material Components Maintaining Compatibility Agenda

  4. A great product experience starts with UX followed by UI.

    Both are essential for the product’s success.
  5. Cross-Platform Experience Material: A Metaphor

  6. Cross-Platform Experience Elements Have Depth & Shadow Material: A Metaphor

  7. Cross-Platform Experience Elements Have Depth & Shadow User Motion, Interaction,

    Bold & Visual Design Material: A Metaphor
  8. Cross Platform

  9. Elements Have Depth Elements have depth

  10. • A key light creates directional shadows. • An ambient

    light creates consistent, soft shadows from all angles. Shadow cast by key light Shadow cast by ambient light Shadow cast by both lights Elements have shadow
  11. Color Icon Imagery Material: Implementation Typography

  12. values-v21/styles.xml Accent color for primary action buttons and components like

    switches or sliders. Style: Theme and Color <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorPrimaryDark">@color/primary_dark</item> <item name="android:colorAccent">@color/accent</item> <item name="android:textColorPrimary">@color/text_primary</item> <item name="android:textColor">@color/text_secondary</item> <item name="android:navigationBarColor">@color/primary_dark</item> </style> </resources>
  13. Primary Secondary Style: Color Palette

  14. Do Don't Style: Best practice

  15. Style: Icon Do Don't

  16. Style: Imagery Do Don't

  17. Style: Best practice Do Don't

  18. Style: Typography

  19. Style: Typography

  20. Style: Typography

  21. Toolbar Appbar Menus Layout: Structure

  22. Structure: Toolbar

  23. Structure: Appbar • Formerly known as Action bar. • Special

    kind of toolbar, for branding, navigation and important user actions
  24. Structure: Appbar Matrics • Mobile Landscape: 48dp • Mobile Portrait:

    56dp • Tablet/Desktop: 64dp
  25. Structure: Menus • Overlaps App Bar • Not an extension

    to App Bar
  26. Buttons Cards Dialog Layout: Components Tabs Switch

  27. Button: Flat <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Flat Button" style="?android:attr/borderlessButtonStyle" />

  28. Button: Raised <Button android:layout_width="@dimen/btn_size" android:layout_height="wrap_content" android:text="Ripple Effect" android:textColor="@color/text_primary" android:elevation="8dp" android:background="@drawable/ripple"

    android:stateListAnimator="@anim/raise" />
  29. Button: Floating Action Button <ImageButton android:id="@+id/add_button" android:layout_width="@dimen/round_button_diameter" android:layout_height="@dimen/round_button_diameter" android:layout_gravity="end|bottom" android:layout_marginBottom="@dimen/add_button_margin"

    android:layout_marginEnd="@dimen/add_button_margin" android:src="@android:drawable/ic_input_add" android:tint="@android:color/white" android:background="@drawable/ripple_float" android:elevation="@dimen/elevation_low" android:stateListAnimator="@anim/raise" />
  30. UI Widget: CardView < xmlns:card_view="" android:layout_margin="@dimen/activity_horizontal_margin" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="4dp"> <TextView

    android:textSize="@dimen/abc_text_size_display_1_material" android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </> dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "" compile “” }
  31. Preferably use flat button Do Not use FAB Component: Dialog

  32. Extended App bar + Tab bar Inset search + App

    bar + Tab bar Default App bar + Tab bar Component: Tabs
  33. Radio Switch Checkbox Component: Switch

  34. User Input Surface Reaction Animation: Responsive Interaction Meaningful Transition

  35. Maintaining Compatibility values/styles.xml <!-- extend one of the Theme.AppCompat themes

    --> <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- customize the color palette --> <item name="colorPrimary">@color/material_blue_500</item> <item name="colorPrimaryDark">@color/material_blue_700</item> <item name="colorAccent">@color/material_green_A200</item> </style>
  36. Maintaining Compatibility build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar'])

    compile "" compile “” compile “” }
  37. Thank You Harsh Dattani @dattaniharsh