CodeWithPK

🧩 Chapter 3 – Text, Image, Button & TextField Composables (and the Secret Sauce: State 🔁)

Chapter 3 – Text, Image, Button

Welcome back to the Compose series on codewithpk.com 👋

In the last chapter, we created our first Compose project and explored the structure.
Now it’s time to build real UI — text, images, buttons, and input fields — and understand the magic ingredient behind Compose: State.

This is the chapter where things actually start moving on screen.
Let’s go step by step.

📝 1. The Text Composable

The simplest composable in Jetpack Compose is Text().
It’s the Compose version of TextView, but way more powerful and customizable.

Here’s the basic syntax:

@Composable
fun TextExample() {
    Text(text = "Hello, Jetpack Compose!")
}

Now, let’s make it look less boring.

You can customize text with properties like fontSize, fontStyle, fontWeight, color, and textAlign.

Example:

@Preview(showBackground = true)
@Composable
fun StyledText() {
    Text(
        text = "Hello, CodeWithPK!",
        fontSize = 36.sp,
        fontStyle = FontStyle.Italic,
        fontWeight = FontWeight.ExtraBold,
        color = Color.Red,
        textAlign = TextAlign.Center
    )
}

💡 Dev Trick:

  • Use sp (scale-independent pixels) for font size.
  • Use dp for dimensions (width, height, padding).
  • Always import colors from androidx.compose.ui.graphics.Color, not android.graphics.Color.

If you hold Ctrl + Click on the Text() composable in Android Studio, you’ll see all available properties — like maxLines, overflow, and fontFamily.

🖼️ 2. The Image Composable

Next up — images.

In the XML world, we used ImageView.
In Compose, you’ll use the Image() composable.

Here’s a simple example using a drawable resource:

@Preview(showBackground = true)
@Composable
fun ImageExample() {
    Image(
        painter = painterResource(id = R.drawable.heart_icon),
        contentDescription = "Heart Icon ❤️"
    )
}

💡 Key Properties You Should Know:

Property What it does
contentDescription Accessibility label for screen readers
colorFilter Tint or recolor the image
contentScale Defines how the image scales inside the layout (Crop, Fit, FillBounds)

Example with tint:

Image(
    painter = painterResource(R.drawable.heart_icon),
    contentDescription = "Blue Heart",
    colorFilter = ColorFilter.tint(Color.Blue),
    contentScale = ContentScale.Crop
)

💡 Dev Trick:
Want to load an image from a URL?
Use Coil — a third-party image loader built for Compose.

implementation("io.coil-kt:coil-compose:2.6.0")

Example:

Image(
    painter = rememberAsyncImagePainter("https://example.com/photo.jpg"),
    contentDescription = "Remote Image"
)

🔘 3. The Button Composable

Buttons in Compose are cleaner than the XML nightmares we used to deal with.

Example:

@Preview(showBackground = true)
@Composable
fun ButtonExample() {
    Button(
        onClick = { println("Button Clicked!") },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Black,
            contentColor = Color.White
        ),
        enabled = true
    ) {
        Text("Click Me")
    }
}

💡 Dev Trick:
You can place anything inside a Button — text, icons, even images.

Example:

Button(onClick = { /* TODO */ }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
    Spacer(modifier = Modifier.width(8.dp))
    Text("Like")
}

You can also customize elevation, border, or shape:

Button(
    onClick = { /* Click */ },
    border = BorderStroke(2.dp, Color.Red),
    shape = RoundedCornerShape(12.dp)
) {
    Text("Rounded Button")
}

✏️ 4. TextField — Taking User Input

Now for one of the most important composables: TextField().

Think of it as the Compose version of EditText, but 100x easier to manage.

Basic usage:

@Preview(showBackground = true)
@Composable
fun TextFieldExample() {
    TextField(
        value = "Hello CodeWithPK",
        onValueChange = {},
        label = { Text("Your Name") },
        placeholder = { Text("Enter text here...") }
    )
}

Looks good, right?
But if you type something in the preview’s interactive mode, nothing happens.
Why?
Because we hardcoded the value.

We need state.

🔁 5. Understanding State in Jetpack Compose

Jetpack Compose is data-driven.
That means your UI reflects whatever state (data) you give it.

If the data changes, Compose automatically recomposes the affected UI — no notifyDataSetChanged(), no invalidateViews(), nothing.

Let’s fix our TextField to actually work.

@Preview(showBackground = true)
@Composable
fun TextFieldWithState() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Enter Something") },
        placeholder = { Text("Type here...") }
    )
}

Here’s what’s happening:

  • mutableStateOf("") creates a reactive variable.
  • remember ensures the state isn’t reset during recomposition.
  • When the user types, onValueChange updates the state.
  • Compose detects the change and redraws the UI automatically.

💡 Dev Trick:
If you forget remember, the state resets every time Compose recomposes.
That’s the #1 reason your TextField won’t hold user input.

🧠 Behind the Scenes: Composition & Recomposition

When you run this example, Compose follows three steps:

  1. Initial Composition — It renders your UI for the first time using the current data.
  2. Event Handling — The user interacts with the app (e.g., types text or clicks a button).
  3. Recomposition — Compose re-calls your composable with the new data and updates only the changed parts.

Example Flow:

User types "A" → state changes → recomposition → UI updates instantly

No manual UI updates, no lifecycle juggling.

💡 Fun Fact: This reactive pattern is similar to how React, SwiftUI, and Flutter work — but Compose does it natively with Kotlin.

🔍 6. Bonus: Combine Composables

Because everything in Compose is modular, you can combine multiple composables together easily.

Example: a simple login card.

@Preview(showBackground = true)
@Composable
fun LoginCard() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text("Login", fontSize = 28.sp, fontWeight = FontWeight.Bold)
        TextField(value = username, onValueChange = { username = it }, label = { Text("Username") })
        TextField(value = password, onValueChange = { password = it }, label = { Text("Password") })
        Button(onClick = { println("Username: $username, Password: $password") }) {
            Text("Submit")
        }
    }
}

Congrats — you just built a fully functional form with no XML and no boilerplate.

🧩 Final Thoughts

In this chapter, you’ve learned:
✅ How to use basic composables — Text, Image, Button, and TextField
✅ How to style and customize them
✅ How state drives UI and recomposition
✅ And how to combine everything into interactive, dynamic layouts

The takeaway?

“In Jetpack Compose, you don’t update the UI — you update the data, and the UI updates itself.” – codewithpk.com

Next up in Chapter 4, we’ll dive into Layouts and Modifiers — how to arrange composables beautifully using Row, Column, Box, and all those secret layout powers that make Compose addictive.

Made with ❤️ by codewithpk.com
Keep coding. Keep learning. Keep building.

Previus Post
🧩 Chapter
Next Post
🧩 Chapter

Leave a comment