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

user_3311172 0
Viewed 1110

Using compose, I want to create something like this :

enter image description here

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

enter image description here

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.

android-jetpack-compose kotlin android
2 Answers

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 :

enter image description here

user_33111720

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.

user_91421340
Related