How to add divider in title in Alert Dialog in jetpack compose

Question

I want to add Divider after title. I tried to add Divider(), but it goes to above the text.

I am using Material 3 using implementation "androidx.compose.material3:material3:1.0.1"

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.letsgetchecked.app.common.DialogOptionsData

@Composable
fun <T> DialogOptionsView(
    optionData: DialogOptionsData<T>,
) {
    AlertDialog(
        onDismissRequest = {},
        confirmButton = {},
        title = {
            Text(text = optionData.header)
            Divider()
        },
        text = {
            LazyColumn {
                items(optionData.items) {
                    Text(text = "$it")
                }
            }
        },
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewDialogOptions() {
    val items = listOf(1, 2)
    val dataItems = DialogOptionsData(header = "Header", items = items)
    DialogOptionsView(dataItems)
}

Expected Output

Actual Output

check this https://stackoverflow.com/questions/70581906/how-customize-alertdialog-with-jetpack-compose — cesarsicas, Feb 02 '23 at 20:37

score 3 · Accepted Answer · answered Feb 02 '23 at 21:23

3

It happens because the title attribute internally uses a Box as parent container.
Add a Column to achieve the expected result:

    AlertDialog(
        onDismissRequest = {},
        confirmButton = {},
        title = {
            Column() {
                Text(text = "header")
                Divider()
            }
        },

answered Feb 02 '23 at 21:23

Gabriele Mariotti

320,139
94
887
841

How to use full width of divider? – Kotlin Learner Feb 03 '23 at 10:03
@VivekModi The `AlertDialog` has an internal padding of `24.dp` and you can't override it. Check the [source code](https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/AlertDialog.kt#L59) – Gabriele Mariotti Feb 03 '23 at 10:10

score 0 · Answer 2 · answered Feb 05 '23 at 06:32

If you use Dialog() composable instead of AlertDialog() you can get full width divider. Try this code

@Composable
fun <T> DialogOptionsView(optionData: DialogOptionsData<T>) {
    Dialog(onDismissRequest = {}) {
        Surface(shape = RoundedCornerShape(10.dp)) {
            Column {
                Text(
                    text = optionData.header,
                    style = MaterialTheme.typography.titleMedium,
                    modifier = Modifier.padding(16.dp, 14.dp)
                )
                Divider()
                LazyColumn(contentPadding = PaddingValues(16.dp, 10.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
                    items(optionData.items) {
                        Text(text = "$it")
                    }
                }
            }
        }
    }
}

and the result is

How to add divider in title in Alert Dialog in jetpack compose

2 Answers2