Core Interactive Components in Jetpack Compose: Buttons, Images, and More

Essential Interactive Components: "Button", "TextField", and "Image"

Now that you understand the magic of state, you can unlock the full potential of Compose's interactive components. In this post, we'll cover three of the most common elements you'll use in every single app: "Button", "TextField" (for user input), and "Image".

---

1. "Button": Handling User Clicks

A Button is a simple composable that detects clicks. Its most important parameter is onClick, a lambda that executes when the button is pressed. We use this to trigger state changes.

@Composable
fun ButtonExample() {
    var message by remember { mutableStateOf("Click the button!") }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(message)
        Button(
            onClick = { message = "Button was clicked!" },
            modifier = Modifier.padding(top = 8.dp)
        ) {
            // This is the content inside the button
            Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
            Spacer(Modifier.size(ButtonDefaults.IconSpacing))
            Text("Click Me")
        }
    }
}

---

2. "TextField": Getting User Input

A TextField allows users to type text. It's a perfect example of controlled components and state management. It requires two key parameters:

• value: The current text to display. This must be backed by a state variable.
• onValueChange: A lambda that is called every time the user types or deletes a character. In this lambda, you must update your state variable.

@Composable
fun TextFieldExample() {
    // 1. Create a state to hold the text.
    var text by remember { mutableStateOf("") }

    Column {
        TextField(
            value = text, // 2. Display the current state.
            onValueChange = { newText ->
                text = newText // 3. Update the state when the user types.
            },
            label = { Text("Enter your name") },
            modifier = Modifier.fillMaxWidth()
        )
        Text(
            text = "Hello, $text!",
            modifier = Modifier.padding(top = 8.dp)
        )
    }
}

---

3. "Image": Displaying Visuals

The Image composable is used to display graphics. You can load images from your project's drawable resources or from the internet (using a library).

• painter: The actual graphic to be drawn. Use painterResource for local drawables.
• contentDescription: A crucial accessibility feature. It describes the image for screen readers and should always be provided.

@Composable
fun ImageExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Image from project resources:")
        // Make sure you have an image in your res/drawable folder
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "Android Launcher Background",
            modifier = Modifier.size(150.dp)
        )
    }
}

---

Key Concepts Recap

• Button: Uses the onClick lambda to respond to user taps and trigger state changes.
• TextField: A "controlled component" that requires a state variable for its value and an onValueChange lambda to update that state.
• Image: Displays graphics using a painter. Always provide a contentDescription for accessibility.
• State is Key: All interactive components rely on state to function correctly.