Making ComposePanel transparent

[hrach]

I'd like to show content under ComposePanel, so I would like to make the default background transparent. Is there a way to make ComposePanel transparent? Thank you for the great work.

[Rsedaikin]

Hi! I am already working on several prototypes that support transparency, but currently the ComposePanel background is filled with white by default.

[graycatdeveloper]

@Rsedaikin Is there any progress?

[wgryglas]

This feature would be very useful. It is common to use already existing Swing components for the main content, while the Compose could be used as an overlay panel with tools/inputs used to modify the content.

At the moment you can add a ComposePanel as a child of the Swing content, but you are restricted to a rectangular panel. This works but is a sort of limitation that strongly affects the UI design choices.
If ComposePanel could be transparent than we can freely use it as an overlay while the shape/background of the tools panels is managed by the Compose.

[supersnek]

As a temporary workaround, before creating ComposePanel you can add UIManager.put("Panel.background", java.awt.Color(0, 0, 0, 0)) and it will change background to transparent

[wakaztahir]

I've put this property UIManager.put("Panel.background", java.awt.Color(0, 0, 0, 0)) before calling ComposePanel()

but panel background is still white !

[zwz-coding]

Is there a solution now?

[GaborPeto]

Are there any updates?

[MatkovIvan]

Offscreen rendering allows that. You can enable it via compose.swing.render.on.graphics system property - it's available since 1.5.0. See https://blog.jetbrains.com/kotlin/2023/08/compose-multiplatform-1-5-0-release/#enhanced-swing-interop

fun main() = SwingUtilities.invokeLater {
    System.setProperty("compose.swing.render.on.graphics", "true")

    val window = JFrame()
    window.defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE
    window.contentPane.layout = null
    window.contentPane.add(ComposePanel().apply {
        setContent {
            Box(Modifier.fillMaxSize().background(Color.Green.copy(alpha = 0.5f)))
        }
        setBounds(20, 20, 200, 200)
    })
    window.contentPane.add(JButton("Button").apply {
        setBounds(10, 10, 100, 50)
    })
    window.setSize(800, 600)
    window.isVisible = true
}

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.