DEV Community

Cover image for Customize a Compose for Desktop AlertDialog
Thomas Künneth
Thomas Künneth

Posted on

Customize a Compose for Desktop AlertDialog

#kotlin #jetpackcompose #ux

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") })
Enter fullscreen mode Exit fullscreen mode

A simple AlertDialog

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:

AlertDialog arguments

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

The DialogProperties interface

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.

Usages of DialogProperties

Now let's see what DesktopDialogProperties has to offer.

DesktopDialogProperties

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

properties = DesktopDialogProperties(undecorated = true),
Enter fullscreen mode Exit fullscreen mode

Undecorated AlertDialog

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),
Enter fullscreen mode Exit fullscreen mode

Adding a border

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") })
Enter fullscreen mode Exit fullscreen mode

Setting the window title

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.

Top comments (0)