Android Developer Fundamentals

Delightful User Experience

Lesson 5

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 1 Fundamentals Commercial 4.0 International Lic ense 5.2

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 2 Fundamentals Commercial 4.0 International Lic ense Contents

● The Material Metaphor ● Motion ● Imagery ● Layout ● Typography ● Components ● Color

Material This work is licensed under a Creative Commons Attribution-Non Android Developer Design 3 Fundamentals Commercial 4.0 International Lic ense The Material Metaphor

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 4 Fundamentals Commercial 4.0 International Lic ense What is Material Design?

● Design guidelines ● Visual language ● Combine classic principles of good design with innovation and possibilities of technology and science ● Material Design Spec

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 5 Fundamentals Commercial 4.0 International Lic ense Material metaphor

● Three-dimensional environment containing light, material, and shadows ● Surfaces and edges provide visual cues grounded in reality ● Fundamentals of light, surface, and movement convey how objects move, interact, and exist in space and in relation to each other

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 6 Fundamentals Commercial 4.0 International Lic ense Material design in your app

Elements in your Android app should behave similarly to real world materials ● Cast shadows ● Occupy space ● Interact with each other

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 7 Fundamentals Commercial 4.0 International Lic ense Bold, graphic, intentional

● Choose colors deliberately ● Fill screen edge to edge ● Use large-scale typography ● Use white space intentionally ● Emphasize user action ● Make functionality obvious

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 8 Fundamentals Commercial 4.0 International Lic ense Imagery

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 9 Fundamentals Commercial 4.0 International Lic ense Imagery

Images help you communicate and differentiate your app Should be Best practices ● Relevant ● Use together with text ● Informative ● Original images ● Delightful ● Provide point of focus ● Build a narrative

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 10 Fundamentals Commercial 4.0 International Lic ense Typography

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 11 Fundamentals Commercial 4.0 International Lic ense typeface

Roboto is the standard typeface on Android Roboto has 6 weights ● Thin ● Light ● Regular ● Medium ● Bold ● Black

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 12 Fundamentals Commercial 4.0 International Lic ense Font styles and scale

● Too many sizes is Display 4 confusing and looks bad Display 3 ● Limited set of sizes that Display 2 work well together Display 1 Headline Title Subheading Body 2 Body 1 Caption Button

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 13 Fundamentals Commercial 4.0 International Lic ense Setting text appearance

android:textAppearance= "@ style/TextAppearance.AppCom pat.Display3"

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 14 Fundamentals Commercial 4.0 International Lic ense Color

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 15 Fundamentals Commercial 4.0 International Lic ense Color

● Bold hues ● Muted environments ● Deep shadows ● Bright highlights

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 16 Fundamentals Commercial 4.0 International Lic ense Color palette

Material Design recommends using ● a primary color ● along with some shades ● and an accent color Create a bold user experience for your app ● Material Design Color Palette

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 17 Fundamentals Commercial 4.0 International Lic ense Color palette for your project

● Android Studio creates a color palette for you ● AppTheme definition in styles. ○ colorPrimary—AppBar, branding ○ colorPrimaryDark—status bar, contrast ○ colorAccent—draw user attention, switches, FAB ● Colors defined in colors.xml ● Color selection tool

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 18 Fundamentals Commercial 4.0 International Lic ense Text color and contrast

Good choice ● Contrast for visual separation ● Contrast for readability Good choice ● Contrast for accessibility Bad choice

● Not all people see colors the same Bad choice ● Theme handles text by default Bad choice ○ Theme.AppCompat.Light—text will be near black ○ Theme.AppCompat.Light.DarkActionBar—text near white Good choice

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 19 Fundamentals Commercial 4.0 International Lic ense Motion

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 20 Fundamentals Commercial 4.0 International Lic ense Motion

Motion in Material Design Motion is describes ● Responsive ● Spatial relationships ● Natural ● Functionality ● Aware ● Intention ● Intentional

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 21 Fundamentals Commercial 4.0 International Lic ense Motion in your app

● Maintain continuity ● Highlight elements or actions ● Transition naturally between actions Touch feedback or states Responsive interaction ● Draw focus ● Organize transitions ● Responsive feedback

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 22 Fundamentals Commercial 4.0 International Lic ense Layout

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 23 Fundamentals Commercial 4.0 International Lic ense Layout for Material Design

● Density independent pixels for views—dp ● Scalable pixels for text—sp ● Elements align to a grid with consistent spacing ● Plan your layout ● Use templates for common layout patterns

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 24 Fundamentals Commercial 4.0 International Lic ense Layout planning

Spacing Grid alignment Sizing

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 25 Fundamentals Commercial 4.0 International Lic ense Components

Material This work is licensed under a Android Developer FundamentalsDesign Delightful UserCreative Experience Commons - Lesson Attribution-Non 5 26 Fundamentals Commercial 4.0 International Lic ense Components

Material Design has guidelines on the use and implementation of Android components

● Bottom ● Sliders Navigation ● Snackbar ● Buttons ● Toasts ● Cards ● Steppers ● Chips ● Subheaders ● Data ● Text Fields ● Dialogs ● Toolbars ● Dividers

Material This work is licensed under a Android Developer Design Creative Commons Attribution-Non 27 Fundamentals Commercial 4.0 International Lic ense More components

● Expansion Panels ● Grid Lists ● Lists ● Menus ● Pickers ● Progress Bars ● Selection

ControlsMaterial This work is licensed under a Android Developer Design Creative Commons Attribution-Non 28 Fundamentals Commercial 4.0 International Lic ense Consistency helps user intuition

FAB

Tabs

Snackb Navigation

ar Material This workDrawer is licensed under a Android Developer Design Creative Commons Attribution-Non 29 Fundamentals Commercial 4.0 International Lic ense Learn more

● Material Design Guidelines ● Cards and Lists Gui de ● Material Design Guide ● Floating Action But ● Material Design for Android ton Reference ● Material Design for Develop ● Defining Custom An imations ers ● View Animation ● Material Palette Generator

Material This work is licensed under a Creative Commons Attribution-Non Android Developer Design 30 Fundamentals Commercial 4.0 International Lic ense What's Next?

● Concept Chapter: 5.2 Material Design ● Practical: 5.2 P Material Design: Lists, Cards, and Colors

Material This work is licensed under a Creative Commons Attribution-Non Android Developer Design 31 Fundamentals Commercial 4.0 International Lic ense END

Android Developer Fundamentals 32