Images & Resources

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Images & Resources without the intimidation
Get comfortable running Android Studio/Compose code yourself
Apply this concept in a real project right away

Let's think about it this way for a second

The `res/` folder in an Android project is split into sub-folders by resource type — `drawable/` (images, icons), `values/strings.xml` (text strings, translation-friendly), `values/colors.xml` (color palette). Instead of hardcoding strings/colors, referencing them from the resource files (e.g. `stringResource(R.string.app_name)`) makes it much easier to support multiple languages (localization) down the line.

Let's connect this to a real scenario

If you drop `res/drawable/logo.png` into your project, you can call it in Compose with `Image(painter = painterResource(R.drawable.logo), contentDescription = "App logo")` — you should add `contentDescription` for accessibility (screen readers). If you write `<string name="welcome_message">Welcome!</string>` in `res/values/strings.xml`, you can pull it into Compose with `stringResource(R.string.welcome_message)`.

res/drawable/ = image/icon resources, res/values/strings.xml = text strings
painterResource(), stringResource() = ways to pull resources into Compose
contentDescription = add it to support accessibility (screen readers)

Let's walk through it together

kotlin

@Composable
fun WelcomeHeader() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = "App logo",
            modifier = Modifier.size(80.dp)
        )
        Text(text = stringResource(id = R.string.welcome_message))
    }
}

You should see

You should see the welcome text pulled from strings.xml appear below the logo image on screen.

5-minute try-it

Add a string resource of your own to `res/values/strings.xml`, then pull it into Compose using `stringResource()`.

A quick word of caution

Dropping a large image (high-resolution photo) straight into `drawable/` without optimizing it — this bloats app size and can hurt download/install time — consider using WebP format or resizing the image.

Easy traps

Hardcoding text strings inside composable code (`Text("Welcome!")`) — you should use `strings.xml` for localization/maintainability
Setting `contentDescription = null` on an `Image` composable for a meaningful (non-decorative) image — this hurts accessibility

Now try it yourself

Add a string resource of your own to `res/values/strings.xml`, then pull it into Compose using `stringResource()`.

You'll know it worked when: You should see the welcome text pulled from strings.xml appear below the logo image on screen.