Introduction to Material Design

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