Android Material 3

This Deck have all the information about Android Material 3, It was used at devFest Vizag 2022

Transcript

1. King 👑 of Design Languages Material 3 Sunku Saarthak Android Educator, Co-Lead, Appc Community. Android
2. Agenda • Knowing about material design • Introduction to Material 3 or Material You • UI Elements in Material 3 • Dynamic color • Migrating from Material 2 to Material 3
4. Material Design Google Introduced Material Design in 2014 as a system for building bold, beautiful user interface and consistent digital experiences. Which made all other developers to use this design to create custom looking user interfaces
6. “But design systems can never Stay Static nor should they, So here comes the Elephant.” Compose 6
7. Material 3 Material 3 is the latest version of Google’s open-source design system. which, enables personal, adaptive, and expressive experiences – from dynamic color and enhanced accessibility, to foundations for large screen layouts and design tokens.
8. Material 3 Components Components are interactive building blocks for creating a user interface. Some of the basic components are Buttons, TextField, Switch, Radio button, Slider, Card. Material 3 UI Elements
9. Button: Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
10. Text Fields A Text Field or Text Box is a UI element allowing users to enter text. A text field is used in registration forms, login or signup pages...
11. Switch A Switch is a UI element used to toggle a particular thing on or off.
12. Dynamic Color
13. Process of Color Extraction
14. Process of Color Extraction
16. Relay allows teams to design UI components in Figma and directly use them in Android apps.
17. Migrating From M2 to M3 To Migrate from Material 2 to Material we need to add this line to the onCreate() method, and also make some token color changes. DynamicColors.applyToActivitiesIfAvailable(this);
18. Migrating From M2 to M3 import android.app.Application; import com.google.android.material.color.DynamicColors; public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); // This is all you need. DynamicColors.applyToActivitiesIfAvailable(this); } } Final onCreate() Method.
19. Resources • https://m3.material.io/ • https://developer.android.com/
20. Thank you and Q&A Sunku Saarthak https://www.linkedin.com/in/sunkusaarthak https://twitter.com/sunkusaarthak