Increase space between title and text of AlertDialog in Compose

Question

In a simple AlertDialog like the following

AlertDialog(
    modifier = Modifier,
    title = {
        Text(text = "Title")
    },
    text = {
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            TextButton() {
                Text("Text 1")
            }
            TextButton() {
                Text("Text 2")
            }
        }
    },
    confirmButton = {},
    dismissButton = {}
)

how can I set a spacing between title and the first TextButton?
I tried to set a .padding(top = X.dp) to the Column, or the first text button, but this seems to only create a space at the bottom of the AlertDialog.
Also setting a custom .height(X.dp) did not work.

I'm using Compose 1.0.3

score 5 · Answer 1 · answered Nov 21 '21 at 13:10

Is now possible using the new AlertDialog from Compose Material 3. The default spacing between title and text is much more reasonable and it is also possible to add Modifier.padding() or Spacer() to both.

implementation("androidx.compose.material3:material3:1.0.0-alpha01")

androidx.compose.material3.AlertDialog(
    onDismissRequest = {
        openDialog.value = false
    },
    title = {
        Text(text = "Title", modifier = Modifier.padding(50.dp))
    },
    text = {
        Spacer(Modifier.height(50.dp))
        Text(text = "Turned on by default")
    },
    confirmButton = {
        TextButton(
            onClick = {
                openDialog.value = false
            }
        ) {
            Text("Confirm")
        }
    },
    dismissButton = {
        TextButton(
            onClick = {
                openDialog.value = false
            }
        ) {
            Text("Dismiss")
        }
    }
)

score 4 · Answer 2 · answered Oct 05 '21 at 18:43

This is NOT an answer. It only provides info on why this is not possible.

The requirement seems not achievable at this point (6th Oct 2021) with the current compose version (1.0.3).
Will update this once that is possible.

The AlertDialog code does not respect the padding values provided.

AlertDialog.kt

// Baseline distance from the first line of the text to the last line of the title
private val TextBaselineDistanceFromTitle = 36.sp

The text offset used for the positioning is calculated like this.

val textOffset = if (titlePlaceable == null) {
    TextBaselineDistanceFromTop.roundToPx()
} else {
    TextBaselineDistanceFromTitle.roundToPx()
}

The distance between the first text in the text composable and the last text in the title composable is always 36.sp.

The Alert Dialog code in compose seems too hackish currently and I could see a few TODO's in the code.

Hopefully, the code will be changed to handle more scenarios soon.

score 4 · Answer 3 · answered Oct 19 '21 at 20:29

As @Abhimanyu perfectly explains why it's not working right now, here's the workaround I'm using to achieve the desired padding: putting the title in the content. AlertDialog's title param is optional, so it can be omitted/set to null, and instead the actual title can be put in the text parameter (which holds the dialog content).

@Composable
fun MyComposable() {
    AlertDialog(
        title = null,
        text = {
            Column {
                Text(
                    modifier = Modifier.padding(vertical = 16.dp),
                    text = "Actual title"
                )

                // Rest of the dialog content
            }
        }
    )
}

score 2 · Answer 4 · answered Oct 06 '21 at 12:06

I'm using this composable as first child inside Column

@Composable
fun HackySpacer(space: Dp) {
    Box(
        modifier = Modifier
            .height(space)
            .fillMaxWidth()
    ) {
        Text(text = "")
    }
}

It's not perfect, but it works for my usecase.

Increase space between title and text of AlertDialog in Compose

4 Answers4