0Pricing
Android Academy · Lesson

Text, Image, and Button

Use the basic built-in composables.

Text, Image, and Button is a free Android Academy lesson on CoddyKit — lesson 3 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Built-in Composables

Compose ships with ready-made composables for common UI. Three you will use constantly are Text, Image, and Button.

The Text Composable

Text displays a string. Its most important parameter is text.

@Composable
fun Title() {
    Text(text = "My App")
}

Styling Text

Text accepts many styling parameters such as fontSize, color, and fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp vs dp

Font sizes use .sp (scale-independent pixels) so they respect the user's font-size accessibility setting. Layout sizes use .dp (density-independent pixels).

Use sp for text, dp for everything else.

The Image Composable

Image displays a picture. Use painterResource to load a drawable, and always provide contentDescription for accessibility.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription is read aloud by screen readers. For decorative images that carry no meaning, pass null. For meaningful images, give a short description.

The Button Composable

Button is a clickable element. Its key parameter is onClick, a lambda run when tapped. The button's label goes in its content lambda — usually a Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Reacting to Clicks

The onClick lambda is where you put your logic — update state, navigate, or call a function.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Content Lambdas

Notice Button takes a trailing content lambda. Anything you put inside renders as the button's content, so a button can hold an icon plus text, not just a label.

Button(onClick = { }) {
    Text(text = "Save")
}

Combining Them

Real UI mixes these composables. Here a title, an image, and a button stack inside a Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Many More Exist

Beyond these three, Compose offers TextField, Icon, Checkbox, Switch, and many more. The same pattern applies: pass parameters and content lambdas.

Quick Check

Which parameter of Button runs your code when the user taps it?

Recap

You met three core composables:

  • Text — shows strings; style with fontSize, color (use sp).
  • Image — painterResource + contentDescription.
  • Button — onClick lambda plus a content lambda.

Frequently asked questions

Is the “Text, Image, and Button” lesson free?

Yes — the full text of “Text, Image, and Button” is free to read here on the web, and the Android Academy course includes 4 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 “Text, Image, and Button”?

Use the basic built-in composables. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Text, Image, and Button” 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

  1. What Is Jetpack Compose?
  2. Your First Composable
  3. Text, Image, and Button
  4. Previews and Hot Reload
← Back to Android Academy