Bringing Your Compose UI to Different Platforms

In Chapter 11, Developing for Different Form Factors, you learned how to use Window Size Classes, Jetpack WindowManager, and Canonical Layouts to make sure your app looks great on smartphones, tablets, and foldables. We investigated screen sizes, form factors, and hardware features, and understood how they influence app layout. You also learned that Window Size Classes help structure your user interface (UI). Knowing the generalized size of your app window is crucial for finding just the right layout. What just the right layout means depends on the purpose of your app. List-detail, Feed, and Supporting panes are great starting points for building the perfect UI. We closed Chapter 11 by discussing the anatomy of these so-called canonical layouts and learned when they are best used.

In this final chapter, I will show you how to bring your Jetpack Compose knowledge to systems other than Android—for example, the desktop (Windows...

Technical requirements

Please refer to the Technical requirements section of Chapter 1, Building Your First Compose App, for information about how to install and set up Android Studio, as well as how to get the sample apps. This section covers the ComposeMultiplatformDemo sample. To work with it, you need IntelliJ IDE Community Edition or Ultimnate 2020.3 or later. Installing IntelliJ IDEA is explained at https://www.jetbrains.com/help/idea/installation-guide.html.

Introducing Compose Multiplatform

While Jetpack Compose is the new UI toolkit on Android, its underlying ideas and principles make it attractive for other platforms, too. Let’s see why this is the case:

• The declarative approach was first implemented on the web
• SwiftUI, Apple’s implementation of a declarative UI framework, works well for iPhones, iPads, watches, and macOS devices
• Jetpack Compose UI elements use Material Design, which is designed for different platforms, device categories, and form factors

Most importantly, core concepts such as state and composable functions are not Android-specific. Therefore, if someone provides the toolchain (for example, the Kotlin compiler and the Compose compiler), any platform capable of showing graphics may be able to execute Compose apps. Certainly, there is an awful lot of work to be done.

For example, the Compose UI must be hosted somewhere. On Android, activities are used. On the web, this would be...

Building a cross-platform app

The main goal when using a cross-platform framework is to reuse code. However, there are situations when you want to do different things, depending on the platform. Kotlin Multiplatform and Compose Multiplatform help you achieve this with two new Kotlin keywords, expect and actual. Let’s see how they work.

The following code is part of compose-multiplatform-template. It’s inside shared/src/commonMain/kotlin/App.kt:

@Composable
fun App() {
  MaterialTheme {
    var greetingText by remember
      { mutableStateOf("Hello, World!") }
    var showImage by remember { mutableStateOf(false) }
    Column(
      Modifier.fillMaxWidth(),
      horizontalAlignment =
        Alignment.CenterHorizontally) {
      ...

Developing across platforms

One of the biggest advantages of a cross-platform framework is that you generate your apps from one code base. This allows you to reuse code and assets (such as images and text). In the previous section, Building a cross-platform app, you learned about the project structure of Compose Multiplatform and how you can share a composable function across Android and the desktop. I explained the relationship between the four main modules androidApp, iosApp, desktopApp, and shared, and introduced a concept called source sets, which help structure your shared code.

So far, we have focused on reusing code. But how about other resources? Usually, apps contain a lot of text that is shown to the user. What’s more, this text is often available in different languages. Consequently, changing, adding, or deleting text should apply to all platforms. To put it another way, we don’t want copies of text in androidApp and desktopApp. But how do we do that?

...

Summary

In this chapter, I showed you how to expand your Jetpack Compose skills beyond Android. We looked at the Compose Multiplatform framework and examined its project structure. compose-multiplatform-template from JetBrains is a great start for apps that target Android, iOS, and the desktop. You learned about the new expect and actual keywords and where to add source code. I also showed you how to incorporate dependencies into third-party libraries. In particular, we added the moko-resources library to provide multilingual text across platforms.

I sincerely hope you enjoyed reading this book. You now have a thorough understanding of the core principles of Jetpack Compose, as well as the important advantages over the traditional Android View system. Using a declarative approach makes writing great-looking apps easier than ever. No matter if your apps will remain on Android or you will be embracing other platforms, I can’t wait to see what beautiful ideas you are going to...

Exercise

All desktop platforms (Linux, macOS, and Windows) feature draggable and resizable app windows. In Chapter 11, Developing for Different Form Factors, I introduced you to Window Size Classes and explained how they help create a layout that adapts to window size changes. Using a fresh copy of the Compose Multiplatform project template, create a version of the WindowSizeClassDemo sample that works on Android and the desktop.