CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-alertdialog
Jokubas Trinkunas
Jokubas Trinkunas

Reputation: 854

Compose AlertDialog always takes full width on Samsung

On my Samsung Galaxy S22+ with One UI 5.0 and Android 13, compose AlertDialog always takes up full width, on other devices it works just as expected.

Compose version is 1.3.1

You can reproduce this by simply just downloading material catalog app from Google Play store.

I suspect this is most likely a bug on Compose side, if there's a quick fix, I'd appreciate it.

@Composable
fun AlertDialogSample() {
    val openDialog = remember { mutableStateOf(true) }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                // Dismiss the dialog when the user clicks outside the dialog or on the back
                // button. If you want to disable that functionality, simply use an empty
                // onCloseRequest.
                openDialog.value = false
            },
            title = {
                Text(text = "Title")
            },
            text = {
                Text(
                    "This area typically contains the supportive text " +
                        "which presents the details regarding the Dialog's purpose."
                )
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Dismiss")
                }
            }
        )
    }
}

UPDATE:

There is an issue created, it seems to be that this is a bug on Samsung's side: https://issuetracker.google.com/issues/260755409

Upvotes: 10

Views: 2166

Answers (3)

Prs2
Prs2

Reputation: 113

The answer that Pradip Tilala gave works fine but I found out it has a problem. In a big screen or even in landscape mode your dialog stretches to the sides of the screen and becomes too wide, While Material3 says that your dialog should be between 280 and 560 dp.

So that's what I ended up with looking nice and right. Set this modifier to your alert dialog.

modifier = Modifier
            .requiredWidthIn(
                280.dp,
                min((LocalConfiguration.current.screenWidthDp - customPadding).dp, 560.dp)
            ),

with requiredWidthIn if the width of your view is smaller or bigger than the given values, it will be set to the min and max value that you have specified respectively, Which here is 280 and 560. Also because 560 is too big for some screen, you can choose the min value between 560 and some other value. The other value that I have set that looks nice is the width of the screen minus some other number for padding. Note that with requiredWidthIn you don't need to set fillMaxWidth(0.92f) to your modifier anymore.

Also here is the costume padding that looks nice for me in all screens:

val customPadding = LocalConfiguration.current.screenWidthDp / 6

Upvotes: 2

Pradip Tilala
Pradip Tilala

Reputation: 1813

After Android 13 update on my device, Dialog with XML layouts are taking expected width. But Compose AlertDialog & Dialog are taking up full width. We are facing this issue with Compose Dialogs only,

I am using Samsung Galaxy M32 with One UI 5.0 & Android 13, App uses Compose version 1.1.0-beta01 & targetSdkVersion 33,

using usePlatformDefaultWidth = true did not help,

This issue is most likely a bug on Compose side, You can find quick fixes for both Dialog and AlertDialog in compose,

  1. For Compose AlertDialog()

I have used modifier and set DialogProperty usePlatformDefaultWidth to false & set fillMaxWidth with fraction 0.92f.

modifier = Modifier.fillMaxWidth(0.92f),
properties =DialogProperties(usePlatformDefaultWidth =false),

Compose AlertDialog() code snippet:

AlertDialog(
    modifier = Modifier.fillMaxWidth(0.92f),
    properties = DialogProperties(
        usePlatformDefaultWidth = false
    ),
    onDismissRequest = { ... },
    buttons = {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            ...
        }
    },
    title = {
        
    },
    text = {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            ........
        }
    }
)
  1. For Compose Dialog()

I have used Surface to wrap the dialog content with modifier = Modifier.fillMaxWidth(0.92f), RoundedCornerShape with radius, set Color.Transparent to background color and also set DialogProperty usePlatformDefaultWidth to false

Surface(
        modifier = Modifier.fillMaxWidth(0.92f),
        shape = RoundedCornerShape(8.dp),
        color = Color.Transparent,
        content = {})

Compose Dialog() code snippet:

Dialog(
    onDismissRequest = { },
    properties = DialogProperties(
        dismissOnClickOutside = true,
        dismissOnBackPress = true,
        usePlatformDefaultWidth = false
    ),
    content = {
        Surface(
            modifier = Modifier.fillMaxWidth(0.92f),
            shape = RoundedCornerShape(8.dp),
            color = Color.Transparent,
            content = {
                Column(
                    modifier = Modifier
                        .background(color = colorResource(id = android.R.color.white))
                        .fillMaxWidth(1f)
                        .wrapContentHeight(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    ........
                }
            })
    })

Upvotes: 8

m.reiter
m.reiter

Reputation: 2525

The Alert-Dialog-Composable accepts DialogProperties

@Composable
fun AlertDialog(
    properties: DialogProperties = DialogProperties()
    ...
)

/**
 * Properties used to customize the behavior of a [Dialog].      
   ...
 * @property usePlatformDefaultWidth Whether the width of the dialog's content should
 * be limited to the platform default, which is smaller than the screen width.
 */
class DialogProperties @ExperimentalComposeUiApi constructor(
    val usePlatformDefaultWidth: Boolean = true
    ...
)

By default, usePlatformDefaultWidth = true, so the Dialog should not fill the screen width.

-> What you see is most probably a bug & should be reported

Upvotes: 1

Related Questions