Tweet
Tweet

Slide 1

Slide 1 text

Introduction to Material Design Harsh Dattani

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Principle Styling the Material Components Maintaining Compatibility Agenda

Slide 4

Slide 4 text

A great product experience starts with UX followed by UI. Both are essential for the product’s success.

Slide 5

Slide 5 text

Cross-Platform Experience Material: A Metaphor

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Cross-Platform Experience Elements Have Depth & Shadow User Motion, Interaction, Bold & Visual Design Material: A Metaphor

Slide 8

Slide 8 text

Cross Platform

Slide 9

Slide 9 text

Elements Have Depth Elements have depth

Slide 10

Slide 10 text

• 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

Slide 11

Slide 11 text

Color Icon Imagery Material: Implementation Typography

Slide 12

Slide 12 text

values-v21/styles.xml Accent color for primary action buttons and components like switches or sliders. Style: Theme and Color <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>

Slide 13

Slide 13 text

Primary Secondary Style: Color Palette

Slide 14

Slide 14 text

Do Don't Style: Best practice

Slide 15

Slide 15 text

Style: Icon Do Don't

Slide 16

Slide 16 text

Style: Imagery Do Don't

Slide 17

Slide 17 text

Style: Best practice Do Don't

Slide 18

Slide 18 text

Style: Typography

Slide 19

Slide 19 text

Style: Typography

Slide 20

Slide 20 text

Style: Typography

Slide 21

Slide 21 text

Toolbar Appbar Menus Layout: Structure

Slide 22

Slide 22 text

Structure: Toolbar

Slide 23

Slide 23 text

Structure: Appbar • Formerly known as Action bar. • Special kind of toolbar, for branding, navigation and important user actions

Slide 24

Slide 24 text

Structure: Appbar Matrics • Mobile Landscape: 48dp • Mobile Portrait: 56dp • Tablet/Desktop: 64dp

Slide 25

Slide 25 text

Structure: Menus • Overlaps App Bar • Not an extension to App Bar

Slide 26

Slide 26 text

Buttons Cards Dialog Layout: Components Tabs Switch

Slide 27

Slide 27 text

Button: Flat

Slide 28

Slide 28 text

Button: Raised

Slide 29

Slide 29 text

Button: Floating Action Button

Slide 30

Slide 30 text

UI 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.+” }

Slide 31

Slide 31 text

Preferably use flat button Do Not use FAB Component: Dialog

Slide 32

Slide 32 text

Extended App bar + Tab bar Inset search + App bar + Tab bar Default App bar + Tab bar Component: Tabs

Slide 33

Slide 33 text

Radio Switch Checkbox Component: Switch

Slide 34

Slide 34 text

User Input Surface Reaction Animation: Responsive Interaction Meaningful Transition

Slide 35

Slide 35 text

Maintaining Compatibility values/styles.xml <!-- 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>

Slide 36

Slide 36 text

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.+” }

Slide 37

Slide 37 text

Thank You Harsh Dattani @dattaniharsh Google.com/+harshdattani Github.com/harshdattani