Y Youdroid
About Posts Topics
Android Beginners

Lesson 10: Displaying Text and Images

Ahmad Najar Ahmad Najar • • 1 min read

Displaying Text and Images

We've used Text a lot already. Let's cover it properly, then add images.

Styling text

Text(
    text = "Task List",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    color = Color.DarkGray
)

Note: font sizes use sp (scale-independent pixels), not dp — sp respects the user's system font-size accessibility setting, dp doesn't. Always use sp for text, dp for everything else.

Built-in icons

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon

Icon(
    imageVector = Icons.Filled.Favorite,
    contentDescription = "Favorite"
)

Compose Material ships hundreds of ready-made icons under Icons.Filled, Icons.Outlined, etc. — you rarely need to import custom icon assets for common actions like search, delete, or favorite.

contentDescription — don't skip this

Every Icon and Image takes a contentDescription parameter. This is read aloud by screen readers for visually impaired users — set it to a real description, or explicitly to null if the image is purely decorative. Skipping this is one of the most common accessibility mistakes in beginner apps.

Loading a real image from a URL

Compose's core library only handles local images (from your res/drawable folder) out of the box. Loading images from the internet needs a small library called Coil, which we'll add properly in lesson 25 — for now, use a local drawable or a colored Box as a placeholder.

Next: Lesson 11 — Buttons and handling user input.

Android Beginners