Jetpack Compose for Desktop: Milestone 2 Released

Just one month ago, we released Jetpack Compose for Desktop Milestone 1, the first public iteration of our modern declarative UI framework. We were delighted about how the Kotlin community has embraced Compose for Desktop. It was awe-inspiring to see people bring their Android apps to the desktop, re-implement the user interfaces of famous applications, and bring entirely new experiences to life with Compose for Desktop.

Visit the Compose for Desktop landing page

Since then, we have been hard at work to bring you the next version. Today we’re publishing Compose for Desktop Milestone 2, dedicated to bringing better development experience and interoperability. It comes with a new project wizard, improves the compatibility of Compose for Desktop with different operating and build systems, introduces new code reuse functionality, and fixes a number of bugs.

In this post, we would like to introduce you to some of the highlights of this release. If you’re interested in further details, you can also take a look at the full changelog here.

Quick start via project wizard

To get you started with building great user interfaces even faster, we have added a project wizard template in IntelliJ IDEA 2020.3. Creating a Compose for Desktop application is now easier than ever: When creating a new project using File | New | Project…, select one of the templates available in the “Compose for Desktop category inside the Kotlin wizard, and start building your application without having to write the Gradle configuration yourself!

Compatibility enhancements

Compose for Desktop Milestone 2 introduces support for macOS 10.13 and 10.14 (10.15 and later was supported in M1 already). Previously, targeting those operating system versions required users to create a custom build of Skiko, the graphics library used by Compose for Desktop. We have also added support for the newest versions of Gradle, supporting Gradle 6.6 and 6.7.

Compose for Desktop has also arrived for next-generation Macs: applications built with it now work natively on Apple Silicon! Your applications can now be run directly on Apple’s ARM-based hardware like the M1, without relying on dynamic binary translation through Rosetta 2.

Embedding Compose for Desktop in Swing applications

Easy interoperability is one of the core values for both Jetpack Compose and Compose for Desktop. Milestone 2 adds a new mechanism called ComposePanel, allowing you to seamlessly add Compose UI to a Swing-based container like a JFrame. This enables you to experiment with and gradually adopt Compose for Desktop in a Swing-based environment without having to completely replace your existing user interface.

In the example below, you can see a quick demonstration of a ComposePanel in action: it adheres to the layout of its parent JFrame, and it allows the state to be modified via controls implemented in both Swing and Compose.

val leftClicks = mutableStateOf(0)
val rightClicks = mutableStateOf(0)

fun main() {
   val window = JFrame()
   val composePanel = ComposePanel()
   with(window) {
       defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE
       title = "SwingComposeWindow"
       contentPane.add(actionButton("Left Swing") { leftClicks.value++ }, BorderLayout.WEST)
       contentPane.add(actionButton("Right Swing") { rightClicks.value++ }, BorderLayout.EAST)
       contentPane.add(composePanel, BorderLayout.CENTER)
       composePanel.setContent { ComposeContent() }
       setSize(800, 600)
       isVisible = true
   }

fun actionButton(text: String, action: (() -> Unit)? = null): JButton =
   JButton(text).apply { addActionListener { action?.invoke() } }

@Composable
fun ComposeContent() {
   Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
       Row {
           Counter("Left", leftClicks)
           Spacer(modifier = Modifier.width(25.dp))
           Counter("Right", rightClicks)
       }
   }
}

@Composable
fun Counter(text: String, counter: MutableState<Int>) {
// . . .

Check out the tutorial for integrating Compose for Desktop into Swing-based applications in the repository for more information.

Please note that for now, the inverse (adding a Swing component to a Compose for Desktop composition) is not supported.

Support for Android XML icons

Starting with Milestone 2, Compose for Desktop now also provides support for Android’s XML-based vector images (called vector drawables), allowing you to render these images directly in your desktop application without having to adjust them first. This also means that you can share vector drawables as common resources in a cross-platform application targeting both Android and desktop.

import androidx.compose.desktop.Window
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.vectorXmlResource

fun main() {
    Window {
        Image(
            imageVector = vectorXmlResource("images/compose.xml"),
            modifier = Modifier.fillMaxSize()
        )
    }
}

For the latest up-to-date information on how to use Android XML icons with Compose for Desktop, including a sample XML image file, please check out the related section in the Image and in-app icons manipulation tutorial.

Pre-release notes

This is the second milestone release of Compose for Desktop, and we have been hard at work trying to provide you with the best experience possible. Please keep in mind that before a stable release, some of the APIs provided by Compose for Desktop may still change. We are quickly progressing toward the first stable, production-ready release and we rely heavily on your feedback to help us achieve this.

Give feedback and join the discussion!

Milestone releases are the most important time for you to provide us with feedback because they allow us to fix critical issues or include additional features before the stable release. Should you encounter any problems while working with Compose for Desktop, or identify any use cases that are not yet covered by our desktop-specific APIs, please share them with us in the project’s issue tracker.

If you want to talk to other developers and team members, we also invite you to join the discussion on the Kotlin Slack. In #compose-desktop you can find discussions about Compose for Desktop, and in #compose you can discuss general topics involving Compose and Jetpack Compose on Android.

Keep building awesome user interfaces using Compose for Desktop!