Implementing Single-Choice Dialog in Jetpack Compose

Jetpack Compose has revolutionized Android development by providing a declarative UI toolkit, allowing developers to create beautiful and functional user interfaces with less boilerplate and more flexibility. One common UI component in Android apps is the single-choice dialog, where users can select one option from a list. In this blog post, we’ll explore how to implement a single-choice dialog in Jetpack Compose, covering both the basics and advanced customization techniques.

Table of Contents

1. Understanding Single-Choice Dialogs

2. Basic Implementation of Single-Choice Dialog

3. Handling State with ViewModel

4. Customizing the Dialog UI

5. Best Practices for Using Single-Choice Dialogs

6. Conclusion

1. Understanding Single-Choice Dialogs

A single-choice dialog presents users with a list of options and allows them to select only one. These dialogs are often used in settings, forms, or feature configurations. Unlike multi-choice dialogs, where multiple selections are allowed, single-choice dialogs highlight exclusivity, ensuring only one option is active at a time.

In Jetpack Compose, building a single-choice dialog involves leveraging the AlertDialog composable, along with other components like RadioButton, Text, and state management tools.

2. Basic Implementation of Single-Choice Dialog

Here’s a basic implementation of a single-choice dialog in Jetpack Compose:

Code Example

@Composable
fun SingleChoiceDialog(
    title: String,
    options: List<String>,
    selectedOption: String?,
    onOptionSelected: (String) -> Unit,
    onDismissRequest: () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismissRequest,
        title = {
            Text(text = title)
        },
        text = {
            Column {
                options.forEach { option ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { onOptionSelected(option) },
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        RadioButton(
                            selected = option == selectedOption,
                            onClick = { onOptionSelected(option) }
                        )
                        Spacer(modifier = Modifier.width(8.dp))
                        Text(text = option)
                    }
                }
            }
        },
        confirmButton = {
            TextButton(onClick = onDismissRequest) {
                Text(text = "OK")
            }
        }
    )
}

Explanation

1. AlertDialog: The core dialog container in Jetpack Compose.

2. options.forEach: Iterates through the list of options to render each as a row with a RadioButton and a Text label.

3. State Management: The selectedOption tracks the currently selected option, and onOptionSelected updates it.

Usage Example

@Composable
fun SingleChoiceDialogDemo() {
    val options = listOf("Option 1", "Option 2", "Option 3")
    var selectedOption by remember { mutableStateOf<String?>(null) }
    var showDialog by remember { mutableStateOf(true) }

    if (showDialog) {
        SingleChoiceDialog(
            title = "Choose an Option",
            options = options,
            selectedOption = selectedOption,
            onOptionSelected = { selectedOption = it },
            onDismissRequest = { showDialog = false }
        )
    }
}

3. Handling State with ViewModel

For a more robust implementation, especially in larger apps, managing state through a ViewModel ensures consistency and separation of concerns.

Code Example with ViewModel

class DialogViewModel : ViewModel() {
    private val _selectedOption = MutableStateFlow<String?>(null)
    val selectedOption: StateFlow<String?> = _selectedOption

    fun selectOption(option: String) {
        _selectedOption.value = option
    }
}

@Composable
fun SingleChoiceDialogWithViewModel(viewModel: DialogViewModel) {
    val options = listOf("Option 1", "Option 2", "Option 3")
    val selectedOption by viewModel.selectedOption.collectAsState()
    var showDialog by remember { mutableStateOf(true) }

    if (showDialog) {
        SingleChoiceDialog(
            title = "Choose an Option",
            options = options,
            selectedOption = selectedOption,
            onOptionSelected = { viewModel.selectOption(it) },
            onDismissRequest = { showDialog = false }
        )
    }
}

Benefits

• State Persistence: The selected option persists across configuration changes.

• Testability: Logic in the ViewModel can be unit-tested independently of the UI.

4. Customizing the Dialog UI

To make your dialog stand out, you can customize its appearance and behavior. Here are some ideas:

Custom Typography and Colors

Use custom styles to align the dialog with your app’s branding.

Text(
    text = title,
    style = MaterialTheme.typography.h6,
    color = MaterialTheme.colorScheme.primary
)

Animations

Add entry and exit animations to enhance user experience.

val enterTransition = remember { fadeIn(animationSpec = tween(durationMillis = 300)) }
val exitTransition = remember { fadeOut(animationSpec = tween(durationMillis = 300)) }

AnimatedVisibility(
    visible = showDialog,
    enter = enterTransition,
    exit = exitTransition
) {
    SingleChoiceDialog(
        title = "Animated Dialog",
        options = options,
        selectedOption = selectedOption,
        onOptionSelected = { selectedOption = it },
        onDismissRequest = { showDialog = false }
    )
}

Icons and Illustrations

Enhance the UI by adding icons or illustrations.

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Icon(imageVector = Icons.Default.Star, contentDescription = "Star")
    Spacer(modifier = Modifier.width(8.dp))
    Text(text = option)
}

5. Best Practices for Using Single-Choice Dialogs

1. Use for Important Decisions: Avoid overusing dialogs; reserve them for critical actions or settings.

2. Maintain Accessibility: Ensure all options are accessible via keyboard navigation and screen readers.

3. Responsive Design: Test dialogs on different screen sizes and orientations to ensure usability.

4. State Restoration: Use ViewModel or other state-saving mechanisms to handle configuration changes gracefully.

5. Minimize Cognitive Load: Keep the options concise and easy to understand.

6. Conclusion

Implementing a single-choice dialog in Jetpack Compose is straightforward yet highly customizable. By leveraging Compose’s declarative nature, you can create dialogs that are both functional and visually appealing. Whether you stick to the basics or dive into advanced customizations, Jetpack Compose provides the tools to meet your app’s unique requirements.

Start experimenting with these techniques in your projects and see how Jetpack Compose simplifies dialog implementation while enhancing user experience!