How to change the button size to full width in compose using Material 3 Alert Dialog

Question

Hi I am creating a Alert dialog on some action, I need to get the Confirmation button to full width below is my code, Kindly look over it on achieving the full width of button and also , say if I get two button it must be aligned equally based on the btnActions size the view gets changed

Calling Function :

ShowAlertDialog(R.drawable.ic_equipment_mic_off, "Microphone not connected","Please check that your phone's microphone is working and that Learn English can access it.", listOf("OK")) { "Ok" }

@Composable
fun ShowAlertDialog(showIcon: Int? = null, header: String, description: String, btnActions: List<String>, onCloseAction: (String) -> Unit){

    AlertDialog(
        onDismissRequest = {},
        containerColor = colorResource(id = R.color.white),
        icon = {
            if(showIcon != null) {
                Icon(
                    painter = painterResource(id = showIcon),
                    contentDescription = "closeIcon",
                    tint = Color.Unspecified,
                    modifier = Modifier
                        .width(72.dp)
                        .height(72.dp)
                )
            }
        },
        title = {
            Text(
                text = header,
                color = Color.Black,
                fontFamily = proximaNovaFont,
                fontWeight = FontWeight.Bold,
                fontSize = 17.sp
            )
        },
        text = {

                Text(
                    text = description,
                    lineHeight = 22.sp,
                    color = colorResource(id = R.color.black_65),
                    fontFamily = proximaNovaFont,
                    fontSize = 16.sp
                )
        },
        confirmButton = {
            LazyRow(horizontalArrangement = Arrangement.Center,
                modifier = Modifier
                    .fillMaxWidth()) {
                items(btnActions) { btnTxt ->
                    Box(modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 19.dp, end = 19.dp, bottom = 16.dp)
                        .background(
                            colorResource(id = R.color.brand_red),
                            RoundedCornerShape(5.dp)
                        )) {
                            TextButton(onClick = { onCloseAction(btnTxt) }) {
                                Text(text = btnTxt,
                                    color = colorResource(id = R.color.white),
                                    style = interMediumTypography.bodySmall,
                                    fontSize = 14.sp,
                                    textAlign = TextAlign.Center)
                            }
                    }
                }
            }
        },

    )
}

Answer 1

The issue is the use of the LazyRow.
If you want a dynamic number of Buttons and and a fullwidth-single Button you can use in confirmButton attribute a Row applying a weight modifier to each Button.

Something like:

    confirmButton = {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ){
            for (btnTxt in btnActions){
                Button(
                    onClick = { onCloseAction(btnTxt) },
                    modifier = Modifier
                        .padding(start = 19.dp, end = 19.dp, bottom = 16.dp)
                        .weight(1f),
                    shape = RoundedCornerShape(5.dp),
                    colors = ButtonDefaults.buttonColors(containerColor = Red)
                ) {
                    Text(
                        text = btnTxt,
                        color = colorResource(id = R.color.white),
                        fontSize = 14.sp,
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }