Demystifying Styles and Themes

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