Building Better App UI Architecture- Android Themes

January 13, 2020
Building Better App UI Architecture- Android Themes

Our last post focused on opti­miz­ing UI sys­tem imple­men­ta­tion by break­ing down design into small­er pieces, iden­ti­fy­ing the UI ele­ments and com­po­nents, and using pro­to­col-ori­ent­ed pro­gram­ming in iOS. As I men­tioned here.

This time around, we’ll give Android the spot­light by build­ing a sam­ple app that can switch themes using respec­tive dark mode. We’ll also dis­cuss approach­es that can make Android UI devel­op­ment more efficient.

Theme and Style in Android #

Gen­er­al­ly we fol­low themes and styles as much as pos­si­ble for con­sis­ten­cy. Before div­ing into the sam­ple app, let’s see how the Android devel­op­er guide defines themes and styles:

  • A style is a col­lec­tion of attrib­ut­es that spec­i­fy the appear­ance for a sin­gle View. A style can spec­i­fy attrib­ut­es such as font col­or, font size, back­ground col­or, and much more.
  • A theme is a type of style that’s applied to an entire app, activ­i­ty, or view hier­ar­chy — not just an indi­vid­ual view. When you apply your style as a theme, every view in the app or activ­i­ty applies each style attribute that it sup­ports. Themes can also apply styles to non-view ele­ments, such as the sta­tus bar and win­dow background.

The bot­tom line? Apply­ing a style to a view impacts only that view and not its chil­dren. How­ev­er, if you apply a theme to a view it will be applied to all view/non-view elements.

Dark Theme #

Start­ing with Android Q, users can switch the device into dark theme via sys­tem set­tings -> Dis­play -> Dark theme. To sup­port the dark theme func­tion­al­i­ty, you must set the app’s theme to inher­it from a DayNight theme.

Google rec­om­mends updat­ing the app theme to inher­it from the Theme.MaterialComponents.DayNight (or one of its descen­dants). For example:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <!-- Customize your theme here -->

In most cas­es, switch­ing to dark theme doesn’t just about invert­ing the white into black:

There are sev­er­al prin­ci­ples we need to follow:

  • Dark­en with grey.
  • Apply lim­it­ed col­or accents in dark theme.
  • Meet­ing the acces­si­bil­i­ty col­or con­trast standards.

So we also need to define sep­a­rate theme attrib­ut­es with­in each theme, which can be inher­it­ed from style name="AppTheme" parent="Theme.MaterialComponents.Light" in res/values/themes.xml file:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
  <!-- Customize your light theme here -->

Then define your dark theme in res/values-night/themes.xml:

<style name="AppTheme" parent="Theme.MaterialComponents">
  <!-- Customize your dark theme here -->

For most apps that use AppCompat themes, if you want to incre­men­tal­ly add mate­r­i­al com­po­nents you have to add the theme attrib­ut­es to the exist­ing app theme. You can find all new attrib­ut­es here.

From Android 10 onwards you can set android:forceDarkAllowed="true" in the activity’s theme, so that even the app with­out DayNight can auto­mat­i­cal­ly apply dark theme. Just make sure every­thing looks right before you turn it on.

Mul­ti­ple themes with dark mode

The sam­ple we’re going to build is a bit dif­fer­ent. In this case, we’re plan­ning on sev­er­al themes.

This means hav­ing sev­er­al DayNight themes. Let’s define our basic theme first:

<style name="AppTheme" parent="Theme.AppCompat.Light">
  <item name="colorControlDisabled">@color/grey_200</item>
  <item name="colorControlDisabledDark">@color/grey_300</item>

<style name="AppTheme.Basic">
  <item name="windowActionBar">false</item>
  <item name="windowNoTitle">true</item>

colorControlDisabled and colorControlDisableDark are cus­tom theme attributes. 

You can define cus­tom theme attrib­ut­es in res/values/attrs.xml like this:

  <attr name="themePrimary" format="reference" />
  <attr name="themeOnPrimary" format="reference" />
  <attr name="themePrimaryDark" format="reference" /> 
  <attr name="themeOnPrimaryDark" format="reference"/>
  <attr name="themeAccent" format="reference" />
  <attr name="themeSecondary" format="reference"/>
  <attr name="themeSecondaryDark" format="reference"/>
  <attr name="themeOnSecondary" format="reference"/>
  <attr name="colorControlDisabledDark" format="reference"/>
  <attr name="colorControlDisabled" format="reference"/>
  <attr name="themeColorControlHighlight" format="reference"/>
  <attr name="themeColorControlHighlightDark" format="reference"/>
  <attr name="themeBackground" format="reference"/>
  <attr name="themeOnBackground" format="reference"/>
  <attr name="themeSurface" format="reference"/>
  <attr name="themeOnSurface" format="reference"/>

Now define the red theme:

<style name="AppTheme.Basic.Red">
    <item name="colorPrimary">@color/red_500</item>
    <item name="colorPrimaryDark">@color/red_800</item>
    <item name="colorAccent">@color/red_900</item>
    <item name="themePrimary">@color/red_500</item>
    <item name="themePrimaryDark">@color/red_800</item>
    <item name="themeAccent">@color/red_900</item>
    <item name="themeOnPrimary">@color/white</item>
    <item name="themeSecondary">@color/red_100</item>
    <item name="themeSecondaryDark">@color/red_200</item>
    <item name="themeOnSecondary">@color/white</item>
    <item name="themeBackground">@color/white</item>
    <item name="themeOnBackground">@color/black</item>
    <item name="themeSurface">@color/white</item>
    <item name="themeOnSurface">@color/black</item>
    <item name="themeColorControlHighlight">@color/red_800</item>
    <item name="themeColorControlHighlightDark">@color/red_900</item>

Next, we define dark mode for the red theme:

<style name="AppTheme.Basic.Red.Dark">
    <item name="colorPrimary">@color/grey_700</item>
    <item name="colorPrimaryDark">@color/black</item>
    <item name="themeSurface">@color/grey_700</item>
    <item name="themeOnSurface">@color/white</item>
    <item name="android:colorBackground">@color/black</item>

We can see AppTheme.Basic.Red.Dark inher­its from AppTheme.Basic.Red, which over­rides the attrib­ut­es that need to change in dark mode:

<!-- The primary branding color for the app. By default, this is the color
applied to the action bar background. -->
<attr name="colorPrimary" format="color" />

<!-- Dark variant of the primary branding color. By default, this is the color 
applied to the status bar (via statusBarColor) and navigation bar 
(via navigationBarColor). -->
<attr name="colorPrimaryDark" format="color" />

<!-- The background used by framework controls. -->
<attr name="controlBackground" format="reference" />

If you’re look­ing to dig deep­er, here are all the orig­i­nal attrib­ut­es in App­Com­pat theme.

Use this same approach to define oth­er col­or themes and their dark modes for ​“orange”, ​“blue”, ​“green”, ​“pur­ple”, ​“teal”, or what­ev­er you decide to name it.

Next, we need to style our views. For con­sis­ten­cy, car­ry out themes and styles as much as pos­si­ble, and keep Android’s style hier­ar­chy in mind. The list is ordered from high­est prece­dence to low­est to help you deter­mine which attrib­ut­es to apply:

  • Apply­ing char­ac­ter- or para­graph-lev­el styling via text spans to TextView-derived class­es
  • Apply­ing attrib­ut­es programmatically 
  • Apply­ing indi­vid­ual attrib­ut­es direct­ly to a view
  • Apply­ing a style to a view
  • Default styling
  • Apply­ing a theme to a col­lec­tion of views, an activ­i­ty, or your entire app
  • Apply­ing cer­tain view-spe­cif­ic styling, such as set­ting a TextAppearance on a TextView

So, wher­ev­er we need to change the theme in our sam­ple app, we need to apply the theme attrib­ut­es. For exam­ple, using a gra­di­ent draw­able gradient_background.xml as the back­ground, will look like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="">

Now a card view with a back­ground changed by theme:


You can then define a textView like this:


The text col­or will always be pink_​600 no mat­ter what text col­or is set in tex­tAp­pear­ance or what theme you use. For things you nev­er want to change, apply indi­vid­ual attrib­ut­es directly.

Okay, now that our themes and views are set up, we can call Set­Theme in MainActivity.kt. Here is the code snippet:

override fun onCreate(savedInstanceState: Bundle?) {

  if (getPreferences(Activity.MODE_PRIVATE).getBoolean("isNightMode", false)) {
    when(getSavedTheme()) { -> setTheme( -> setTheme( -> setTheme( -> setTheme( -> setTheme( ->  setTheme(
  } else {
  // …

Save/​get the theme to user preference: 

private fun saveTheme(value: String) {
  val pref = getPreferences(Activity.MODE_PRIVATE)
  pref.edit().putString("theme", value).apply()

private fun getSavedTheme(): Int {
  val theme = getPreferences(Activity.MODE_PRIVATE).getString("theme", BLUE)
  when (theme) {
    ORANGE -> return
    RED -> return
    BLUE -> return
    GREEN -> return
    PURPLE -> return
    TEAL -> return
    else -> return

After a some­what tedious process, our app now sup­ports mul­ti­ple themes with respec­tive dark mode.

In app devel­op­ment, require­ments, design, and imple­men­ta­tion (espe­cial­ly UI) are prone to change. The first thing we need to keep in mind is to avoid cre­at­ing styles with hard­cod­ed val­ues. Sep­a­rat­ing UI code by first defin­ing theme, styles, and cus­tom view com­po­nents results in a pow­er­ful cen­tral con­trol and reduces the amount of code and improve reusabil­i­ty and testability. 

In the long run under­stand­ing how style/​view hier­ar­chy works with­in a spe­cif­ic oper­at­ing sys­tem helps to cre­ate a clear hier­ar­chy imple­men­ta­tion, while ulti­mate­ly mak­ing code more reusable.

Next up in our How to Build a Bet­ter App UI Archi­tec­ture series: Cre­at­ing a cus­tom view in Android. We can’t wait to share our insights.

Mei Huang
Mei Huang
Software Developer

Looking for more like this?

Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.

A Study of Human-Centered Design Off Screen - Burning Man Festival

A Study of Human-Centered Design Off Screen - Burning Man Festival

February 13, 2023

Kourtney examines the Burning Man Festival and its fascinating history of human-centered design

Read more
5 takeaways from the Do iOS conference that will benefit our clients

5 takeaways from the Do iOS conference that will benefit our clients

November 30, 2023

Read more
Advanced Tailwind: Container Queries
Development Web

Advanced Tailwind: Container Queries

July 28, 2023

Explore some advanced web layout techniques using Tailwind CSS framework

Read more
View more articles