Compose Multiplatform 1.6.0 – Resources, UI Testing, iOS Accessibility, and Preview Annotation

Sebastian Aigner Aleksey Zamulla

Read this post in other languages:

• 日本語
,
• 한국어
,
• 简体中文

Compose Multiplatform is a declarative UI framework built by JetBrains that allows developers to share UI implementations across different platforms. The 1.6.0 release brings several powerful features, as well as compatibility with the latest Kotlin version and changes from Google’s latest Jetpack Compose update.

Get Started with Compose Multiplatform

This release of Compose Multiplatform:

• Revamps the resource management library.
• Introduces a UI testing API.
• Adds iOS accessibility support.
• Brings a host of other features and improvements.

For a description of all notable changes, see our What’s new in Compose Multiplatform 1.6.0 page or check the release notes on GitHub.

Common resources API

The biggest and most anticipated change in Compose Multiplatform 1.6.0 is the improvement of the API for sharing and accessing resources in common Kotlin code. This API now allows you to include and access more types of resources in your Compose Multiplatform applications.

The resources are organized in a number of directories as part of the commonMain source set:

• composeResources/drawable contains images
• composeResources/font contains fonts
• composeResources/values contains strings (in the format of strings.xml)
• composeResources/files contains any other files.

Compose Multiplatform generates type-safe accessors for all of these resource types (excluding the files directory). For example, after placing a vector image compose-multiplatform.xml in the composeResources/drawable directory, you can access it in your Compose Multiplatform code using the generated Res object:

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import kotlinproject.composeapp.generated.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

@OptIn(ExperimentalResourceApi::class)
@Composable
fun Logo() {
    Image(
        painterResource(Res.drawable.compose_multiplatform),
        contentDescription = "CMP Logo"
    )
}

The new resources API also allows you to provide variations of the same resource for different use cases, including locale, screen density, or theme. Whether you’re localizing text, changing the colors of your icons in dark mode, or providing alternative images based on screen resolution, you can express these constraints by adding qualifiers to the directory names.

For a closer look at qualifiers for resources, as well as an in-depth overview of the new resources API in Compose Multiplatform 1.6.0, take a look at the official documentation!

Common API for UI testing

UI testing helps you make sure that your application behaves the way it is supposed to. With Compose Multiplatform 1.6.0, we’re introducing an experimental API that allows you to write common UI tests for Compose Multiplatform that validate the behavior of your application’s user interface across the different platforms supported by the framework.

For example, you may want to ensure that a custom component correctly shows an informative string with the proper prefix:

@Composable
fun MyInfoComposable(info: String, modifier: Modifier = Modifier) {
    Text(modifier = modifier, text = "[IFNO] $info")
}

In the latest version of Compose Multiplatform, you can now use UI tests to validate that the component does indeed correctly prefix the text when rendered. To do so, you can use the same finders, assertions, actions, and matchers as you would with Jetpack Compose on Android. After following the setup instructions from the documentation you can write a test that ensures the prefix is added properly:

import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.runComposeUiTest
...

class InformationTest {
    @OptIn(ExperimentalTestApi::class)
    @Test
    fun shouldPrefixWithInfoTag() = runComposeUiTest {
        setContent {
            MyInfoComposable("Important things!", modifier = Modifier.testTag("info"))
        }
        onNodeWithTag("info").assertTextContains("[INFO]", substring = true)
    }
}

Running this test on any of your target platforms will show you the test results (and in this case, help you spot and correct a typo!):

iOS accessibility support

Compose Multiplatform for iOS now allows people with disabilities to interact with the Compose UI with the same level of comfort as with the native UI:

• Screen readers and VoiceOver can access the content of the Compose Multiplatform UI.
• Compose Multiplatform UI supports the same gestures as the native UIs for navigation and interaction.

This is possible because the Compose Multiplatform semantic data is automatically mapped into an accessibility tree. You can also make this data available to Accessibility Services and use it for testing with the XCTest framework.

For details on the implementation and limitations of the current accessibility support, see the documentation page.

@Preview annotation for Fleet

With 1.6.0, Compose Multiplatform introduces the common @Preview annotation (previously available only for Android and Desktop). This annotation is supported by JetBrains Fleet (starting with Fleet 1.31). Add @Preview to your @Composable function, and you’ll be able to open the preview via the gutter icon:

Try it out with a project generated by the Kotlin Multiplatform wizard!

Fleet currently supports the @Preview annotation for @Composable functions without parameters. To use this common annotation, add the experimental compose.components.uiToolingPreview library to your dependencies (as opposed to compose.uiTooling, used for desktop and Android).

Separate platform views for popups, dialogs, and dropdown menus

When mixing Compose Multiplatform with SwiftUI, you may only want to have some widgets of a given screen rendered using Compose. Starting with version 1.6, when you create Dialog, Popup, or Dropdown composables in these scenarios, they can expand beyond the bounds of the individual widget and even expand across the entire screen!

This is also possible for desktop targets, although as an experimental feature for now.

Other notable changes

To learn about the rest of the changes included in this release:

• See What’s new in Compose Multiplatform 1.6.0 page where we talk about improvements and features introduced in 1.6.0 in more detail.
• Compose Multiplatform release notes on GitHub has an exhaustive list of merged pull requests for 1.6.0.

What else to read and watch

• Get started with Compose Multiplatform — tutorial

• Build Apps for iOS, Android, and Desktop With Compose Multiplatform — video

Subscribe to Kotlin Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!