CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Talha Akbar
Talha Akbar

Reputation: 859

Dialog in compose shows full width in some devices

I am using compose dialog like this

Dialog(
    onDismissRequest = { },
    properties = DialogProperties(
        dismissOnBackPress = false,
        dismissOnClickOutside = false
    )
) {
    Box(
        modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.background)
    ) { ... } }

This is working just fine in Pixel 4xl but on Samsung devices it's width is covering full screen. Any idea?

Upvotes: 3

Views: 1217

Answers (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 only usePlatformDefaultWidth = false did not help,

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

  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
                ) {
                    ........
                }
            })
    })

Check this for more: Compose AlertDialog always takes full width on Samsung

Upvotes: 1

Krzysztof S.
Krzysztof S.

Reputation: 181

There is a property named usePlatformDefaultWidth in DialogProperties. Switch it to false and it should take full width.

Upvotes: 1

Related Questions