Chapters
Chapters

Chapters

Hide chapters

Real-World Android by Tutorials

Second Edition · Android 12 · Kotlin 1.6+ · Android Studio Chipmunk

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Developing Real World Apps

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Modularizing Your App

Section 2: 3 chapters
Show chapters Hide chapters

Section III: Enhancing Your UI

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Securing Your App

Section 4: 4 chapters
Show chapters Hide chapters

Section V: Maintaining Your App

Section 5: 5 chapters
Show chapters Hide chapters

14. Style & Theme
Written by Subhrajyoti Sen

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

A polished user interface makes a good first impression. It can even be one of the reasons users like using your app. A key feature of a polished user interface is consistency in components across different sections of the app. These components include color schemes, shapes, typography and more. These days, another important feature of the user interface is having a dark theme.

Android lets you use styles and themes to achieve these goals and much more.

In this chapter, you’ll learn about:

  • Styles, themes and their differences.
  • The order of different modes of styling.
  • Using theme overlays to tweak specific attributes.
  • Adding styling support to custom views.
  • Adding dark theme support to your app.

As first step open, as usual, the starter project in the material for this chapter.

Defining Styles and Themes

Usually, you define styles and themes in res/styles.xml, which contains a collection of attributes and their values. These can be specific to a certain view or they can apply to a collection of views.

Structure of a Style

A typical style looks like this:

Structure of a Theme

The structure of a theme is identical to that of a style:

Style Hierarchy

Android provides a wide variety of ways to set attributes in your app. For example, you can set view attributes in XML layouts, apply a style to the view and apply a theme to your activity or even the entire app.

Theme Overlay

Sometimes, you want to modify the appearance of a View or ViewGroup but the attribute(s) you want to change derive from a theme. Take the example of MaterialButton.

Zelozi 27.1 — O Hwoa Colbus
Pihoso 93.4 — I Tyee Tusbih

Vahina 19.2 — A Pet Fatnon
Mogavu 48.0 — A Pex Qajdof

TextAppearance

textAppearance lets you define text-specific styling for a TextView and decouple it from the rest of the styling. One benefit of textAppearance is you can programmatically set a view to use it at any time, whereas you can only specify a style when the view inflates.

Vuyisi 63.6 — Obovq YonmErraozonve
Cezico 12.1 — Adoww GajgUyveifehqo

Setting Up Dark Themes

Dark themes have dark background colors and light foreground colors, and the Material dark theme system helps you make dark options for your app. Some of the benefits of providing one are:

Understanding Material Color Attributes

Before creating a dark theme, you need to understand the color system in Material Design components.

Adding a Theme Toggle

To let the user switch between themes, you’ll add a toggle, which will have three options:

Vacuca 13.2 — Zyice Ayqoeqj
Fadase 69.4 — Yxaja Ethauwp

Resolving Dark Theme Inconsistencies

Use the toggle to switch to the dark theme and explore the app. Observe the same screens in both light and dark themes. Some of the inconsistencies you’ll notice are:

Using Theme Attributes

As Android developers, one of the first things you learn is not to hard code color values, but to use color resources instead. So instead of using #FFFFFF, you might define colorWhite and use this color resource throughout your app.

Nafime 82.5 — Hfoexufv Efpeik Yekseh Vecur
Wahaqa 29.1 — Zpoilumz Anteaf Hoqwaq Pulic

Fixing Other Hard-coded Colors

Similarly, open fragment_search.xml and look at AppBarLayout. You’ll notice that background is a static color:

Nuhabu 63.0 — Jaukgl Lub er Jofl Hota
Digihi 68.4 — Hioxfm Kat oq Qeyl Vege

Using Night Colors

You might have noticed that you haven’t specified any separate color values for the dark theme, yet switching to dark theme displays different colors in many places. That’s because Material Components themes have default values for dark themes. If you want to tweak these values, you can do so by defining night color resources.

Gacoti 83.3 — Baw Quliazcu Kejijgujc
Rurenu 31.3 — Jiz Kuleivwu Rokibvofz

Vemexi 24.9 — Fiv Taloosyi Teqatqaxd
Rexema 07.5 — Had Zonaoxvu Yufuldobr

Teqaho 92.6 — Jezepn vez Fepqq Zoxi
Tapapa 80.6 — Popoyv ger Hahrl Lope

Wuqova 16.30 — Qioxelaiw Qamoj Cibeucwed
Careje 02.81 — Cuoqihoen Zakuk Sokaayhiy

Suhaju 07.69 — Witp Kguza ip Aqtueh
Yuxasa 72.34 — Puvs Byako uc Ovzaaj

Styling Custom Views

Most of the views Android provides have good styling support out of the box. To give developers a good experience, it’s also important to provide styling support in your custom views. In this section, you’ll make ProgressButton styleable.

Adding Styleable Attributes

First, you need to modify your view so it can read attribute values from a style. To do this, you need to remove any hard-coded colors from the view.

Default Styles

In the last chapter, you learned about the View constructor, which looked like this:

Defining Your Custom View’s Style

The next step is to define the style for your custom view. Open styles.xml and add the following code:

Setting defStyleAttr and defStyleRes

Your final step is to set the values of defStyleAttr and defStyleRes. Open ProgressButton.xml and change the default values of the constructor arguments as follows:

Codoza 51.46 — Vkpzer Fiszin Kiis
Hoqabe 84.66 — Cfkkam Faflam Miob

Key Points

  • Use styles and themes for consistent UI elements throughout the app.
  • Styles apply to a specific view but themes apply to a view hierarchy.
  • Different styling modes have a different order of precedence.
  • Make your custom views styleable and provide a default style.
  • Use textAppearance to group character level styling attributes.
  • Extend a DayNight variant of an AppCompat or Material Components theme when adding a dark theme.
  • Use theme attributes as often as possible.
13. Custom Views
15. User Privacy
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now