Material Design 2.0

Transcript

1. Material Design 2.0 Martin Matejčík
2. About Material Design Material Design announced Google I/O 2014 Design Support library announced Google I/O 2015 Material Theming announced Google I/O 2018
4. dependencies { implementation 'com.android.support:design:28.0.0' } <style name="YourTheme" parent="Theme.AppCompat.Light.NoActionBar"/>
5. dependencies { implementation 'com.android.support:design:28.0.0' } dependencies { implementation 'com.google.android.material:material:1.1.0-alpha03' } <style name="YourTheme" parent="Theme.AppCompat.Light.NoActionBar"/> <style name=“YourTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
6. dependencies { implementation 'com.android.support:design:28.0.0' } dependencies { implementation 'com.google.android.material:material:1.1.0-alpha03' } <style name="YourTheme" parent="Theme.AppCompat.Light.NoActionBar"/> <style name=“YourTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <style name=“YourTheme" parent="Theme.MaterialComponents.Bridge"> Workaround:
7. Theming
8. View Style Default Style Theme
9. View Style Default Style Theme <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white"/>
10. View Style Default Style Theme <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white"/> <style name="ButtonStyle"> <item name="android:textColor">@color/white</item> </style>
11. View Style Default Style Theme <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white"/> <style name="ButtonStyle"> <item name="android:textColor">@color/white</item> </style> <style name="AppTheme"> <item name="buttonStyle">@style/ButtonStyle</item> </style>
12. View Style Default Style Theme <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white"/> <style name="ButtonStyle"> <item name="android:textColor">@color/white</item> </style> <style name="AppTheme"> <item name="buttonStyle">@style/ButtonStyle</item> </style> <style name="AppTheme"> <item name="colorPrimary">@color/colorPrimary</item> </style>
14. Material Components
16. Shape System
18. Small Components Medium Components Large Components Button Chip Floating action button Filled text field Outlined text field Snackbar Card Dialog Menu Bottom Sheet Navigation drawer
19. Global shapeAppearance <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MaterialComponents.SmallComponent</item> <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MaterialComponents.MediumComponent</item> <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.MaterialComponents.LargeComponent</item> </style>
20. Component shapeAppearance <style name="RoundedShapeAppearance" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> <style name=“MyButtonStyle"> <item name="shapeAppearance">@style/RoundedShapeAppearance</item> </style>
21. Component shapeAppearance <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">16dp</item> </style> <style name=“MyButtonStyle"> <item name="shapeAppearance">@style/CutShapeAppearance</item> </style>
22. Demo
25. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
26. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
27. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
28. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
29. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
30. <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/purple</item> <item name=“colorPrimaryVariant">@color/purple_dark</item> <item name="colorSecondary">@color/lime</item> <item name=“colorSecondaryVariant">@color/lime_dark</item> <item name="colorOnPrimary">@color/white</item> <item name=“colorOnSecondary">@color/black</item> ... </style>
31. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="toolbarStyle">@style/Widget.MaterialComponents.Toolbar.Primary</item> <item name=“floatingActionButtonStyle”>@style/Widget.Mat...FloatingActionButton</item> ... </style>
32. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="toolbarStyle">@style/Widget.MaterialComponents.Toolbar.Primary</item> <item name=“floatingActionButtonStyle”>@style/Widget.Mat...FloatingActionButton</item> ... </style>
33. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="toolbarStyle">@style/Widget.MaterialComponents.Toolbar.Primary</item> <item name=“floatingActionButtonStyle”>@style/Widget.Mat...FloatingActionButton</item> ... </style>
34. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="materialCardViewStyle">@style/MyCardView</item> ... </style> <style name="MyCardView" parent="Widget.MaterialComponents.CardView"> <item name="cardElevation">0dp</item> <item name="strokeColor">?colorPrimaryVariant</item> <item name="strokeWidth">1dp</item> </style>
35. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="materialCardViewStyle">@style/MyCardView</item> ... </style> <style name="MyCardView" parent="Widget.MaterialComponents.CardView"> <item name="cardElevation">0dp</item> <item name="strokeColor">?colorPrimaryVariant</item> <item name="strokeWidth">1dp</item> </style>
36. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="borderlessButtonStyle">@style/MyButton</item> ... </style> <style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton"> <item name="shapeAppearance">@style/ButtonShapeAppearance</item> </style> <style name="ButtonShapeAppearance"> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSize">18dp</item> </style>
37. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="borderlessButtonStyle">@style/MyButton</item> ... </style> <style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton"> <item name="shapeAppearance">@style/ButtonShapeAppearance</item> </style> <style name="ButtonShapeAppearance"> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSize">18dp</item> </style>
38. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="shapeAppearanceSmallComponent">@style/MyShapeAppearanceSmall</item> ... </style> <style name="MyShapeAppearanceSmall" parent=“ShapeAppearance.Mat...SmallComponent”> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> </style>
39. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="shapeAppearanceSmallComponent">@style/MyShapeAppearanceSmall</item> ... </style> <style name="MyShapeAppearanceSmall" parent=“ShapeAppearance.Mat...SmallComponent”> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> </style>
40. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="shapeAppearanceMediumComponent">@style/MyShapeAppearanceMedium</item> ... </style> <style name="MyShapeAppearanceMedium" parent=“ShapeAppearance.Mat...MediumComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> MaterialAlertDialogBuilder(this) .setTitle("Demo Dialog") .setMessage("Hello world") .setPositiveButton("OK") { _, _ -> } .show()
41. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="shapeAppearanceMediumComponent">@style/MyShapeAppearanceMedium</item> ... </style> <style name="MyShapeAppearanceMedium" parent=“ShapeAppearance.Mat...MediumComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> MaterialAlertDialogBuilder(this) .setTitle("Demo Dialog") .setMessage("Hello world") .setPositiveButton("OK") { _, _ -> } .show()
42. <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar"> ... <item name="shapeAppearanceMediumComponent">@style/MyShapeAppearanceMedium</item> ... </style> <style name="MyShapeAppearanceMedium" parent=“ShapeAppearance.Mat...MediumComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> MaterialAlertDialogBuilder(this) .setTitle("Demo Dialog") .setMessage("Hello world") .setPositiveButton("OK") { _, _ -> } .show()
43. Docs & tools
44. material.io - design
45. material.io - develop
46. material.io - tools • material theme editor Sketch plugin • Color tool (outdated) • Gallery (alternative to Zeplin)
47. Github source • https://github.com/material-components/material- components-android
48. Questions?