Material design
•Download as PPTX, PDF•
2 likes•739 views
Material design is a visual design system introduced by Google that is used across platforms like Android and iOS. It uses principles of tactile materials like paper and ink and represents surfaces that interact in a shared space. Elements can have elevation and cast shadows to show relationships. Key aspects include a new theme, widgets for complex views, and APIs for custom shadows and animations. It imagines each user interface element as a sheet of paper that occupies a position in Z-space and can cast shadows below it.
Report
Share
Material design
- 1. Material Design Speaker Imam Raza GDG Karachi Event 24th January
- 2. Material design is a unified system of visual, motion, and interaction design that adapts across different devices. What is it?
- 3. ● Material design is inspired by tactile materials, such as paper and ink. ● Material surfaces interact in a shared space ● Surfaces can have elevation (z-height) and cast shadows on other surfaces to convey relationships Inspired by
- 4. ● A new theme ● New widgets for complex views ● New APIs for custom shadows and animations Android Material design Elements
- 6. New Widget List and Card View
- 10. Card View
- 11. View Shadows
- 12. ● imagines every UI surface as a "sheet of paper" floating above a background. ● Each sheet of paper occupies a position in Z space and casts a shadow on elements below it. View Shadows
- 13. ● In addition to the X and Y properties, now have a Z property. ● Z property represent elevation. <ImageView … android:elevation="8dp" /> View Shadows
- 14. Animation
Editor's Notes
- UI elements are placed in 3D space by specifying a Z elevation in dp, a density-independent pixel, the same way you can place elements in X and Y. The framework takes care of the layering and shadowing automatically. An element with "Z=0dp" set as an attribute will be at "ground" level (usually this is just the background), an element with a "Z=2dp" will be placed above the "0dp" element and cast a small shadow, and "Z=4dp" will place it even higher and give it a larger shadow.