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.

Lesson 2 of 513 steps

Themes & Styles is a free Android Academy lesson on CoddyKit. This is lesson 2 of 5. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, and your progress syncs across the web and the CoddyKit app. The Android Academy course includes 5 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn Kotlin with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 36
Lessons: 152

Start learning free View the full course

Frequently Asked Questions

Is the “Themes & Styles” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Themes & Styles”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Android Academy course includes 5 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 5.

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