Android Academy · Lesson

Themes & Styles

Define reusable Styles for widgets and Themes for your app. Set up Material 3 color roles, typography scale, custom fonts, and dark mode.

Themes & Styles is a free Android Academy lesson on CoddyKit — lesson 2 of 5. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 5 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Styles vs Themes

Two concepts often confused:

Style — a collection of view attributes applied to a single widget (e.g., text size, color, padding). Set with style="@style/MyButton".
Theme — a collection of semantic attributes applied to an Activity or app. Views look up theme attributes with ?attr/colorPrimary.

Defining a Style

Create styles in res/values/styles.xml. Styles can inherit from a parent:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Defining a Theme

Themes inherit from a Material 3 parent and override color and shape attributes:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Material 3 Color System

Material 3 uses semantic color roles rather than raw hex values. Key roles:

colorPrimary — main brand color
colorOnPrimary — text/icons on primary background
colorSecondary — accent color
colorSurface — card/sheet backgrounds
colorError — error states
colorBackground — window background

Color Resources

Define colors in res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Dark Theme

Material 3 DayNight themes handle dark mode automatically. Add a night variant for colors:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Typography

Material 3 defines a typographic scale. Use textAppearance attributes for consistent text:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Custom Fonts

Add a font to res/font/ and reference it from your theme or style:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Applying Theme to Activity

Set the theme in AndroidManifest.xml. You can use a different theme per Activity:

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

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Reading Theme Attributes in Code

Access any theme attribute in Kotlin code at runtime:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

Use Material Theme Builder (m3.material.io/theme-builder) to generate a complete Material 3 color scheme from your brand color. It exports ready-to-use XML files for colors.xml and themes.xml. This is the fastest way to get a consistent design system.

Quick Check

What is the key difference between a Style and a Theme in Android?

Recap: Themes & Styles

Consistent design starts here:

Styles — widget-level attributes, reusable across many views
Themes — app/activity-level attributes, semantic color roles
Material 3 color roles: colorPrimary, colorSurface, colorError, etc.
Dark mode via values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Typography scale via textAppearance attributes
Use Material Theme Builder to generate color schemes quickly

Next: draw custom views from scratch.

Frequently asked questions

Is the “Themes & Styles” lesson free?

Yes — the full text of “Themes & Styles” is free to read here on the web, and the Android Academy course includes 5 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “Themes & Styles”?

Define reusable Styles for widgets and Themes for your app. Set up Material 3 color roles, typography scale, custom fonts, and dark mode. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 5, so you can start here or from the beginning and move at your own pace.

How long does the “Themes & Styles” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy