How to Build a Custom Bottom Alert Dialog in Android Using Jetpack Compose

Java

Copy

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.DialogProperties


enum class CustomDialogPosition {
    BOTTOM, TOP
}

fun Modifier.customDialogModifier(pos: CustomDialogPosition) = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(constraints.maxWidth, constraints.maxHeight){
        when(pos) {
            CustomDialogPosition.BOTTOM -> {
                placeable.place(0, constraints.maxHeight - placeable.height, 10f)
            }
            CustomDialogPosition.TOP -> {
                placeable.place(0,0,10f)
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomAlertDialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(
        usePlatformDefaultWidth = false
    ),
    padding: PaddingValues = PaddingValues(16.dp),
    position: CustomDialogPosition = CustomDialogPosition.BOTTOM,
    content: @Composable () -> Unit
) {
    AlertDialog(onDismissRequest = onDismissRequest, modifier = Modifier
        .customDialogModifier(pos = position)
        .fillMaxWidth()
        .padding(padding),
        properties = properties
    ) {
        content()
    }
}

Java

Copy

@Composable
fun PushPermissionDialog(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
) {
    CustomAlertDialog(onDismissRequest = onDismissRequest) {
        ConfirmationDialogContent(
            title = "Enable Push Notification",
            message = "Allow push notification permission to get store related alerts through push notification.",
            confirmText = "Allow",
            cancelText = "Later",
            onConfirm = onConfirmation,
            onCancel = onDismissRequest
        )
    }
}