Understanding Themes & Styles in Android

A style is a collection of attributes that specifies the appearance for a single View. A style can specify attributes such as font color, font size, background color, etc. The view ignores any attributes that it doesn't accept.

<style name="customButton" parent="…">
 <item name="android:gravity">center_horizontal</item>
 <item name="android:drawablePadding">@drawable/gradientColor</item>
</style>
<!--However the same attributes can be applied directly from the layout
    file, specifying all the attributes to a style makes it easy to use
    and maintain them across multiple widget -->

<Button …
  style="@style/customButton"/>
<!-- a view in android can be assigned with only one style -->

A theme is a collection of named resources that can be applied to style, layout, etc, not just an individual view. Whenever a theme is applied to an app or activity, every view present in the app or activity applies each of the theme's attributes that it supports.

<style name="Theme.customTheme" parent="…">
  <item name="colorPrimary">@color/teal_500</item>
  <item name="colorSecondary">@color/pink_200</item>
  <item name="android:windowBackground">@color/white</item>
</style>

<!-- AndroidManifest.xml -->
<application …
  android:theme="@style/Theme.customTheme">
<activity …
  android:theme="@style/Theme.customTheme"/>

<!-- layout/activity_main.xml -->
<ConstraintLayout …
  android:theme="@style/Theme.customTheme">

Themes assign semantic names, like colorPrimary, to Android resources.

Styles and themes are meant to work together. For example, you might have a style that specifies that one part of a button is colorPrimary, and another part is colorSecondary. The actual definitions of those colors are provided in the theme. When the device goes into night mode, your app can switch from its "light" theme to its "dark" theme, changing the values for all those resource names. You don't need to change the styles, since the styles use semantic names and not specific color definitions.

Theme Colors

The theme system groups colors into 12 named attributes related to color to be used by text, icons, and more.

Name	Theme Attribute	Use Case
Primary	`colorPrimary`	map to components and elements, like app bars and buttons
Primary Variant	`colorPrimaryVariant`	variant for primary color (maybe a lighter/darker shade)
Secondary	`colorSecondary`	used as accents on components
Secondary Variant	`colorSecondaryVariant`	variant for secondary color (maybe a lighter/darker shade)
Background	`colorBackground`	found behind scrollable content
Surface	`colorSurface`	used for components such as cards, sheets, and menus
Error	`colorError`	indicates errors in components, such as text fields (usually red shade)
On Primary	`colorOnPrimary`	color elements that are placed on top of the primary
On Secondary	`colorOnSecondary`	color elements that are placed on top of the secondary
On Background	`colorOnBackground`	color elements that are placed on top of the background
On Surface	`colorOnSurface`	color elements that are placed on top of the surface
On Error	`colorOnError`	color elements that are placed on top of the error

Our theme doesn't need to specify all of them.

Understanding Themes in Android

<LinearLayout ..>
  <TextView .. />
  <Button .. />
  <TextView .. />
  <com.google.android.material.floatingactionbutton.FloatingActionButton
        .. />
</LinearLayout>

Our default theme.xml file includes the following code snippet :

<style name="Theme.TipTime" 
       parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!--By Default Theme Name is based on our Application Name-->
<!--DarkActionBar states that action bar uses a dark colour-->

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" 
           parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
      <item name="colorPrimary">@color/purple_500</item>
      <item name="colorPrimaryVariant">@color/purple_700</item>
      <item name="colorOnPrimary">@color/white</item>
      <!-- Secondary brand color. -->
      <item name="colorSecondary">@color/teal_200</ite
      <item name="colorSecondaryVariant">@color/teal_700</item>
      <item name="colorOnSecondary">@color/black</item>
      <!-- Status bar color. -->
      <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
      <!-- Customize your theme here. -->
    </style>
</resources>

All the Colour themes used are defined in our colors.xml resource file.

colors.xml

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

WE CAN ADD OUR OWN COLORS IN THE COLORS.XML RESOURCE FILE.
AND SPECIFY THOSE COLORS IN THE THEMES.XML AS PRIMARY & SECONDARY COLORS.

Creating a Dark Theme Variant

A dark theme variant for our application can be created by updating the
themes.xml (night) resource file.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" 
           parent="Theme.MaterialComponents.DayNight.DarkActionBar">
      <!-- Primary brand color. -->
      <item name="colorPrimary">@color/green</item>
      <item name="colorPrimaryVariant">@color/green_dark</item>
      <item name="colorOnPrimary">@color/white</item>
      <!-- Secondary brand color. -->
      <item name="colorSecondary">@color/blue</item>
      <item name="colorSecondaryVariant">@color/blue_dark</item>
      <item name="colorOnSecondary">@color/black</item>
      <!-- Status bar color. -->
      <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
      <!-- Customize your theme here. -->
    </style>
</resources>

themes.xml (night)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" 
           parent="Theme.MaterialComponents.DayNight.DarkActionBar">
      <!-- Primary brand color. -->
      <item name="colorPrimary">@color/green_light</item>
      <item name="colorPrimaryVariant">@color/green</item>
      <item name="colorOnPrimary">@color/black</item>
      <!-- Secondary brand color. -->
      <item name="colorSecondary">@color/blue_light</item>
      <item name="colorSecondaryVariant">@color/blue_light</item>
      <item name="colorOnSecondary">@color/black</item>
      <!-- Status bar color. -->
      <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
      <!-- Customize your theme here. -->
    </style>
</resources>

Demonstration :