Hello everyone. I want to use a dialog, for this I...

# compose

[Ahmet Delibaş]

Hello everyone. I want to use a dialog, for this I'm using AlertDialog from compose.material. I want to fill max width, but I couldn't find a way to do it. Do you know a way?

[Utkarsh Tiwari]

You can try configuring modifier:

AlertDialog(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
         // .... other required params
    )

[Ahmet Delibaş]

I tried it, it does not work : /

[Utkarsh Tiwari]

Can you share your code?

[Ahmet Delibaş]

@Composable
fun AlertDialogSample(modifier: Modifier, onCancel: () -> Unit, onConfirm: () -> Unit) {
    Column(
        modifier = modifier
            .background(descriptionTypingBackground)
            .fillMaxSize()
            .clickable { },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AlertDialog(
            onDismissRequest = {},
            title = {
                Row(
                    modifier = modifier
                        .fillMaxWidth()
                        .height(56.dp),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.Bottom
                ) {
                    Text(
                        text = stringResource(id = R.string.do_you_want_to_exit),
                        textAlign = TextAlign.Center,
                        modifier = modifier.height(24.dp)
                    )
                }
            },
            buttons = {
                Row(
                    modifier
                        .fillMaxWidth()
                        .height(72.dp)
                        .padding(top = 24.dp, bottom = 8.dp),
                    verticalAlignment = Alignment.Bottom
                ) {
                    ConstraintLayout(
                        modifier = modifier
                            .fillMaxWidth()
                            .height(40.dp)
                    ) {
                        val (leftButton, rightButton) = createRefs()
                        val half = createGuidelineFromStart(0.5f)

                        Button(
                            onClick = {
                                onCancel.invoke()
                            },
                            modifier = modifier.constrainAs(leftButton) {
                                start.linkTo(parent.start, 8.dp)
                                top.linkTo(<http://parent.top|parent.top>)
                                bottom.linkTo(parent.bottom)
                                end.linkTo(half, 4.dp)
                                width = Dimension.fillToConstraints
                                height = Dimension.fillToConstraints
                            },
                            shape = RoundedCornerShape(20.dp)
                        ) {
                            Text(
                                text = stringResource(id = R.string.Cancel),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Medium,
                            )
                        }

                        Button(
                            onClick = {
                                onConfirm.invoke()
                            },
                            modifier = modifier
                                .constrainAs(rightButton) {
                                    start.linkTo(half, 4.dp)
                                    top.linkTo(<http://parent.top|parent.top>)
                                    bottom.linkTo(parent.bottom)
                                    end.linkTo(parent.end, 8.dp)
                                    width = Dimension.fillToConstraints
                                    height = Dimension.fillToConstraints
                                },
                            shape = RoundedCornerShape(20.dp)
                        ) {
                            Text(
                                text = stringResource(id = R.string.ok),
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Medium
                            )
                        }
                    }
                }
            },
            shape = RoundedCornerShape(20.dp),
            backgroundColor = surfaceColor,
            modifier = modifier.fillMaxWidth()
        )
    }
}

[Utkarsh Tiwari]

I tried tweaking your code but to no avail. I think there is some internal maxwidth constraint being applied on dialog from compose side. I’d recommend opening a bug ticket to consult with them if this is expected behavior: https://issuetracker.google.com/

Even if it isn’t a bug, they’ll help you figure out the solution which you can share here for others to follow.

[Ahmet Delibaş]

So thanks Utkarsh, I opened an issue for this.