`

If you’re looking to dig deeper, here are all the original attributes in AppCompat theme.

Use this same approach to define other color themes and their dark modes for “orange", “blue", “green", “purple", "teal", or whatever you decide to name it.

Next, we need to style our views. For consistency, carry out themes and styles as much as possible, and keep Android's style hierarchy in mind. The list is ordered from highest precedence to lowest to help you determine which attributes to apply:

• Applying character- or paragraph-level styling via text spans to TextView-derived classes
• Applying attributes programmatically
• Applying individual attributes directly to a view
• Applying a style to a view
• Default styling
• Applying a theme to a collection of views, an activity, or your entire app
• Applying certain view-specific styling, such as setting a TextAppearance on a TextView

So, wherever we need to change the theme in our sample app, we need to apply the theme attributes. For example, using a gradient drawable gradient_background.xml as the background, will look like this:

`xml <?xml version="1.0" encoding="utf-8"?>

<gradient
    android:startColor="?colorPrimary"
    android:endColor="?colorPrimaryDark"
    android:angle="0"/>

`

Now a card view with a background changed by theme:

`xml <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_view_margin" app:cardBackgroundColor="?attr/themeSurface" > `

You can then define a textView like this:

`xml <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="8dp" android:text="@string/app_title" android:background="?colorPrimary" android:textColor="@color/pink_600" android:textAppearance="@style/MyAppTextAppearance.Header1" /> `

The text color will always be pink_600 no matter what text color is set in textAppearance or what theme you use. For things you never want to change, apply individual attributes directly.

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

`kotlin override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)

if (getPreferences(Activity.MODE_PRIVATE).getBoolean("isNightMode", false)) {

when(getSavedTheme()) {
  R.style.AppTheme_Basic_Orange -> setTheme(R.style.AppTheme_Basic_Orange_Dark)
  R.style.AppTheme_Basic_Red -> setTheme(R.style.AppTheme_Basic_Red_Dark)
  R.style.AppTheme_Basic_Blue -> setTheme(R.style.AppTheme_Basic_Blue_Dark)
  R.style.AppTheme_Basic_Green -> setTheme(R.style.AppTheme_Basic_Green_Dark)
  R.style.AppTheme_Basic_Purple -> setTheme(R.style.AppTheme_Basic_Purple_Dark)
  R.style.AppTheme_Basic_Teal ->  setTheme(R.style.AppTheme_Basic_Teal_Dark)
}

} else {

setTheme(getSavedTheme())

} // … } `

Save/get the theme to user preference:

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

private fun getSavedTheme(): Int { val theme = getPreferences(Activity.MODE_PRIVATE).getString("theme", BLUE) when (theme) {

ORANGE -> return R.style.AppTheme_Basic_Orange
RED -> return R.style.AppTheme_Basic_Red
BLUE -> return R.style.AppTheme_Basic_Blue
GREEN -> return R.style.AppTheme_Basic_Green
PURPLE -> return R.style.AppTheme_Basic_Purple
TEAL -> return R.style.AppTheme_Basic_Teal
else -> return R.style.AppTheme_Basic_Orange

} } `

After a somewhat tedious process, our app now supports multiple themes with respective dark mode.

In app development, requirements, design, and implementation (especially UI) are prone to change. The first thing we need to keep in mind is to avoid creating styles with hardcoded values. Separating UI code by first defining theme, styles, and custom view components results in a powerful central control and reduces the amount of code and improve reusability and testability.

In the long run understanding how style/view hierarchy works within a specific operating system helps to create a clear hierarchy implementation, while ultimately making code more reusable.

Next up in our How to Build a Better App UI Architecture series: Creating a custom view in Android. We can’t wait to share our insights.