Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying Styles and Themes

Demystifying Styles and Themes

53b72671be580e70c9795c7eaf35ac12?s=128

Subhrajyoti Sen

January 23, 2021
Tweet

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