Migrate your Android Project to Compose Multiplatform Project

Hi all, I have been working on a Compose Multiplatform project for last few months and this learning journey was remarkable. In same project I got chance to migrate android application codebase to Compose Multiplatform which was able to build apps for iOS, Android and Desktop.

Prerequisite for such migration is that your project should have

• Single activity and compose navigation for all composable screens.
• No fragments and no XML views
• Ktor as network api client
• Room or SqlDelight for local storage
• Use of expect/actual to write platform specific code

Here I will be sharing step by step process to migrate sample multi-modular android code into Compose Multiplatform.

Clone below repository to get android sample implementation. We will be converting this sample into Compose Multiplatform. (Branch: android_sample)

GitHub - abkhare/ComposeMultiplatformMigration: Migration to Compose Multiplatform

Add blow plugins in project and all module level build.gradle.

// Add these plugins in project build.gradle
alias(libs.plugins.kotlinMultiplatform) apply false
alias(libs.plugins.composeMultiplatform) apply false

// Add these plugins in each module build.gradle
alias(libs.plugins.kotlinMultiplatform)
alias(libs.plugins.composeMultiplatform)
// Remove if present in each module build.gradle
alias(libs.plugins.kotlin.android)

// Version Catalog:
kotlin = "2.0.0"
compose-multiplatform = "1.7.0"
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
composeMultiplatform = { id = "org.jetbrains.compose", version.ref = "compose-multiplatform" }
kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

Remove “compileOptions” and “kotlinOptions” if present in all module level build.gradle.

All all targets if you want to support your application on Web, iOS, Android and Desktop.

• wasm: Browser application
• androidTarget: Android application
• iosXXX: iOS application
• jvm: MacOs and Windows Desktop application running JVM

kotlin {
    @OptIn(ExperimentalWasmDsl::class)
    wasmJs {
        browser {
            val projectDirPath = project.projectDir.path
            commonWebpackConfig {
                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                    static = (static ?: mutableListOf()).apply {
                        // Serve sources to debug inside browser
                        add(projectDirPath)
                    }
                }
            }
        }
    }

    androidTarget {
        @OptIn(ExperimentalKotlinGradlePluginApi::class)
        compilerOptions {
            jvmTarget.set(JvmTarget.JVM_11)
        }
    }

    iosX64()
    iosArm64()
    iosSimulatorArm64()

    jvm("desktop")

    sourceSets {
        val desktopMain by getting
        commonMain.dependencies {

        }
        androidMain.dependencies {

        }
        iosMain.dependencies {

        }
        desktopMain.dependencies {

        }
        wasmJsMain.dependencies {

        }
    }
}

// Add this in app module
listOf(
    iosX64(),
    iosArm64(),
    iosSimulatorArm64()
).forEach { iosTarget ->
    iosTarget.binaries.framework {
        // This will "app" fromework
        baseName = "app"
        isStatic = true
    }
}
// Instead of this for ios target
iosX64()
iosArm64()
iosSimulatorArm64()

With sourSets, we can define all platform specific dependencies.

commonMain: It will have all multiplatform dependencies which is work on all declared platform. Before adding any dependencies here check whether that library has support on all platform you defined in gradle.

androidMain: dependencies which are supported on Android platform.

iosMain: dependencies which are supported on iOS platform.

desktopMain: dependencies which are supported on Desktop platform.

wasmJsMain: dependencies which are supported on Browser platform.

Note: Browser application are not advised to develop with Compose Multiplatform as it is alpha stage.

Message from google: “New ‘wasm’ target is Work-in-Progress and is subject to change without notice. Please report encountered issues to https://kotl.in/issue”

Add compose and module dependencies in commonMain. And sync the project. For navigation, make sure to use JetBrains navigation.

implementation(project(":FeatureOne"))
implementation(project(":FeatureTwo"))
implementation(project(":FeatureThree"))
implementation(compose.materialIconsExtended)
implementation(compose.ui)
implementation(compose.animationGraphics)
implementation(compose.material3)
implementation(compose.components.resources)
implementation(compose.components.uiToolingPreview)
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.animation)
implementation(libs.navigation)

// Version Catalog
navigation = "2.8.0-alpha08"
navigation = { group = "org.jetbrains.androidx.navigation", name = "navigation-compose", version.ref = "navigation" }

Now add four directories in each module -> src

commonMain/kotlin
androidMain/kotlin
iosMain/kotlin
desktopMain/kotlin
wasmJsMain/kotlin

Copy all code of compose, viewModel or business logic written with any multiplatform library into commonMain.

In our case for app module, we will move MainActivity, res/ and AndroidManifest.xml in androidMain/kotlin and rest all files in commonMain/kotlin in app module. if any resource/assets belongs to compose UI is present, then we will move them to commonMain/composeResources.

Similarly we will move files for other modules. And then build the project and try running on Android devices.

Current setup will only work for Android target so, we need to enable other platform target as well. So we will build other targets with the help of “Kotlin Multiplatform Wizard”.

Using Kotlin Multiplatform sample, let’s create sample with all required targets. Select Android, iOS, Desktop and Web download sample.

Try running all targets:

Output will be something like this:

Now let’s enable iOS target first, copy “iosApp” folder and paste it into our project.

Create MainViewController.kt in: app-> src/iosMain/kotlin

package com.abkhare.multiplatformmigration

import androidx.compose.ui.window.ComposeUIViewController

fun MainViewController() = ComposeUIViewController { AppNavigation() }

Now open “iosApp” in Xcode.

Modify build script to create compose framework in Xcode. Since our root module is app module so we need to specify “app:embedAndSignAppleFrameworkForXcode”.

Now point to correct framework in “ContentView.swift”.

You may have to resolve some errors using: https://github.com/abkhare/ComposeMultiplatformMigration/commit/97205c6d9a96a73cbdf7583cee4a6865a2ecf9bd

And run the project in Xcode. And that’s it you will be able to build the application on iPhone device.

Now to Enable “DeskTop” target, create “main.kt” in app-> src/desktopMain/kotlin.

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "MultiplatformSample",
    ) {
        AppNavigation()
    }
}

Now run the application by play icon beside main function.

You can find full working source code in below repository (branch: main)

GitHub - abkhare/ComposeMultiplatformMigration: Migration to Compose Multiplatform

Stay tuned, I will be sharing more such in-depth articles on Compose Multiplatform.