How to make a preview of a dialog in jetpack compose?

user_5796683 0
Viewed 2014

I have this code:

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
        ....
    }
}

@Preview(showBackground = true)
@Composable
fun SomeDialogPreview() {
    MyTherapyPreviewTheme {
        Scaffold {
            SomeDialog()
        }
    }
}

I expected that this preview will generate a preview similar to other composable functions, but instead of this I only see a white rectangle in the preview (pure Scaffold).

How can I generate a preview of dialog in a proper way? Or maybe I can only make a preview of the content of the dialog in a separate function?

android-jetpack-compose kotlin android
3 Answers

@MihaiBC is spot-on about why you can not preview (yet). Meanwhile, you can preview dialog content by extracting content of dialog in to a separate composable.

For example, if your dialog looks like this:

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         Card(modifier = Modifier.fillMaxWidth()) {
             .....
        }
    }
}

then extract content as following:

@Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         SomeDialogContent()
    }
}

@Composable
fun SomeDialogContent(){
   Card(modifier = Modifier.fillMaxWidth()) {
       .....
   }
}

and finally preview this SomeDialogContent with some padding:

@Preview
@Composable
fun PreviewSomeDialogContent() {
    AppTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background)
                .padding(20.dp),
            contentAlignment = Alignment.Center,
        ) {
            SomeDialogContent({})
        }
    }
}

enter image description here

user_32091700

There is one more way to see the preview, but this time it will be on your live or simulator device.

In the preview window find a Deploy Preview button, which will build your preview on the phone.enter image description here

Note that only this composable will be built.

user_75056650

On the documentations is it stated that only AlertDialog supports Composable functions and that is the reason you are unable to see the preview. enter image description here

You can check more details here.

user_82088080
Related