How to remove padding between AlertDialog and title/text with Compose

Question

Using compose, I want to create something like this :

Problem is using compose AlertDialog I only achieve to get this :

There is a padding between the AlertDialog border and the title that can not be removed. How to remove it using Compose ? Using Modifier.padding(all = 0.dp) doesn't work. I tried it at every level.

Answer 1

Properties "title" and "text" are wrapped with AlertDialogBaselineLayout that is adding padding. You can't remove it.

I have made a custom Composable that is acting as an AlertDialog and doesn't use AlertDialogBaselineLayout.

You can copy/paste it and edit it according to your needs :

NoPaddingAlertDialog :

@Composable
fun NoPaddingAlertDialog(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    confirmButton: @Composable () -> Unit,
    dismissButton: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
) {
    Dialog(
        onDismissRequest = onDismissRequest,
        properties = properties
    ) {
        Surface(
            modifier = modifier,
            shape = shape,
            color = backgroundColor,
            contentColor = contentColor
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                title?.let {
                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
                        val textStyle = MaterialTheme.typography.subtitle1
                        ProvideTextStyle(textStyle, it)
                    }
                }
                text?.let {
                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
                        val textStyle = MaterialTheme.typography.subtitle1
                        ProvideTextStyle(textStyle, it)
                    }
                }
                Box(
                    Modifier
                        .fillMaxWidth()
                        .padding(all = 8.dp)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.End,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        dismissButton?.invoke()
                        confirmButton()
                    }
                }
            }
        }
    }
}

You can then easily use it this way :

@Composable
fun MyCustomAlertDialog(openDialog: MutableState<Boolean> = mutableStateOf(true)) {
    if (openDialog.value) {
        NoPaddingAlertDialog(
            title = {
                Surface(
                    color = Color.Blue,
                    contentColor = Color.White,
                    modifier = Modifier
                        .fillMaxWidth()

                ) {
                    Text(
                        text = " Popup Title?",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 8.dp, vertical = 16.dp),
                    )
                }
            },
            text = {
                Column(Modifier.fillMaxWidth()) {
                    OutlinedTextField(
                        modifier = Modifier
                            .align(Alignment.CenterHorizontally)
                            .padding(horizontal = 8.dp, vertical = 16.dp)
                            .fillMaxWidth(),
                        value = "Alert Dialog content ...",
                        onValueChange = { },
                        label = { Text(text = "Content") },
                    )
                }
            },
            onDismissRequest = { /*TODO*/ },
            confirmButton = {
                PopupButton(title = "Ok", setShow = {
                    openDialog.value = false
                })
            },
            dismissButton = {
                PopupButton(
                    title = "Cancel",
                    setShow = {
                        openDialog.value = false
                    }
                )
            }
        )
    }
}

And get this :

Answer 2

You can use a Dialog() instead of AlertDialog(). It allows you to pass in a composable as the content parameter, so you can set whatever padding you want. Just don't forget to set the background color in the root composable of the content, since it is transparent by default.