Demystifying Styles and Themes

Transcript

1. Demystifying Styles and Themes KeepTruckin Subhrajyoti Sen BlrDroid Jan 2021
2. Styles
3. Styles A set of key-values pairs where the key is a View attribute
4. Styles A set of key-values pairs where the key is a View attribute Speci c to a single view
5. Styles A set of key-values pairs where the key is a View attribute Speci c to a single view Can't be changed once applied
6. Styles <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Hello"/> <com.google.android.material.button.MaterialButton android:layout_width="100dp" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Make Payment"/>
7. Styles <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Hello"/> <com.google.android.material.button.MaterialButton android:layout_width="100dp" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Make Payment"/>
8. Styles <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Hello"/> <com.google.android.material.button.MaterialButton android:layout_width="100dp" android:layout_height="wrap_content" android:insetBottom="0dp" android:insetTop="0dp" android:text="Make Payment"/> <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="android:insetTop">0dp</item> <item name="android:insetBottom">0dp</item> </style>
9. Styles <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ButtonStyle" android:text="Hello"/> <com.google.android.material.button.MaterialButton android:layout_width="100dp" android:layout_height="wrap_content" style="@style/ButtonStyle" android:text="Make Payment"/> <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="android:insetTop">0dp</item> <item name="android:insetBottom">0dp</item> </style>
10. TextAppearance
11. TextAppearance A set of key-values pairs speci c to TextView or it's subclasses.
12. TextAppearance A set of key-values pairs speci c to TextView or it's subclasses. Can include only character level styling
13. TextAppearance A set of key-values pairs speci c to TextView or it's subclasses. Can include only character level styling Can be changed once applied
14. TextAppearance <style name="RedTextH2"> <item name="android:textColor">#FF0000</item> <item name="android:textSize">18sp</item> </style>
15. TextAppearance <style name="RedTextH2"> <item name="android:textColor">#FF0000</item> <item name="android:textSize">18sp</item> </style> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="BlrDroid" android:textAppearance="@style/RedTextH2"/>
16. Theme
17. Theme A set of key-values pairs where the key is a Theme attribute
18. Theme A set of key-values pairs where the key is a Theme attribute Applies to a view hierarchy
19. Theme A set of key-values pairs where the key is a Theme attribute Applies to a view hierarchy Can't be changed once applied
20. Theme <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:theme="@style/Theme.BlrDroidThemes" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorSurface">@color/colorSurface</item> <item name="colorOnSurface">@color/colorOnSurface</item> </style>
21. ThemeOverlay A Theme that overrides only speci c theme properties
22. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />
23. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />
24. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:background="#FF0000" />
25. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:background="#FF0000" />
26. ThemeOverlay * <p>For filled buttons, this class uses your theme's {@code ?attr/colorPrimary} for the background * tint color and {@code ?attr/colorOnPrimary} for the text color. For unfilled buttons, this class * uses {@code ?attr/colorPrimary} for the text color and transparent for the background tint. MaterialButton.java
27. ThemeOverlay <style name="ThemeOverlay.RedPrimary" parent=""> <item name="colorPrimary">#D80943</item> </style>
28. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:background="#FF0000" android:theme="@style/ThemeOverlay.RedPrimary" /> <style name="ThemeOverlay.RedPrimary" parent=""> <item name="colorPrimary">#D80943</item> </style>
29. ThemeOverlay <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:background="#FF0000" android:theme="@style/ThemeOverlay.RedPrimary" /> <style name="ThemeOverlay.RedPrimary" parent=""> <item name="colorPrimary">#D80943</item> </style>
30. App Level Styling
31. App Level Styling <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_gravity="center_horizontal" />
32. App Level Styling <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_gravity="center_horizontal" />
33. App Level Styling <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:insetTop="0dp" android:insetBottom="0dp" android:layout_gravity="center_horizontal" />
34. App Level Styling <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:insetTop="0dp" android:insetBottom="0dp" android:layout_gravity="center_horizontal" />
35. App Level Styling <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="android:insetTop">0dp</item> <item name="android:insetBottom">0dp</item> </style> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" style="@style/ButtonStyle" android:layout_gravity="center_horizontal" />
36. App Level Styling <style name="Theme.BlrDroidThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <item name="materialButtonStyle">@style/ButtonStyle</item> </style>
37. App Level Styling <style name="Theme.BlrDroidThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <item name="materialButtonStyle">@style/ButtonStyle</item> </style> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_gravity="center_horizontal" />
38. Context Matters
39. Context Matters A context will be tied to a theme
40. Context Matters A context will be tied to a theme This theme can be different from the Activity/App theme
41. Context Matters <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/> <LinearLayout android:id="@+id/linear_layout" android:theme="@style/ThemeOverlay.RedPrimary"> <com.google.android.material.button.MaterialButton android:text="Hello"/> </LinearLayout>
42. Context Matters val materialButton = MaterialButton(this) materialButton.text = "World" binding.linearLayout.addView(materialButton)
43. Context Matters
44. Context Matters val materialButton = MaterialButton(this) materialButton.text = "World" binding.linearLayout.addView(materialButton)
45. Context Matters val materialButton = MaterialButton(this) materialButton.text = "World" binding.linearLayout.addView(materialButton) Activity
46. Context Matters val contextThemeWrapper = ContextThemeWrapper( this, R.style.ThemeOverlay_RedPrimary ) val materialButton = MaterialButton(contextThemeWrapper) materialButton.text = "World" binding.linearLayout.addView(materialButton) Option - 1
47. Context Matters
48. Context Matters val materialButton = MaterialButton(binding.linearLayout.context) materialButton.text = "World" binding.linearLayout.addView(materialButton) Option - 2
49. Context Matters public MaterialButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(wrap(context, attrs, defStyleAttr, DEF_STYLE_RES), attrs, defStyleAttr); // Ensure we are using the correctly themed context rather than the context that was passed in. context = getContext(); } MaterilButton.java
50. Context Matters public static Context wrap(//params ) { int materialThemeOverlayId = obtainMaterialThemeOverlayId(context, attrs, defStyleAttr, defStyleRes); boolean contextHasOverlay = context instanceof ContextThemeWrapper && ((ContextThemeWrapper) context).getThemeResId() == materialThemeOverlayId; //.. Context contextThemeWrapper = new ContextThemeWrapper(context, materialThemeOverlayId); // .. return contextThemeWrapper; } MaterialButton.java
51. Context Matters <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> </LinearLayout>
52. Context Matters <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> </LinearLayout>
53. Custom View Styling
54. Custom View Styling class ProgressButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr)
55. Custom View Styling class ProgressButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, defStyleRes: Int = 0 ) : View(context, attrs, defStyleAttr, defStyleRes) {
56. Custom View Styling class ProgressButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.attr.progressButtonStyle, defStyleRes: Int = R.style.ProgressButtonStyle ) : View(context, attrs, defStyleAttr, defStyleRes) {
57. Custom View Styling class ProgressButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.attr.progressButtonStyle, defStyleRes: Int = R.style.ProgressButtonStyle ) : View(context, attrs, defStyleAttr, defStyleRes) { val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressButton, defStyleAttr, defStyleRes)
58. Custom View Styling defStyleRes
59. Custom View Styling defStyleRes <style name="ProgressButtonStyle"> <item name="progressButton_backgroundColor">?attr/colorPrimary</item> <item name="progressButton_textColor">?attr/colorOnPrimary</item> <item name="progressButton_progressColor">?attr/colorOnPrimary</item> </style>
60. Custom View Styling defStyleAttr
61. Custom View Styling <resources> <attr name="progressButtonStyle" format="reference"/> </resources> defStyleAttr <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="progressButtonStyle">@style/ProgressButtonStyle</item> </style>
62. Custom View Styling <resources> <attr name="progressButtonStyle" format="reference"/> </resources> defStyleAttr
63. Material Styling
64. Material Styling • Color
65. Material Styling • Color • Shape
66. Material Styling • Color • Shape • Typography
67. Color Theming
68. Color Theming
69. Color Theming colorPrimary
70. Color Theming colorPrimary colorPrimaryVariant
71. Color Theming colorPrimary colorPrimaryVariant colorOnPrimary
72. Color Theming colorPrimary colorPrimaryVariant colorOnPrimary colorSecondary
73. Color Theming colorPrimary colorPrimaryVariant colorOnPrimary colorSecondary colorOnSecondary
74. Color Theming colorPrimary colorPrimaryVariant colorOnPrimary colorSecondary colorOnSecondary colorSurface
75. Color Theming colorPrimary colorPrimaryVariant colorOnPrimary colorSecondary colorOnSecondary colorSurface colorOnSurface
76. Color Theming <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">#006837</item> <item name="colorPrimaryDark">#004012</item> <item name="android:colorBackground">#FFFFFF</item> </style>
77. Color Theming <color name="white">#FFFFFF</color> <color name="blue">#0F6BDD</color> <color name="blueDark">#0C52A8</color>
78. Color Theming <color name="white">#FFFFFF</color> <color name="blue">#0F6BDD</color> <color name="blueDark">#0C52A8</color> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/blue</item> <item name="colorPrimaryDark">@color/blueDark</item> <item name="android:colorBackground">@color/white</item> </style>
79. Color Theming - Dark Mode? <color name="white">#FFFFFF</color> <color name="blue">#0F6BDD</color> <color name="blueDark">#0C52A8</color> values-night/colors.xml
80. Color Theming - Dark Mode? <color name="colorPrimary">#006837</color> <color name="colorPrimaryDark">#004012</color> <color name="colorSurface">#FFFFFF</color> <color name="colorOnSurface">#0B0A0A</color> values/colors.xml
81. Color Theming - Dark Mode? <color name="colorPrimary">#BA86FC</color> <color name="colorPrimaryDark">#000000</color> <color name="colorSurface">#000000</color> <color name="colorOnSurface">#EAE4E4</color> values-night/colors.xml
82. Color Theming - Dark Mode? <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorSurface">@color/colorSurface</item> <item name="colorOnSurface">@color/colorOnSurface</item> </style>
83. Shape Theming
84. Shape Theming <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#00ffffff" /> <padding android:left="6dp" android:top="6dp" android:right="6dp" android:bottom="6dp" /> <corners android:radius="12dp" /> <stroke android:width="6dp" android:color="#ffffffff" /> </shape>
85. Shape Theming <style name="ShapeAppearanceOverlay.RoundedCorner"> <item name="cornerSize">16dp</item> <item name="cornerFamily">rounded</item> </style>
86. Shape Theming <style name="ShapeAppearanceOverlay.RoundedCorner"> <item name="cornerSize">16dp</item> <item name="cornerFamily">rounded</item> </style> <com.google.android.material.imageview.ShapeableImageView app:srcCompat="@drawable/cute_doggo" app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"/>
87. Shape Theming
88. Shape Theming <style name="ShapeAppearanceOverlay.RoundedCorner"> <item name="cornerSize">16dp</item> <item name="cornerFamilyTopLeft">cut</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerFamily">rounded</item> </style>
89. Shape Theming
90. @iamsubhrajyoti