Material Theming and Simple Animation: Superheroes and 30 Days

You can now build lists, grids and interactive screens. But if you hand your phone to a friend, the first thing they will judge is not your code. It is how the app looks and feels. Today you learn how to make an app look like it belongs on a modern phone, and how to make it feel alive with small, tasteful animations.

Think of a restaurant. The food (your features) matters most, but the plates, the lighting, the uniforms and the way the waiter brings dishes to the table all shape the experience. Material Design 3 is Google's complete design kit for apps: colours, type, shapes and motion that work together. Theming means defining those choices once so that every screen of your app uses them automatically.

By the end of this lesson you will be able to:

• Explain Material Design 3 and the idea of a theme.
• Define a ColorScheme with lightColorScheme and darkColorScheme and understand colour roles such as primary and onPrimary.
• Turn on dynamic colour safely on Android 12 and above.
• Support dark theme with isSystemInDarkTheme().
• Define custom Typography and Shapes and use them through MaterialTheme.
• Apply edge-to-edge basics with Scaffold insets.
• Animate size, colour and visibility with animateContentSize, animateDpAsState, animateColorAsState and AnimatedVisibility.
• Build an expand and collapse card.
• Complete the Superheroes practice app and the 30 Days project.

How this fits the bigger picture: This lesson follows Unit 3, Pathway 3 of Google's Android Basics with Compose course. It covers Intro to Material Design with Compose, Material Theming with Jetpack Compose, Simple animation with Jetpack Compose, Practice: Build Superheroes app and Project: Create a 30 Days App. Our apps are original, so we use fictional heroes and our own 30-day plan. Lesson 40 revisits theming in much more depth and lesson 41 does the same for animation.

1. Composables, modifiers and layouts (lessons 15 and 16)

You will use Row, Column, Card, Text, Image and Modifier chains.

2. State (lessons 17 and 19)

An animation needs a state to react to. A card has an expanded state, a Boolean. When it flips, the animation runs from the old look to the new one. If remember and mutableStateOf feel unfamiliar, revisit lesson 17.

3. Lazy lists and resources (lesson 21)

The Superheroes app is a LazyColumn of cards driven by a data class with @StringRes and @DrawableRes ids, exactly as in the Affirmations app.

4. Lambdas and function parameters with defaults (lessons 08 and 12)

Our theme function takes defaults like darkTheme: Boolean = isSystemInDarkTheme() and a content lambda.

What is Material Design?

Material Design is Google's design system: a shared set of rules, components and tools for building consistent, good-looking apps. Material 3 (often written M3 or Material You) is the current generation, and androidx.compose.material3 is its Compose library. Every Button, Card and TopAppBar you have used already comes from it.

A design system saves you from re-deciding things. You do not choose a new shade of blue for every button. You say "use the primary colour", and the system gives the same one everywhere.

The three pillars of a theme

MaterialTheme(
    colorScheme = ...,   // which colours, and what each is for
    typography  = ...,   // which text styles (sizes, weights, fonts)
    shapes      = ...    // how rounded the corners are
) {
    // your whole app lives here
}

Anything inside reads the values through MaterialTheme.colorScheme, MaterialTheme.typography and MaterialTheme.shapes. Change the theme in one place and the entire app changes.

Colour roles

A colour scheme is not a list of colours. It is a list of jobs, and each job has a colour. This is why dark mode is easy: you simply provide a second set of colours for the same jobs.

The golden rule: always pair a colour with its "on" colour. Text on a primary background must use onPrimary. The pair has been chosen to have enough contrast, so people with weak eyesight and people in bright sunlight can still read it (lessons 46 and 47 measure contrast).

Where do the colours come from?

Designers create schemes from a single seed colour using the Material Theme Builder tool, which can export Kotlin code. You can also write them by hand, as we will. Choose a primary that suits your app, then derive lighter and darker tones.

Dynamic colour

On Android 12 (API 31) and above, the phone can build a colour scheme from the user's wallpaper. Your app then matches the user's personalised look. You ask for it with dynamicLightColorScheme(context) or dynamicDarkColorScheme(context). On older phones those functions do not exist, so you must check the version and fall back to your own colours.

Dark theme

Many people prefer dark screens, especially at night, and on OLED phones dark screens can save some battery. Android tells you whether the user chose dark through isSystemInDarkTheme(). Your theme then picks darkColorScheme or lightColorScheme. A well-themed app needs no per-screen dark mode code at all.

Typography and shapes

M3 gives you a type scale, named styles that you use rather than hard-coding sizes: displayLarge, headlineSmall, titleMedium, bodyLarge, labelMedium and so on, fifteen in all. Use a style by name: Text("Hello", style = MaterialTheme.typography.headlineSmall). Shapes work likewise: small, medium and large (and two more, extraSmall and extraLarge) describe corner radii, and components pick the right one for their size.

We will theme the Superheroes app. Create a project Superheroes with package com.techbase.superheroes. If the wizard created a ui/theme folder with Color.kt, Theme.kt and Type.kt, we will replace their contents. If your Android Studio version names things differently, create the files yourself in a package com.techbase.superheroes.ui.theme. Any theme named SuperheroesTheme, or whatever the wizard generated from your project name, will do; just be consistent.

Step 1: Colours

package com.techbase.superheroes.ui.theme
import androidx.compose.ui.graphics.Color
// Light theme
val LightPrimary = Color(0xFF006B5A)
val LightOnPrimary = Color(0xFFFFFFFF)
val LightPrimaryContainer = Color(0xFF9CF2DC)
val LightOnPrimaryContainer = Color(0xFF00201A)
val LightSecondary = Color(0xFF8A5100)
val LightOnSecondary = Color(0xFFFFFFFF)
val LightSecondaryContainer = Color(0xFFFFDCBA)
val LightBackground = Color(0xFFFBFDF9)
val LightOnBackground = Color(0xFF191C1B)
val LightSurface = Color(0xFFFBFDF9)
val LightOnSurface = Color(0xFF191C1B)
// Dark theme
val DarkPrimary = Color(0xFF80D5C0)
val DarkOnPrimary = Color(0xFF00382E)
val DarkPrimaryContainer = Color(0xFF005143)
val DarkOnPrimaryContainer = Color(0xFF9CF2DC)
val DarkSecondary = Color(0xFFFFB86C)
val DarkOnSecondary = Color(0xFF4A2800)
val DarkSecondaryContainer = Color(0xFF693C00)
val DarkBackground = Color(0xFF191C1B)
val DarkOnBackground = Color(0xFFE0E3E0)
val DarkSurface = Color(0xFF191C1B)
val DarkOnSurface = Color(0xFFE0E3E0)

Color(0xFF006B5A) reads as: 0x means hexadecimal, FF is full opacity, and 006B5A are the red, green and blue amounts (so here, a deep teal). Notice the pattern: in light mode the primary is dark with white text on it; in dark mode the primary becomes light with dark text. That inversion is what keeps contrast strong in both.

These values are an original palette made for this lesson. For your own app, try the Material Theme Builder at m3.material.io to generate a palette from your brand colour.

Step 2: Typography

package com.techbase.superheroes.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
val AppTypography = Typography(
 displayLarge = TextStyle(
 fontFamily = FontFamily.Default,
 fontWeight = FontWeight.Bold,
 fontSize = 36.sp,
 lineHeight = 44.sp
 ),
 displayMedium = TextStyle(
 fontFamily = FontFamily.Default,
 fontWeight = FontWeight.Bold,
 fontSize = 24.sp,
 lineHeight = 30.sp
 ),
 labelSmall = TextStyle(
 fontFamily = FontFamily.Default,
 fontWeight = FontWeight.Medium,
 fontSize = 14.sp,
 lineHeight = 18.sp
 ),
 bodyLarge = TextStyle(
 fontFamily = FontFamily.Default,
 fontWeight = FontWeight.Normal,
 fontSize = 16.sp,
 lineHeight = 24.sp
 )
)

You only list the styles you want to change; the remaining styles in the type scale keep Material's defaults. Sizes are in sp (scale-independent pixels), which grow when the user raises the phone's font size. Always use sp for text and dp for everything else (lesson 15).

FontFamily.Default is the phone's normal font. To use a custom font, you place a font file in res/font, then write FontFamily(Font(R.font.my_font)). Fonts can also be downloaded on demand. Lesson 40 covers custom, downloadable and variable fonts. Remember that fonts have licences and add to your app size.

Step 3: Shapes

package com.techbase.superheroes.ui.theme
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp
val AppShapes = Shapes(
 small = RoundedCornerShape(50),
 medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp)
)

RoundedCornerShape(50) means 50 percent: fully round ends, which gives a square image a perfect circle, or a rectangle a "pill" look. RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp) rounds just two corners, which gives cards a distinctive leaf-like shape. Shapes you do not specify keep the defaults.

Step 4: The theme function

package com.techbase.superheroes.ui.theme
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
private val LightColors = lightColorScheme(
 primary = LightPrimary,
 onPrimary = LightOnPrimary,
 primaryContainer = LightPrimaryContainer,
 onPrimaryContainer = LightOnPrimaryContainer,
 secondary = LightSecondary,
 onSecondary = LightOnSecondary,
 secondaryContainer = LightSecondaryContainer,
 background = LightBackground,
 onBackground = LightOnBackground,
 surface = LightSurface,
 onSurface = LightOnSurface
)
private val DarkColors = darkColorScheme(
 primary = DarkPrimary,
 onPrimary = DarkOnPrimary,
 primaryContainer = DarkPrimaryContainer,
 onPrimaryContainer = DarkOnPrimaryContainer,
 secondary = DarkSecondary,
 onSecondary = DarkOnSecondary,
 secondaryContainer = DarkSecondaryContainer,
 background = DarkBackground,
 onBackground = DarkOnBackground,
 surface = DarkSurface,
 onSurface = DarkOnSurface
)
@Composable
fun SuperheroesTheme(
 darkTheme: Boolean = isSystemInDarkTheme(),
 dynamicColor: Boolean = false,
 content: @Composable () -> Unit
) {
 val colorScheme = when {
 dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
 val context = LocalContext.current
 if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
 }
 darkTheme -> DarkColors
 else -> LightColors
 }
 MaterialTheme(
 colorScheme = colorScheme,
 typography = AppTypography,
 shapes = AppShapes,
 content = content
 )
}

How it works:

• lightColorScheme(...) and darkColorScheme(...) build a scheme; roles you leave out use sensible defaults.
• private val keeps the two schemes inside this file. Only the theme function is public.
• The when has three branches, tried in order: use dynamic colour if wanted and the phone is Android 12 or newer (Build.VERSION_CODES.S is API 31); otherwise dark colours if the user is in dark mode; otherwise light colours.
• dynamicColor defaults to false here so that you can see your own palette while learning. The Android Studio template turns it on by default. Try dynamicColor = true on an Android 12+ emulator and change the wallpaper to see the colours follow.
• content: @Composable () -> Unit is the screen the theme wraps. MaterialTheme(..., content = content) passes it along.

The official Practice: Build Superheroes app asks for a scrolling list of heroes with a name, a description and a picture, themed with Material 3. Here is our version, with fictional heroes of our own invention.

The look we want

+------------------------------------------+
|        Superheroes   (top app bar)       |
+------------------------------------------+
| +--------------------------------------+ |
| | Captain Danfo                  [ o ] | |
| | Drives through any traffic jam       | |
| +--------------------------------------+ |
| +--------------------------------------+ |
| | Lady Jollof                    [ o ] | |
| | Feeds a whole street from one pot    | |
| +--------------------------------------+ |
+------------------------------------------+

Each card has text on the left and a round picture, 72 dp wide, on the right.

Resources

Add these strings:

<resources>
 <string name="app_name">Superheroes</string>
 <string name="hero1_name">Captain Danfo</string>
 <string name="hero1_description">Drives through any traffic jam and never loses the way.</string>
 <string name="hero2_name">Lady Jollof</string>
 <string name="hero2_description">Feeds a whole street from one enormous pot.</string>
 <string name="hero3_name">Professor Generator</string>
 <string name="hero3_description">Keeps the lights on when everyone else is in darkness.</string>
 <string name="hero4_name">The Mighty Umbrella</string>
 <string name="hero4_description">Stops the rain, shades the sun and still fits in a bag.</string>
 <string name="hero5_name">Agent Network</string>
 <string name="hero5_description">Finds one bar of signal anywhere in the city.</string>
</resources>

For the pictures, create three vector drawables hero1.xml, hero2.xml and hero3.xml with the same simple circle design you used in lesson 21 (any square viewport, a coloured background and a lighter circle). Replace them with real artwork for a finished app. Heroes 4 and 5 reuse hero1 and hero2.

The data

package com.techbase.superheroes.model
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import com.techbase.superheroes.R
data class Hero(
 @StringRes val nameRes: Int,
 @StringRes val descriptionRes: Int,
 @DrawableRes val imageRes: Int
)
val heroes = listOf(
 Hero(R.string.hero1_name, R.string.hero1_description, R.drawable.hero1),
 Hero(R.string.hero2_name, R.string.hero2_description, R.drawable.hero2),
 Hero(R.string.hero3_name, R.string.hero3_description, R.drawable.hero3),
 Hero(R.string.hero4_name, R.string.hero4_description, R.drawable.hero1),
 Hero(R.string.hero5_name, R.string.hero5_description, R.drawable.hero2)
)

The screen

package com.techbase.superheroes
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.techbase.superheroes.model.Hero
import com.techbase.superheroes.model.heroes
import com.techbase.superheroes.ui.theme.SuperheroesTheme
class MainActivity : ComponentActivity() {
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 enableEdgeToEdge()
 setContent {
 SuperheroesTheme {
 SuperheroesApp()
 }
 }
 }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SuperheroesApp() {
 Scaffold(
 modifier = Modifier.fillMaxSize(),
 topBar = {
 CenterAlignedTopAppBar(
 title = {
 Text(
 text = stringResource(R.string.app_name),
 style = MaterialTheme.typography.displayLarge
 )
 }
 )
 }
 ) { innerPadding ->
 HeroList(heroes = heroes, contentPadding = innerPadding)
 }
}
@Composable
fun HeroList(
 heroes: List<Hero>,
 contentPadding: PaddingValues,
 modifier: Modifier = Modifier
) {
 LazyColumn(
 modifier = modifier,
 contentPadding = PaddingValues(
 start = 16.dp,
 end = 16.dp,
 top = contentPadding.calculateTopPadding() + 8.dp,
 bottom = contentPadding.calculateBottomPadding() + 8.dp
 ),
 verticalArrangement = Arrangement.spacedBy(8.dp)
 ) {
 items(heroes, key = { it.nameRes }) { hero ->
 HeroItem(hero)
 }
 }
}
@Composable
fun HeroItem(hero: Hero, modifier: Modifier = Modifier) {
 Card(modifier = modifier.fillMaxWidth()) {
 Row(
 modifier = Modifier.padding(16.dp),
 verticalAlignment = Alignment.CenterVertically
 ) {
 Column(modifier = Modifier.weight(1f)) {
 Text(
 text = stringResource(hero.nameRes),
 style = MaterialTheme.typography.displayMedium
 )
 Text(
 text = stringResource(hero.descriptionRes),
 style = MaterialTheme.typography.bodyLarge
 )
 }
 Spacer(modifier = Modifier.width(16.dp))
 Image(
 painter = painterResource(hero.imageRes),
 contentDescription = null,
 modifier = Modifier
 .size(72.dp)
 .clip(MaterialTheme.shapes.small),
 contentScale = ContentScale.Crop
 )
 }
 }
}
@Preview(showBackground = true)
@Composable
fun SuperheroesLightPreview() {
 SuperheroesTheme(darkTheme = false) {
 SuperheroesApp()
 }
}
@Preview(showBackground = true, uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
@Composable
fun SuperheroesDarkPreview() {
 SuperheroesTheme(darkTheme = true) {
 SuperheroesApp()
 }
}

What the screen shows: a centred title bar reading Superheroes, then five cards. Each card has a bold name, a description, and on the right a circular picture (because shapes.small is a 50-percent rounded corner). Switch the emulator to dark mode (Settings > Display > Dark theme) and the colours change to the dark scheme, with no extra code in the screen.

Points to understand:

• enableEdgeToEdge() (from androidx.activity) lets the app draw behind the status and navigation bars, as modern apps do. It also makes the system bar icons readable against your colours. New projects from the wizard usually include this call already; if yours does, you do not need to add it twice. It is available in recent versions of the activity library; if it is red, update the dependency.
• Insets: because content may now sit under the system bars, Scaffold passes innerPadding describing how much space the top bar and system bars take. We add it to the list's contentPadding, so the first card starts below the top bar, the last card clears the navigation bar, and the list still scrolls behind them. That is why we use contentPadding and not Modifier.padding.
• @OptIn(ExperimentalMaterial3Api::class): some Material 3 components are labelled experimental, meaning their API may change. The OptIn annotation tells the compiler you accept that. Whether CenterAlignedTopAppBar still needs it depends on your library version; leaving it in is harmless.
• Modifier.weight(1f) inside a Row gives the text column all the space the picture does not use, so a long description wraps instead of pushing the picture off screen.
• clip(MaterialTheme.shapes.small) cuts the image to the theme's small shape. Change AppShapes and every clipped image changes. That is the point of a theme.
• Two previews, one light and one dark, let you check both modes without running the app. uiMode = UI_MODE_NIGHT_YES asks the preview for night mode.

Check the contrast

Try this once: in Color.kt change LightOnPrimary to a dark colour and look at a filled button or the title bar. Text on primary becomes hard to read. That is why role pairs exist.

Motion makes an interface understandable. When a card grows smoothly, you see what changed. When it just jumps, your eyes must work out what happened. Compose makes simple animations a one-line change.

The idea: animate from state

You never say "move this by 5 pixels per frame". Instead you describe the target for each state, and Compose animates between them whenever the state changes:

 expanded = false  ------ state flips ------>  expanded = true
 padding 8 dp                                   padding 24 dp
 colour  primaryContainer                       colour secondaryContainer
 Compose draws every frame in between, smoothly.

Tool 1: animateContentSize

The simplest tool. Add it to a modifier, and any change to the size of that composable's content is animated.

Column(
 modifier = Modifier
 .animateContentSize()
 .padding(16.dp)
) { /* content that can grow or shrink */ }

Import androidx.compose.animation.animateContentSize. Place it before the padding in the chain so the padding is included in the animated size.

Tool 2: animateDpAsState

Animates a Dp value, such as padding, size or elevation.

val extraPadding by animateDpAsState(
 targetValue = if (expanded) 24.dp else 0.dp,
 label = "extraPadding"
)

by works here for the same reason it did in lesson 17. animateDpAsState returns a state: its value moves step by step to the target. Imports: androidx.compose.animation.core.animateDpAsState and androidx.compose.runtime.getValue. The label is a name that animation tools use when inspecting your app (lesson 44).

Tool 3: animateColorAsState

Animates between two colours:

val containerColor by animateColorAsState(
 targetValue = if (expanded) {
 MaterialTheme.colorScheme.secondaryContainer
 } else {
 MaterialTheme.colorScheme.primaryContainer
 },
 label = "containerColor"
)

Because the colours come from the theme, the animation works in dark mode too.

Tool 4: AnimatedVisibility

Fades and slides content in and out when a condition changes, instead of popping it in:

AnimatedVisibility(visible = expanded) {
 Text("More details appear here")
}

Import androidx.compose.animation.AnimatedVisibility.

Controlling the feel: spring and tween

animateContentSize and the animate*AsState functions take an animationSpec. Two common ones:

Keep animations short and subtle. A card that bounces for two seconds becomes annoying quickly, and some users have turned animations off in their phone's settings for comfort. Lesson 41 covers the whole animation toolbox.

Now we combine everything: a card that expands to show more, with animated colour and spacing. We upgrade the Hero data to include a longer story, and add a state to each card.

Add a field @StringRes val storyRes: Int to Hero, give each hero a long heroN_story string in strings.xml, and add the extra argument in each Hero(...) line, for instance Hero(R.string.hero1_name, R.string.hero1_description, R.drawable.hero1, R.string.hero1_story). (The solution at the end of the lesson avoids the extra resources for brevity.)

Then replace HeroItem with:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.TextButton
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun HeroItem(hero: Hero, modifier: Modifier = Modifier) {
 var expanded by remember { mutableStateOf(false) }
 val containerColor by animateColorAsState(
 targetValue = if (expanded) {
 MaterialTheme.colorScheme.secondaryContainer
 } else {
 MaterialTheme.colorScheme.primaryContainer
 },
 label = "containerColor"
 )
 Card(
 modifier = modifier.fillMaxWidth(),
 colors = CardDefaults.cardColors(containerColor = containerColor)
 ) {
 Column(
 modifier = Modifier
 .animateContentSize(
 animationSpec = spring(
 dampingRatio = Spring.DampingRatioLowBouncy,
 stiffness = Spring.StiffnessMedium
 )
 )
 .padding(16.dp)
 ) {
 Row(verticalAlignment = Alignment.CenterVertically) {
 Column(modifier = Modifier.weight(1f)) {
 Text(
 text = stringResource(hero.nameRes),
 style = MaterialTheme.typography.displayMedium
 )
 Text(
 text = stringResource(hero.descriptionRes),
 style = MaterialTheme.typography.bodyLarge
 )
 }
 Spacer(modifier = Modifier.width(16.dp))
 Image(
 painter = painterResource(hero.imageRes),
 contentDescription = null,
 modifier = Modifier
 .size(72.dp)
 .clip(MaterialTheme.shapes.small),
 contentScale = ContentScale.Crop
 )
 }
 AnimatedVisibility(visible = expanded) {
 Text(
 text = stringResource(hero.storyRes),
 style = MaterialTheme.typography.bodyLarge,
 modifier = Modifier.padding(top = 12.dp)
 )
 }
 TextButton(onClick = { expanded = !expanded }) {
 Text(if (expanded) "Show less" else "Show more")
 }
 }
 }
}

What the screen shows: each card has a Show more text button. Tapping it flips expanded. The card's background shifts smoothly from the primary container colour to the secondary container colour, the story text fades and slides in, and the card grows to fit it with a slightly springy motion. Tapping Show less plays the same animation in reverse.

Details worth knowing:

• expanded is plain state per card. Because HeroItem is called once per hero, each hero has its own expanded. (If you want the open/closed state to survive rotation, use rememberSaveable, lesson 19. And because lazy items scroll out of composition, rememberSaveable keeps the state when the item returns to the screen; plain remember does not.)
• !expanded flips a Boolean: true becomes false and false becomes true.
• The button text is hard-coded here to keep the example short. In your finished app, put Show more and Show less in strings.xml.
• If you want an accessibility improvement, replace the text button with an icon button that carries a contentDescription of "Expand" or "Collapse" (lesson 47).

Mistake #1: Hard-coding colours in screens. The wrong code: Text("Hi", color = Color(0xFF006B5A)) in many places. The problem: dark mode and rebranding require editing every file, and the colour may be unreadable in dark mode. The fix: use MaterialTheme.colorScheme.primary and its siblings, and define colours only in the theme.

Mistake #2: Mismatched role pairs. The wrong code: text coloured onSurface on a primary background. The problem: low contrast, so some users cannot read it. The fix: pair primary with onPrimary, primaryContainer with onPrimaryContainer, and so on. Card, Button and Surface already choose the right content colour when you use their defaults.

Mistake #3: Calling dynamic colour on old phones. The wrong code: dynamicLightColorScheme(context) with no version check. The problem: the app crashes on Android 11 or older. The fix: guard it with Build.VERSION.SDK_INT >= Build.VERSION_CODES.S as in our theme.

Mistake #4: Text sizes in dp. The wrong code: fontSize = 16.dp. The problem: it will not compile (a TextUnit is expected), and where it is forced, text will ignore the user's font-size setting. The fix: text always uses sp: fontSize = 16.sp.

Mistake #5: Using Modifier.padding(innerPadding) on a scrolling list under a top bar. The problem: it works, but content cannot scroll behind the bars, so it looks cut off instead of flowing underneath. The fix: pass the inset values to contentPadding, as the Superheroes list does.

Mistake #6: animateContentSize after padding. The wrong code: Modifier.padding(16.dp).animateContentSize(). The problem: the padding is outside the animated area and jumps. The fix: put animateContentSize() before the padding.

Mistake #7: Forgetting by imports for animated values. The symptom: animateDpAsState returns a State<Dp> and using it as Dp fails. The fix: import androidx.compose.runtime.getValue and write val x by animateDpAsState(...), or use .value.

Mistake #8: Over-animating. The problem: long, bouncy effects on every element make the app feel slow and can bother users sensitive to motion. The fix: animate only to explain a change, keep it brief (around 150 to 400 ms) and respect that some users disable animations.

Mistake #9: Testing only in light mode. The symptom: an unreadable screen at night. The fix: add a dark @Preview for every screen and flip the emulator's dark theme switch before you finish.

Mistake #10: Theme not wrapping the content. The symptom: the app ignores your colours. The cause: setContent { SuperheroesApp() } without SuperheroesTheme { ... } around it, so the screen uses defaults. The fix: wrap the root composable in the theme, and in every preview too.

Question 1. What three things does MaterialTheme bundle together?

Question 2. Why must you pair primary with onPrimary?

Question 3. What is dynamic colour and why do you check Build.VERSION.SDK_INT?

Question 4. Which animation tool would you use to (a) smoothly resize a card when text is added, (b) fade a text block in and out, (c) change a colour between two states?

Question 5. Why is animateContentSize() placed before padding in the modifier chain?

Go deeper: official resources

• Android Basics with Compose, Unit 3: Material Design and animation: the official pathway this lesson follows.
• Jetpack Compose theming codelab: a deeper tour of Material 3 theming.
• Jetpack Compose animation codelab: more animation APIs, which lesson 41 builds on.
• Android Basics with Compose course overview: all units.