In Part 3 you showed one line of text. Now let's build a real screen. In this Jetpack Compose tutorial for beginners, you'll learn how to place text, images and spacing on the screen, and you'll build a simple profile card step by step.

What Is Jetpack Compose? (In One Minute)

Jetpack Compose is how we build screens in modern Android. Instead of drawing screens with a mouse, you describe them in Kotlin:

• "Show this text."
• "Put an image above it."
• "Center everything."

Compose reads your description and draws it. When your data changes, Compose redraws the screen for you automatically.

Each piece of UI is a function marked with @Composable. We call these functions composables.

The 3 Basic Layouts: Column, Row, Box

Almost every screen is built from three simple boxes:

Column {
    Text("First")
    Text("Second")   // appears below "First"
}

Row {
    Text("Left")
    Text("Right")    // appears next to "Left"
}

Modifiers: Size, Space and Style

A Modifier changes how something looks or behaves. You chain them with dots:

Text(
    text = "Hello!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Yellow)
)

Common modifiers you'll use every day:

• .padding(16.dp) – adds empty space around
• .fillMaxWidth() – takes the full width
• .fillMaxSize() – takes the whole screen
• .size(100.dp) – sets width and height
• .background(Color.Blue) – adds a background color
• .clip(CircleShape) – cuts it into a circle

dp is a size unit that looks the same on every phone, big or small. For text size, we use sp.

Tip: Order matters! .padding().background() and .background().padding() look different. Try both and see.

Let's Build a Profile Card

Open MainActivity.kt and add this new composable below everything else:

@Composable
fun ProfileCard(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = "Profile picture",
            modifier = Modifier
                .size(120.dp)
                .clip(CircleShape)
                .background(Color.LightGray)
        )

        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = "Shakil Ahmed",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
        Text(
            text = "Android Developer",
            color = Color.Gray
        )

        Spacer(modifier = Modifier.height(16.dp))

        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            Text("📍 Dhaka")
            Text("📱 5 Apps")
        }
    }
}

Now show it. Inside setContent, replace Greeting(...) with:

ProfileCard(modifier = Modifier.padding(innerPadding))

Press Run ▶. You'll see a centered profile card with a round picture, a name, a job title and a small info row. 🎉

If you see red words, click them and press Alt + Enter to add the missing imports.

Let's Understand It

• Column(...) stacks everything from top to bottom.
• horizontalAlignment = Alignment.CenterHorizontally centers items left-to-right.
• verticalArrangement = Arrangement.Center centers items top-to-bottom.
• Image(...) shows a picture. contentDescription describes it for people using screen readers. Always fill it in!
• Spacer(...) is just empty space. It's the easiest way to add gaps.
• Row(...) puts the two small texts side by side.

Use Your Own Photo

1. Copy a photo (for example me.jpg) on your computer.
2. In Android Studio, open app → res → drawable and paste it there.
3. Rename it to lowercase letters only, like me.jpg.
4. Change the image line to:

painter = painterResource(id = R.drawable.me),

Add contentScale = ContentScale.Crop inside Image(...) so the photo fills the circle nicely.

Try It Yourself (Small Challenges)

1. Change the name color to blue: color = Color.Blue.
2. Add a third item to the Row, like Text("⭐ 4.9").
3. Wrap everything in a Card { ... } to give it a shadow.

Challenges are where the real learning happens. Don't skip them!

Frequently Asked Questions

What is the difference between dp and sp? dp is for sizes and spacing. sp is for text, and it also respects the user's font size setting.

Is Jetpack Compose better than XML layouts? For new apps, yes. Compose is Google's recommended way to build Android UI. It needs less code and is easier to read.

Why do I need contentDescription? It helps blind and low-vision users who use screen readers. If an image is only decoration, you can set it to null.

Quick Recap

• Column = top to bottom, Row = side by side, Box = on top of each other.
• Modifier controls size, spacing and style.
• Spacer adds gaps.
• You built a real profile card screen!

Right now our screen just sits there. In Part 6: Buttons, Clicks and State, we'll make it respond when you tap it.