Desktop - Transparent AppWindow

[graycatdeveloper]

How?
I need a fully transparent window. I want to make an overlay for the game.
I know how to do this with Swing or JavaFX. But no matter how I try, compose makes a white background

[darvld]

You can try accessing the underlying AWT window through LocalAppWindow.current.window and setting the background to a transparent color. This will only work if the underlying window system supports pero-pixel transparency.

[graycatdeveloper]

@darvld NO EFFECT!

Button(
  onClick = {
    AppWindow(
      title = "test",
      size = IntSize(200, 100),
      undecorated = true
   ).apply {
    show {
      Surface(
        color = Color.Transparent,
        modifier = Modifier
          .background(Color.Transparent)
       ) {
         Text("test", color = Color.Red)
       }
      }
    }
  }
) {
  Text("SHOW OVERLAY")
}

[darvld]

@Composable
fun removeWindowBackground() {
    key(true) {
        LocalAppWindow.current.window.background = Color(0, 0, 0, 0)
    }
}

You can do it like this. They key(true) is there to ensure this only runs once, the essence is what's inside of the block.
You need to do this since Compose is drawing on top of the AWT layer, which has its own background (the white window background). In order to achieve real transparency, you need to get rid of that base window drawing first. By the way, the window must still be undecorated.

[graycatdeveloper]

give me at least one complete example of when this works. I know how to make a transparent window in swing. but setContent {} paints the entire area white

[darvld]

fun main() = Window(undecorated = true) {
    key(true) {
        LocalAppWindow.current.window.background = Color(0, 0, 0, 0)
    }

    MaterialTheme {
        Surface(shape=RoundedCornerShape(6.dp)) {
            // Your content
        }
    }
}

fun objectOrientedWay() = SwingUtilities.invokeLater {
    val window = AppWindow(undecorated=true)

    window.show {
        // Make the current window invisible
        key(true) {
            LocalAppWindow.current.window.background = Color(0, 0, 0, 0)
        }

        MaterialTheme {
            Surface(shape=RoundedCornerShape(6.dp)) {
                // Your content
            }
        }
    }
}

[graycatdeveloper]

This does not work. It's a white background!

[kirill-grouchnikov]

Probably the specific platform you're running on does not support translucency for Swing windows then. There's some code at https://docs.oracle.com/javase/tutorial/uiswing/misc/trans_shaped_windows.html#capability that you can run in a pure Swing sample to verify that.

[graycatdeveloper]

Swing supports window transparency! I will repeat again - I know how to make a transparent window on Swing. But the compose layer is painted white by default.

[kirill-grouchnikov]

Are you using a Surface with no explicit transparent color?

fun main() = Window (undecorated = true, size = IntSize(200, 100), centered = true) {
    key(true) {
        LocalAppWindow.current.window.background = java.awt.Color(0, 0, 0, 128)
    }

    MaterialTheme {
        Surface(color = Color.Transparent) {
            Text("test", color = Color.Red)
        }
    }
}

shows a partially translucent grey window with a red text

[kirill-grouchnikov]

Or in your example:

            Button(
                onClick = {
                    AppWindow(
                        title = "test",
                        size = IntSize(200, 100),
                        undecorated = true
                    ).apply {
                        show {
                            Surface(
                                color = Color.Transparent,
                                modifier = Modifier
                                    .background(Color.Transparent)
                            ) {
                                Text("test", color = Color.Red)
                            }
                        }
                        window.background = java.awt.Color(0, 240, 0, 128)
                    }
                }
            ) {
                Text("SHOW OVERLAY")
            }

where you need to call window.background = ... to make the Swing window itself to be translucent (in addition to your fully transparent Surface)

[graycatdeveloper]

@kirill-grouchnikov

[darvld]

According to that code, the window background's alpha is set to 128 instead of 0.

[graycatdeveloper]

Do you see the bluish background? Only white backgroung, not white with alpha). Your code doesn't work. Show the picture on which OS you have achieved this.

[kirill-grouchnikov]

This is the original half-translucent window:

Then the half-translucent overlay on top of that:

This is running on macOS Big Sur (11.3)

If it looks different on Windows, it should be filed as a bug instead of a discussion

[graycatdeveloper]

Yes, so this is a Windows error. Thank you all for your help, I hope this will help someone too.

[malliaridis]

I don't know if that helps, but under Windows I get the below result when window is displayed. For a short time it shows up the actual transparency.
Used code:

fun main() = Window(undecorated = true) {
    key(true) {
        LocalAppWindow.current.window.background = java.awt.Color(0, 0, 0, 128)
    }
    MaterialTheme {
        Column(modifier = Modifier.background(Color.Transparent)) {
            // App()
        }
    }
}

Adding transparent background to Columndoesn't change anything (column probably has also no widht or height because its empty).

Caution, flashing gif

[graycatdeveloper]

@malliaridis yes, this is very strange and absolutely incomprehensible.

[malliaridis]

I tried to track back the moment when the window turns white and found a ComposeLayer object containing a background and a foreground. Maybe this is the actual cause of the white "background"?

[graycatdeveloper]

@malliaridis Do you have any thoughts on how to fix this?

[malliaridis]

I tried a little bit around but my knowledge is not sufficient to find a working solution. It might also be related to some Skia function calls of which I am not familiar with.

[smallshen]

I think it is caused by skia default background, but I am not sure

[mcasaje]

In case other people are still looking for a solution to this, I found the following worked for me.

1. First test that translucency is supported on your system as someone else on this thread suggested. (https://docs.oracle.com/javase/tutorial/uiswing/misc/trans_shaped_windows.html#capability)
2. Using Compose's androidx.compose.ui.window.Window, simply pass it parameters undecorated = true and transparent = true. (You'll of course want something in the Window to know that it actually rendered.) You need both parameters set to true in order for the window to be rendered transparent.

I hope that helps!

[graycatdeveloper]

Window(transparent = true)
there was no such parameter... appeared???

[mcasaje]

I'm not sure when transparent was put in as a parameter, but I hope that resolves your issue!

[graycatdeveloper]

Yes. This working! Thx bro). Question closed.

[yangwulang]

you can write like this.

fun main() {
  SwingUtilities.invokeLater {
        val size = Dimension(500, 300)
        val transparentFrame = JFrame()
        transparentFrame.size = size
        transparentFrame.isUndecorated = true // this line hide default windowbar
        transparentFrame.isVisible = true
        transparentFrame.setLocation(
            (Toolkit.getDefaultToolkit().screenSize.width - transparentFrame.size.width) / 2,
            (Toolkit.getDefaultToolkit().screenSize.height - transparentFrame.size.height) / 2
        )
        val composePanel = ComposePanel()
        composePanel.size = size
        composePanel.setContent {
            transparentFrame.iconImage = painterResource("icons/compose.svg").toAwtImage(
                density = Density(1f, 1f),
                layoutDirection = LayoutDirection.Rtl
            )
            Row(
                modifier = Modifier.background(Color.Red)
            ) {
                Text("测试")
            }
        }
        transparentFrame.contentPane.add(composePanel)
        transparentFrame.pack()  // it important
    }
}

In this way, you can get a completely transparent window containing only one composite panel component

[SeerGiuS96]

Is hard for me to apply this code. i know about other coding lenguages but its being so hard to apply transparent window in a java project with eclipse