Introduction to Material Design

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

Transcript

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 <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" 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" /> </android.support.v7.widget.CardView> dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.android.support:appcompat-v7:21.0.+" compile “com.android.support:cardview-v7:21.0.+” }
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 "com.android.support:appcompat-v7:21.0.+" compile “com.android.support:cardview-v7:21.0.+” compile “com.android.support:recyclerview-v7:21.0.+” }
37. Thank You Harsh Dattani @dattaniharsh Google.com/+harshdattani Github.com/harshdattani