Jetpack Compose has revolutionized Android UI development by providing a declarative approach to building modern and dynamic user interfaces. If you’re new to Jetpack Compose or looking for a comprehensive guide on UI components, this blog will walk you through the essential elements used to create stunning Android apps. From basic text displays to complex interactive components, we’ve got it all covered.

Why Jetpack Compose?

Jetpack Compose simplifies UI development by allowing developers to create interfaces with less boilerplate code while improving performance and maintainability. Key benefits include:

• Declarative UI: Define UI components with a reactive programming model.
• Interoperability: Easily integrates with existing Views.
• State Management: Works seamlessly with LiveData, Flow, and ViewModel.
• Customization: Highly flexible and adaptable for various design needs.

Now, let’s explore the core UI components available in Jetpack Compose!

Basic UI Components

These foundational elements are the building blocks of any Compose-based UI.

1. Text

The Text composable is used to display text on the screen.

Text(text = "Hello, Jetpack Compose!")

2. Button

A simple button for user interactions.

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

3. OutlinedButton

A button with an outlined border.

OutlinedButton(onClick = { /* Handle click */ }) {
    Text("Outlined Button")
}

4. IconButton

A button designed to hold an icon.

IconButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Default.Favorite, contentDescription = "Favorite")
}

5. FloatingActionButton (FAB)

A circular button often used for primary actions.

FloatingActionButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

Input Components

Capture user input effectively with these components.

1. TextField

Enables users to enter text.

var text by remember { mutableStateOf("") }
TextField(value = text, onValueChange = { text = it }, label = { Text("Enter text") })

2. Checkbox

Used for boolean input.

var checked by remember { mutableStateOf(false) }
Checkbox(checked = checked, onCheckedChange = { checked = it })

3. Switch

A toggle switch for binary states.

var switched by remember { mutableStateOf(false) }
Switch(checked = switched, onCheckedChange = { switched = it })

4. RadioButton

For mutually exclusive options.

RadioButton(selected = true, onClick = { /* Handle selection */ })

Selection Components

1. DropdownMenu

A dropdown for multiple options.

DropdownMenu(expanded = true, onDismissRequest = { /* Handle dismiss */ }) {
    DropdownMenuItem(text = { Text("Option 1") }, onClick = { /* Handle click */ })
}

2. Slider

For selecting values within a range.

var sliderValue by remember { mutableStateOf(0f) }
Slider(value = sliderValue, onValueChange = { sliderValue = it }, valueRange = 0f..100f)

Layout Components

Create structured layouts using these flexible components.

1. Column

Arranges elements vertically.

Column {
    Text("Item 1")
    Text("Item 2")
}

2. Row

Arranges elements horizontally.

Row {
    Text("Left")
    Spacer(modifier = Modifier.width(8.dp))
    Text("Right")
}

3. Box

For overlaying components.

Box {
    Text("Hello in a Box!")
}

4. Card

A container with elevation and rounded corners.

Card(elevation = 4.dp) {
    Text("This is a card!")
}

List & Lazy Components

Efficiently display lists using these components.

1. LazyColumn

A vertically scrolling list optimized for performance.

LazyColumn {
    items(10) { index ->
        Text("Item #$index")
    }
}

2. LazyRow

A horizontally scrolling list.

LazyRow {
    items(10) { index ->
        Text("Item #$index")
    }
}

Dialogs & Notifications

1. AlertDialog

A pop-up dialog box.

AlertDialog(
    onDismissRequest = { /* Handle dismiss */ },
    confirmButton = {
        Button(onClick = { /* Confirm action */ }) { Text("OK") }
    },
    title = { Text("Dialog Title") },
    text = { Text("This is a dialog message.") }
)

2. Snackbar

Temporary notification messages.

val snackbarHostState = remember { SnackbarHostState() }
SnackbarHost(hostState = snackbarHostState)

Other UI Components

1. ProgressIndicator

Indicates loading states.

CircularProgressIndicator()

LinearProgressIndicator(progress = 0.5f)

2. Surface

For defining background and themes.

Surface(color = Color.Gray) {
    Text("Styled Surface")
}

Conclusion

Jetpack Compose simplifies UI development, providing a modern and scalable approach to building Android apps. By mastering these core UI components, you can create highly interactive and visually appealing applications with minimal effort.