Jetpack Compose: How to use AlertDialog

Introduction

In Android development, creating user interfaces is more intuitive than ever with Jetpack Compose. It simplifies UI development by using a declarative approach, where the UI elements are defined in code. One common feature in Android apps is the AlertDialog, which can be used to display alerts, confirmations, or information pop-ups. In this article, we'll explore how to implement an AlertDialog using Jetpack Compose in Kotlin. This will include a step-by-step breakdown of how to show the dialog, handle user interactions, and dynamically update the UI based on user actions.

Whether you're building a simple app that requires basic user prompts or more complex apps that need confirmations, Jetpack Compose’s AlertDialog is a powerful tool that can easily be customized. We'll walk through an example that demonstrates how to trigger a dialog upon a button click and adjust the app's background color based on user input.

Understanding the Main Structure

The sample code is structured around a simple MainActivity where the main UI logic is encapsulated in a composable function called MainContent(). The setContent method of MainActivity is used to display this composable content. By using the Jetpack Compose framework, the UI components are built declaratively within Kotlin code, eliminating the need for traditional XML layouts.

The composable function, MainContent(), sets up the UI components such as buttons and the alert dialog. The key components here are Button and AlertDialog, which interact with each other to display the dialog based on the user's actions. The code demonstrates how to manage the visibility of the AlertDialog using the remember function, which stores mutable state that controls whether the dialog is shown or hidden.

Managing Dialog State with MutableState

A critical part of this example is managing the state of the dialog using mutableStateOf(). This state variable, openDialog, determines whether the alert dialog is currently visible on the screen. The remember function is used here to preserve the state across recompositions, which ensures that the dialog remains consistent as the UI updates.

When the user clicks the "Show Dialog" button, the openDialog state changes to true, which triggers the display of the AlertDialog. Conversely, when the user dismisses the dialog by clicking either the "Yes" or "Cancel" buttons, the state is updated to false, thereby hiding the dialog. This approach highlights the power of Jetpack Compose in handling dynamic UI components without requiring complex code or additional frameworks.

Customizing the AlertDialog

The AlertDialog in this example is fully customizable, featuring a title, text content, and two buttons for user actions: a confirmation button and a dismiss button. The dialog title prompts the user to confirm if they want to change the background color, while the dialog text provides additional context.

The confirm button allows the user to accept the change. If clicked, the app background changes to a yellow color using the backgroundColor state variable, and the dialog is dismissed. On the other hand, the dismiss button, labeled "Cancel", simply closes the dialog without making any changes. It also features customized colors for better visual distinction, utilizing ButtonDefaults.buttonColors to set the button background to red and the text color to white.

Handling Layout and Styling

The MainContent() function uses a Column composable to stack the UI elements vertically. The column is wrapped in a Modifier that sets the background color and fills the available screen space. Padding is applied to the button to give it some spacing, making the UI look clean and user-friendly.

When the alert dialog appears, the user has two clear options: confirm or cancel. The background color change adds an interactive element, showing how Jetpack Compose allows dynamic updates to the UI based on user input. This kind of interaction is essential for creating engaging user experiences in modern Android applications.

Summary

In this article, we’ve explored how to implement and customize an AlertDialog using Jetpack Compose in Kotlin. By leveraging state management through mutableStateOf and remember, you can easily control the visibility of dialogs and update your app’s UI dynamically. Jetpack Compose makes it straightforward to build user interfaces declaratively, allowing developers to focus more on functionality rather than boilerplate code.

This example serves as a foundation for more complex implementations where user feedback is essential. From simple confirmations to detailed prompts, AlertDialog is a versatile component that can enhance the interactivity of your Android apps. With Jetpack Compose, integrating such components is efficient, making your development process smoother and your apps more responsive.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val openDialog = remember { mutableStateOf(false)}
        val backgroundColor = remember {
            mutableStateOf(Color(0xFFF5F5F5))
        }

        Column(
            Modifier
                .background(backgroundColor.value)
                .fillMaxSize()
        ) {
            Button(onClick = {
                    openDialog.value = true
                },
                modifier = Modifier.padding(16.dp)
            ) {
                Text(text = "Show Dialog")
            }

            if (openDialog.value){
                AlertDialog(
                    onDismissRequest = { openDialog.value = false },
                    title = { Text(text = "Change background color") },
                    text = { Text(
                        text = "Do you want to apply yellow background?"
                    ) },
                    
                    confirmButton = {
                        Button(onClick = {
                                openDialog.value = false
                                backgroundColor.value = Color(0xFFFFD300)
                            }) {
                                Text(text = "Yes")
                        }
                    },
                    
                    dismissButton = {
                        Button(onClick = { 
                                openDialog.value = false
                            },
                            colors = ButtonDefaults.buttonColors(
                                backgroundColor = Color.Red,
                                contentColor = Color.White
                            )
                            ) {
                                Text(text = "Cancel")
                        }
                    }
                )
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}