Android Academy · Lesson

Text, Image, and Button

Use the basic built-in composables.

Lesson 3 of 413 steps

Text, Image, and Button is a free Android Academy lesson on CoddyKit. This is lesson 3 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.

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?

Answer it in the interactive lesson

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.

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 “Text, Image, and Button” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Text, Image, and Button”, 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

← Back to Android Academy