Android Academy · Lesson

Colors and MaterialTheme

Apply consistent theming.

Lesson 4 of 413 steps

Colors and MaterialTheme is a free Android Academy lesson on CoddyKit. This is lesson 4 of 4. 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 4 lessons in total.

Colors in Compose

Compose represents colors with the Color class. There are ready-made values like Color.Red and Color.Blue.

You pass a Color to parameters such as a Text color or a background.

Text(
    text = "Hi",
    color = Color.Blue
)

Custom Color Values

Make any color from a hex code using Color(0xFFRRGGBB). The first two digits, FF, mean fully opaque.

For example, 0xFF6200EE is a purple.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Background Color

Use the background modifier to paint behind a composable. Add padding so the content does not touch the edges.

Order matters: background then padding fills the padded area.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

What Is MaterialTheme?

MaterialTheme is a system that holds your app's colors, fonts, and shapes in one place.

Composables read from it so your whole app stays consistent and easy to restyle.

MaterialTheme {
    Text("Themed app")
}

Theme Color Scheme

The theme's colorScheme provides named roles like primary, secondary, and background.

Reading these instead of fixed colors lets you change the look in one spot.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary and onPrimary

Each main color has an on partner for text drawn over it, like onPrimary.

Using primary as a background and onPrimary as text guarantees readable contrast.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Theme Typography

MaterialTheme also stores text styles in typography, such as titleLarge and bodyMedium.

Pass one to a Text style for consistent, well-sized text.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Light and Dark Schemes

You can build a scheme with lightColorScheme() or darkColorScheme() and pass it to MaterialTheme.

Switching schemes lets your app support both light and dark modes.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Customizing the Scheme

Override roles by naming them when you build a scheme. Here primary becomes a custom teal.

Everything that reads colorScheme.primary updates automatically.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Why Use the Theme?

Hardcoding colors everywhere makes redesigns painful. Reading from MaterialTheme means one change updates the whole app.

It also helps accessibility, since on-colors keep good contrast.

Surface and Background

The Surface composable applies a theme background color and elevation behind its content.

It is a clean way to give a card or screen the right base color.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Quick Check

Test your knowledge of colors and theming.

Answer it in the interactive lesson

Recap

You learned to use the Color class, custom hex colors, and the background modifier. MaterialTheme groups colorScheme, typography, and shapes.

Reading roles like primary and onPrimary keeps contrast and consistency, and supports light or dark schemes.

Great work finishing the styling course!

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 “Colors and MaterialTheme” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Colors and MaterialTheme”, 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 4 lessons in total.

What will I learn in “Colors and MaterialTheme”?

Apply consistent theming. 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 4 of 4.

How long does the “Colors and MaterialTheme” 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