$30 off During Our Annual Pro Sale. View Details »

Demystifying Styles and Themes

Demystifying Styles and Themes

Subhrajyoti Sen

January 23, 2021
Tweet

More Decks by Subhrajyoti Sen

Other Decks in Programming

Transcript

  1. Demystifying
    Styles and Themes
    KeepTruckin
    Subhrajyoti Sen BlrDroid Jan 2021

    View Slide

  2. Styles

    View Slide

  3. Styles
    A set of key-values pairs where the key is a View attribute

    View Slide

  4. Styles
    A set of key-values pairs where the key is a View attribute
    Speci c to a single view

    View Slide

  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

    View Slide

  6. Styles
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Hello"/>
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Make Payment"/>

    View Slide

  7. Styles
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Hello"/>
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Make Payment"/>

    View Slide

  8. Styles
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Hello"/>
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:text="Make Payment"/>
    <br/><item name="android:insetTop">0dp</item><br/><item name="android:insetBottom">0dp</item><br/>

    View Slide

  9. Styles
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/ButtonStyle"
    android:text="Hello"/>
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    style="@style/ButtonStyle"
    android:text="Make Payment"/>
    <br/><item name="android:insetTop">0dp</item><br/><item name="android:insetBottom">0dp</item><br/>

    View Slide

  10. TextAppearance

    View Slide

  11. TextAppearance
    A set of key-values pairs speci c to TextView or it's
    subclasses.

    View Slide

  12. TextAppearance
    A set of key-values pairs speci c to TextView or it's
    subclasses.
    Can include only character level styling

    View Slide

  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

    View Slide

  14. TextAppearance
    <br/><item name="android:textColor">#FF0000</item><br/><item name="android:textSize">18sp</item><br/>

    View Slide

  15. TextAppearance
    <br/><item name="android:textColor">#FF0000</item><br/><item name="android:textSize">18sp</item><br/>
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BlrDroid"
    android:textAppearance="@style/RedTextH2"/>

    View Slide

  16. Theme

    View Slide

  17. Theme
    A set of key-values pairs where the key is a Theme
    attribute

    View Slide

  18. Theme
    A set of key-values pairs where the key is a Theme
    attribute
    Applies to a view hierarchy

    View Slide

  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

    View Slide

  20. Theme
    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">
    <br/><item name="colorPrimary">@color/colorPrimary</item><br/><item name="colorPrimaryDark">@color/colorPrimaryDark</item><br/><item name="colorSurface">@color/colorSurface</item><br/><item name="colorOnSurface">@color/colorOnSurface</item><br/>

    View Slide

  21. ThemeOverlay
    A Theme that overrides only speci c theme properties

    View Slide

  22. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

    View Slide

  23. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

    View Slide

  24. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:background="#FF0000" />

    View Slide

  25. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:background="#FF0000" />

    View Slide

  26. ThemeOverlay
    * 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

    View Slide

  27. ThemeOverlay
    <br/><item name="colorPrimary">#D80943</item><br/>

    View Slide

  28. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:background="#FF0000"
    android:theme="@style/ThemeOverlay.RedPrimary" />
    <br/><item name="colorPrimary">#D80943</item><br/>

    View Slide

  29. ThemeOverlay
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:background="#FF0000"
    android:theme="@style/ThemeOverlay.RedPrimary" />
    <br/><item name="colorPrimary">#D80943</item><br/>

    View Slide

  30. App Level Styling

    View Slide

  31. App Level Styling
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:layout_gravity="center_horizontal" />

    View Slide

  32. App Level Styling
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:layout_gravity="center_horizontal" />

    View Slide

  33. App Level Styling
    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" />

    View Slide

  34. App Level Styling
    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" />

    View Slide

  35. App Level Styling
    <br/><item name="android:insetTop">0dp</item><br/><item name="android:insetBottom">0dp</item><br/>
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    style="@style/ButtonStyle"
    android:layout_gravity="center_horizontal" />

    View Slide

  36. App Level Styling
    <br/><item name="colorPrimary">@color/purple_500</item><br/><item name="colorPrimaryVariant">@color/purple_700</item><br/><item name="colorOnPrimary">@color/white</item><br/><item name="materialButtonStyle">@style/ButtonStyle</item><br/>

    View Slide

  37. App Level Styling
    <br/><item name="colorPrimary">@color/purple_500</item><br/><item name="colorPrimaryVariant">@color/purple_700</item><br/><item name="colorOnPrimary">@color/white</item><br/><item name="materialButtonStyle">@style/ButtonStyle</item><br/>
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:layout_gravity="center_horizontal" />

    View Slide

  38. Context Matters

    View Slide

  39. Context Matters
    A context will be tied to a theme

    View Slide

  40. Context Matters
    A context will be tied to a theme
    This theme can be different from the Activity/App theme

    View Slide

  41. Context Matters
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"/>
    android:id="@+id/linear_layout"
    android:theme="@style/ThemeOverlay.RedPrimary">
    android:text="Hello"/>

    View Slide

  42. Context Matters
    val materialButton = MaterialButton(this)
    materialButton.text = "World"
    binding.linearLayout.addView(materialButton)

    View Slide

  43. Context Matters

    View Slide

  44. Context Matters
    val materialButton = MaterialButton(this)
    materialButton.text = "World"
    binding.linearLayout.addView(materialButton)

    View Slide

  45. Context Matters
    val materialButton = MaterialButton(this)
    materialButton.text = "World"
    binding.linearLayout.addView(materialButton)
    Activity

    View Slide

  46. Context Matters
    val contextThemeWrapper = ContextThemeWrapper(
    this, R.style.ThemeOverlay_RedPrimary
    )
    val materialButton = MaterialButton(contextThemeWrapper)
    materialButton.text = "World"
    binding.linearLayout.addView(materialButton)
    Option - 1

    View Slide

  47. Context Matters

    View Slide

  48. Context Matters
    val materialButton = MaterialButton(binding.linearLayout.context)
    materialButton.text = "World"
    binding.linearLayout.addView(materialButton)
    Option - 2

    View Slide

  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

    View Slide

  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

    View Slide

  51. Context Matters
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

    View Slide

  52. Context Matters
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

    View Slide

  53. Custom View Styling

    View Slide

  54. Custom View Styling
    class ProgressButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
    ) : View(context, attrs, defStyleAttr)

    View Slide

  55. Custom View Styling
    class ProgressButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0
    ) : View(context, attrs, defStyleAttr, defStyleRes) {

    View Slide

  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) {

    View Slide

  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)

    View Slide

  58. Custom View Styling defStyleRes

    View Slide

  59. Custom View Styling defStyleRes
    <br/><item name="progressButton_backgroundColor">?attr/colorPrimary</item><br/><item name="progressButton_textColor">?attr/colorOnPrimary</item><br/><item name="progressButton_progressColor">?attr/colorOnPrimary</item><br/>

    View Slide

  60. Custom View Styling defStyleAttr

    View Slide

  61. Custom View Styling



    defStyleAttr
    <br/><item name="colorPrimary">@color/colorPrimary</item><br/><item name="colorPrimaryDark">@color/colorPrimaryDark</item><br/><item name="progressButtonStyle">@style/ProgressButtonStyle</item><br/>

    View Slide

  62. Custom View Styling



    defStyleAttr

    View Slide

  63. Material Styling

    View Slide

  64. Material Styling

    Color

    View Slide

  65. Material Styling

    Color

    Shape

    View Slide

  66. Material Styling

    Color

    Shape

    Typography

    View Slide

  67. Color Theming

    View Slide

  68. Color Theming

    View Slide

  69. Color Theming
    colorPrimary

    View Slide

  70. Color Theming
    colorPrimary
    colorPrimaryVariant

    View Slide

  71. Color Theming
    colorPrimary
    colorPrimaryVariant
    colorOnPrimary

    View Slide

  72. Color Theming
    colorPrimary
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary

    View Slide

  73. Color Theming
    colorPrimary
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorOnSecondary

    View Slide

  74. Color Theming
    colorPrimary
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorOnSecondary
    colorSurface

    View Slide

  75. Color Theming
    colorPrimary
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorOnSecondary
    colorSurface
    colorOnSurface

    View Slide

  76. Color Theming
    <br/><item name="colorPrimary">#006837</item><br/><item name="colorPrimaryDark">#004012</item><br/><item name="android:colorBackground">#FFFFFF</item><br/>

    View Slide

  77. Color Theming
    #FFFFFF
    #0F6BDD
    #0C52A8

    View Slide

  78. Color Theming
    #FFFFFF
    #0F6BDD
    #0C52A8
    <br/><item name="colorPrimary">@color/blue</item><br/><item name="colorPrimaryDark">@color/blueDark</item><br/><item name="android:colorBackground">@color/white</item><br/>

    View Slide

  79. Color Theming - Dark Mode?
    #FFFFFF
    #0F6BDD
    #0C52A8
    values-night/colors.xml

    View Slide

  80. Color Theming - Dark Mode?
    #006837
    #004012
    #FFFFFF
    #0B0A0A
    values/colors.xml

    View Slide

  81. Color Theming - Dark Mode?
    #BA86FC
    #000000
    #000000
    #EAE4E4
    values-night/colors.xml

    View Slide

  82. Color Theming - Dark Mode?
    <br/><item name="colorPrimary">@color/colorPrimary</item><br/><item name="colorPrimaryDark">@color/colorPrimaryDark</item><br/><item name="colorSurface">@color/colorSurface</item><br/><item name="colorOnSurface">@color/colorOnSurface</item><br/>

    View Slide

  83. Shape Theming

    View Slide

  84. Shape Theming



    android:top="6dp"
    android:right="6dp"
    android:bottom="6dp" />



    View Slide

  85. Shape Theming
    <br/><item name="cornerSize">16dp</item><br/><item name="cornerFamily">rounded</item><br/>

    View Slide

  86. Shape Theming
    <br/><item name="cornerSize">16dp</item><br/><item name="cornerFamily">rounded</item><br/>
    app:srcCompat="@drawable/cute_doggo"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"/>

    View Slide

  87. Shape Theming

    View Slide

  88. Shape Theming
    <br/><item name="cornerSize">16dp</item><br/><item name="cornerFamilyTopLeft">cut</item><br/><item name="cornerFamilyBottomRight">cut</item><br/><item name="cornerFamily">rounded</item><br/>

    View Slide

  89. Shape Theming

    View Slide

  90. @iamsubhrajyoti

    View Slide