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 Design
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 Roboto 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.xml ○ 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 Tables ● 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 C 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