Jetpack Compose: UI Components

Jetpack Compose is a modern, fully declarative UI toolkit for Android that simplifies the UI development process. It allows developers to build native UIs with Kotlin code, making it easier to create and maintain apps. In this blog, we’ll explore some common UI widgets in Jetpack Compose, such as Text, Image, Button, RadioButton, Checkbox, and TextField, and demonstrate how to use them in Compose with examples. If you're transitioning from XML-based layouts, we'll also briefly compare these components to their XML counterparts.

1. TextView (Jetpack Compose’s Text)

In Jetpack Compose, the Text composable is used to display text on the screen. It is more flexible than the XML TextView, as you can easily style and manipulate the text directly with Kotlin code.

Example:

Text(
    text = "Hello, Jetpack Compose!",
    style = MaterialTheme.typography.h6,
    color = Color.Black
)

In this example:

• text is the string to display.
• style is used to apply predefined text styles like h6, which defines the text size and weight.
• color allows customization of the text color.

Comparison with XML:

• In XML, you would define a TextView and set properties like android:text, android:textSize, and android:textColor.

2. ImageView (Jetpack Compose’s Image)

The Image composable is used for displaying images in Jetpack Compose. It can load images from various sources, including resources, URIs, and assets.

Example:

Image(
    painter = painterResource(id = R.drawable.my_image),
    contentDescription = "An image from resources",
    modifier = Modifier.size(200.dp)
)

• painter is used to load the image.
• contentDescription is important for accessibility, especially for users with visual impairments.
• modifier controls the size, alignment, and other layout properties of the image.

Comparison with XML:

• In XML, ImageView is used, and you set the image using android:src or android:background.

3. Button (Jetpack Compose’s Button)

A Button in Jetpack Compose is simple to use and allows you to define actions when clicked. It's declarative and easy to customize.

Example:

Button(onClick = { /* Handle click action */ }) {
    Text("Click Me")
}

• The onClick lambda defines the action to be performed when the button is clicked.
• The content inside the button is defined by the Text composable.

Comparison with XML:

• In XML, you would use a Button and define an android:onClick attribute for actions.

Get Manish Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. RadioButton (Jetpack Compose’s RadioButton)

A RadioButton allows users to select one option from a set of choices. It's similar to the RadioButton in XML, but the state management is easier in Compose.

Example:

var selectedOption by remember { mutableStateOf("option1") }

Column {
    RadioButton(
        selected = selectedOption == "option1",
        onClick = { selectedOption = "option1" }
    )
    Text("Option 1")
    RadioButton(
        selected = selectedOption == "option2",
        onClick = { selectedOption = "option2" }
    )
    Text("Option 2")
}

• selected determines whether the radio button is selected.
• onClick changes the selected option.
• State management in Compose is simpler, using remember and mutableStateOf.

Comparison with XML:

• In XML, you would use RadioGroup and RadioButton, managing state and selection manually with listeners.
• Compose automatically handles the state for you, making it more concise and easier to manage.

5. Checkbox (Jetpack Compose’s Checkbox)

The Checkbox composable in Jetpack Compose allows users to select or deselect an option. It is straightforward to use and offers declarative state management.

Example:

var isChecked by remember { mutableStateOf(false) }

Checkbox(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

• checked represents the state of the checkbox.
• onCheckedChange is called when the checkbox is clicked, allowing you to toggle its state.

Comparison with XML:

• In XML, you’d use a CheckBox and handle state changes with a setOnCheckedChangeListener.
• Compose simplifies this with a more declarative approach, allowing state management to be handled with mutableStateOf.

6. EditText (Jetpack Compose’s TextField)

The TextField composable is used for user input, similar to the EditText in XML. It supports both single-line and multi-line input, and it can be customized with various styles and actions.

Example:

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter text") },
    modifier = Modifier.fillMaxWidth()
)

• value holds the current text in the field.
• onValueChange updates the text state when the user types.
• label is used to show a label inside the text field.

Comparison with XML:

• In XML, you’d use EditText and define properties like android:text, android:hint, and android:inputType.
• Compose’s TextField provides better state management and flexibility with the UI, making it easier to handle input dynamically.

To See the Live rendering in your Android studio. You can checkout the codebase from my repository composeDemo. Open UiWidgetDemo class and see the preview.

Happy coding!!