Why can't I use Modifier.padding(top = 20.dp) to increase space in AlertDialog when I use JetPack Compose?

Question

The Code A displays a dialog box based AlertDialog, and I get Image A when I run Code A.

I find the space between title = { Text(text = dialogTitle) } and text = {...} is too closer in Image A.

So I set Modifier.padding(top = 100.dp) to wish to increase the space between the two controls, but I only get Image B, it seems that Modifier.padding(top = 100.dp) doesn't work as expected, how can I fix it?

Code A

@Composable
fun EditTextDialog(
    isShow: Boolean,
    onDismiss: () -> Unit,
    onConfirm: (String) -> Unit,
    saveTitle: String = stringResource(R.string.dialog_save_title),
    cancelTitle:String = stringResource(R.string.dialog_cancel_title),
    dialogTitle:String ="Edit",  
    editFieldContent:String ="",
) {
    
    var mText by remember(editFieldContent){ mutableStateOf(editFieldContent) }
    
    val  cleanAndDismiss = {
        mText = editFieldContent 
        onDismiss()
    }

    if (isShow) {
        AlertDialog( 
            title = { Text(text = dialogTitle) },
            text = {
                Column(
                    Modifier.padding(top = 20.dp)
                    //Modifier.padding(top = 100.dp)
                     
                    //Modifier.height(100.dp),         //The same result as Image A
                    //verticalArrangement = Arrangement.Center
                ) {
                    TextField(
                        value = mText,
                        onValueChange = { mText = it }
                    )
                }
            },
              
             confirmButton = {
                TextButton(onClick = { onConfirm(mText) }) {
                    Text(text = saveTitle)
                }
            },

            dismissButton = {
                TextButton(onClick = cleanAndDismiss) {
                    Text(text = cancelTitle)
                }
            },

            onDismissRequest = cleanAndDismiss
        )
    }
}

Image A

Image B

score 1 · Accepted Answer · answered Sep 15 '22 at 05:57

With M3 AlertDialog (androidx.compose.material3.AlertDialog) it works.

With M2 AlertDialog, one solution is to remove the title attribute and use the text attribute for the whole layout.

  AlertDialog(
        onDismissRequest = {},
        text = {
            Column(){
                Text(text = "Title")
                Spacer(Modifier.height(30.dp))
                TextField(
                    value = "mText",
                    onValueChange = { },
                )
            }
        },
        //buttons..
    )

Thanks! your way `one solution is to remove the title attribute and use the text attribute for the whole layout.` works well, is there some bugs with M2? — HelloCW, Sep 15 '22 at 06:15

score 0 · Answer 2 · answered Sep 15 '22 at 03:01

0

I don't understand what you're trying to do. If you want more space between the TextField and the dialog buttons, then you don't want a top padding. You want padding below the TextField, so it would be bottom padding on the column.

Also, there's a chance that it won't work properly inside a Column, and you might have to switch it out for Box. And if that doesn't work for some reason, just add a spacer below the TextField:

Spacer(Modifier.height(20.dp).fillMaxWidth())

answered Sep 15 '22 at 03:01

user496854

6,461
10
47
84

Thanks! But it will get the same result as Image A after I add `Spacer(Modifier.height(20.dp).fillMaxWidth())` before `TextField()`! – HelloCW Sep 15 '22 at 03:04
I need more space between the `title = { Text(text = dialogTitle) }` and `TextField`. – HelloCW Sep 15 '22 at 03:05
did you replace the Column with a Box? – user496854 Sep 15 '22 at 03:19
Yes, I get the same result even if I replace the Column with a Box. – HelloCW Sep 15 '22 at 05:36
In that case, I'm guessing that the Dialog's native Column is set to force it to layout without allowing padding. But I can't see how it would stop the Spacer from showing up. Try using the Spacer again, but instead of height(), set it as Modifier.requiredHeight(20.dp) or Modifier.minHeight(20.dp) – user496854 Sep 15 '22 at 05:49

score 0 · Answer 3 · answered Sep 15 '22 at 05:54

I assume you are using Material AlertDialog? If yes try using the Material3 variant. It should work then.

Just implement following library:

implementation "androidx.compose.material3:material3:1.0.0-beta02"

And make sure to use the Material3 AlertDialog Composable which is imported with the library.

Why can't I use Modifier.padding(top = 20.dp) to increase space in AlertDialog when I use JetPack Compose?

3 Answers3