Customize a Compose for Desktop AlertDialog

This will be a rather short post and a very specific one, too. Before we go into details I would like thank Roman Sedaikin who commented on an issue I created on GitHub. He brought my attention to DesktopDialogProperties.

Let's take a look at the AlertDialog composable when used in Compose for Desktop. A rather basic form of an AlertDialog is created like this:

AlertDialog(onDismissRequest = {},
    title = { Text("Hello title") },
    confirmButton = {
      Button(onClick = {
      }) {
        Text("Confirm")
      }
    },
    dismissButton = {
      Button(onClick = {
      }) {
        Text("Dismiss")
      }
    },
    text = { Text("Hello text") })

So we have

• an optional title
• an optional text (message)
• a confirm button
• an optional dismiss button

There is also a window decoration incluing title and icon, which cannot be changed through the arguments you pass to the composable. At least, not directly.

Let's take a closer look at the signature:

There is a DialogProperties? which is set to null by default.

So DialogProperties is a marker interface. To see how we can customize our AlertDialog we need to find implementations. Fortunately IntelliJ can do this for us.

Now let's see what DesktopDialogProperties has to offer.

As we give the AlertDialog a title, we might not want window decorations at all.

properties = DesktopDialogProperties(undecorated = true),

There is not only no decoration but also no border. To fix this, just add a modifier to the AlertDialog. Before I show this to you, pleae keep in mind that in this case you also need to add a dismissButton, because the window close button belongs to the window decoration we just successfully removed.

modifier = Modifier.border(width = 1.dp,
                           MaterialTheme.colors.primary),

While I think this looks gorgeous you still cannot move the window. I will show you how to do this in a future post. For now you might consider this alternative:

AlertDialog(onDismissRequest = {},
    confirmButton = {
      Button(onClick = {
      }) {
        Text("Confirm")
      }
    },
    dismissButton = {
      Button(onClick = {
      }) {
        Text("Dismiss")
      }
    },
    properties = DesktopDialogProperties(title = "Hello title"),
    text = { Text("Hello text") })

I omitted the title argument for AlertDialog and put it in DesktopDialogProperties instead.

As you can see, you can customize your Compose for Desktop alert dialogs quite a bit. And there is more. For example you can change the resizability. How do you style yours? Please share your thoughts in the comments.