Custom Dialog in Jetpack

Creating a custom dialog in Jetpack Compose involves using the Dialog composable, which provides complete flexibility to define the layout and behavior. This allows you to design dialogs tailored to your application’s needs.

Example: Custom Dialog with Custom Layout

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun CustomDialogExample() {
    var showDialog by remember { mutableStateOf(false) }

    Button(onClick = { showDialog = true }) {
        Text("Show Custom Dialog")
    }

    if (showDialog) {
        Dialog(onDismissRequest = { showDialog = false }) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(
                        color = Color.White,
                        shape = RoundedCornerShape(16.dp)
                    )
                    .padding(16.dp)
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Custom Dialog", style = MaterialTheme.typography.titleLarge)

                    Spacer(modifier = Modifier.height(8.dp))

                    Text(
                        "This is a custom dialog layout. You can add any components here.",
                        style = MaterialTheme.typography.bodyMedium
                    )

                    Spacer(modifier = Modifier.height(16.dp))

                    Row(
                        horizontalArrangement = Arrangement.SpaceBetween,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Button(
                            onClick = { showDialog = false },
                            modifier = Modifier.weight(1f)
                        ) {
                            Text("Cancel")
                        }
                        Spacer(modifier = Modifier.width(8.dp))
                        Button(
                            onClick = { showDialog = false },
                            modifier = Modifier.weight(1f)
                        ) {
                            Text("OK")
                        }
                    }
                }
            }
        }
    }
}

Explanation

1. Dialog:

• The Dialog composable creates the container for the custom layout.
• The onDismissRequest parameter controls how the dialog is dismissed.

1. Box and Column:

• Used to arrange the custom components (title, message, buttons) inside the dialog.

1. Customization:

• Use RoundedCornerShape to give the dialog rounded corners.
• Adjust padding, background color, and spacing to create a polished design.

Adding More Custom Features

Input Field in Custom Dialog

You can include an input field to capture user input inside the custom dialog.

@Composable
fun CustomDialogWithInput() {
    var showDialog by remember { mutableStateOf(false) }
    var userInput by remember { mutableStateOf("") }

    Button(onClick = { showDialog = true }) {
        Text("Show Input Dialog")
    }

    if (showDialog) {
        Dialog(onDismissRequest = { showDialog = false }) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(
                        color = Color.White,
                        shape = RoundedCornerShape(16.dp)
                    )
                    .padding(16.dp)
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Input Dialog", style = MaterialTheme.typography.titleLarge)

                    Spacer(modifier = Modifier.height(8.dp))

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

                    Spacer(modifier = Modifier.height(16.dp))

                    Button(onClick = { showDialog = false }) {
                        Text("Submit")
                    }
                }
            }
        }
    }
}

Full-Screen Custom Dialog

If you need a full-screen dialog, you can use a Dialog with Modifier.fillMaxSize().

@Composable
fun FullScreenCustomDialog() {
    var showDialog by remember { mutableStateOf(false) }

    Button(onClick = { showDialog = true }) {
        Text("Show Full-Screen Dialog")
    }

    if (showDialog) {
        Dialog(onDismissRequest = { showDialog = false }) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text("Full-Screen Dialog", style = MaterialTheme.typography.titleLarge)

                    Spacer(modifier = Modifier.height(16.dp))

                    Button(onClick = { showDialog = false }) {
                        Text("Close")
                    }
                }
            }
        }
    }
}

Key Features of Custom Dialogs in Jetpack Compose

1. Flexibility:

• Fully customize the layout and content inside the dialog.

1. State Control:

• Use remember or state management to control dialog visibility.

1. Styling:

• Use Modifier, Shape, and Color to achieve your desired look and feel.

Custom dialogs in Jetpack Compose allow for modern, elegant designs that fit seamlessly into your application.