Compose Multiplatform : Android and iOS app code at one place

5 min readJun 6, 2023

Nowadays app development is very common. One of the most popular ways to create any application is to make them natively.
Native application development means creating separate projects for each platform. We use different technologies to create them like for android we use Java and Kotlin languages and for iOS apps we use Objective-C and Swift.

What if I say there is a way to handle business logic of these applications at a common place. Yes, with the help of Kotlin Multiplatform, we can achieve this.

What if I say there is a common way to share UIs as well.

If that's the case, app development will definitely be quicker and we will be able to provide uniformity between the UIs of various platforms.

Can I share UIs with Kotlin Multiplatform?

Yes, you can share UIs with the help of Compose Multiplatform.

In this blog, we will learn how to set up a common project and create a common UI for Android & iOS platforms through Compose Multiplatform.

Compose Multiplatform

Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms with Kotlin. It is based on Jetpack Compose and developed by JetBrains and open-source contributors.

The framework is built using Kotlin Multiplatform.

Supported platforms

Android (via Jetpack Compose)
iOS (Alpha)
Desktop (Windows, MacOS, Linux)
Web (Experimental)

Let’s understand how we create Android and iOS applications with Compose Multiplatform.

Install the following tools

You need Mac machine
Xcode : Setup
Android Studio : Setup
The Kotlin Multiplatform Mobile plugin : Check below section for its setup
The CocoaPods dependency manager : Installation and How to use it

The Kotlin Multiplatform Mobile plugin

Before starting the project, install the following plugin in the Android Studio project.

Settings -> Plugins -> Kotlin Multiplatform Mobile

Check your environment

You need to run the following commands in your Android Studio terminal to check everything is set up correctly or not.

PS:- If you face any issue during setup, please feel free to contact me over the comments section or you can reach me through LinkedIn as well.

Create your first App using Compose Multiplatform

Project Setup

Check following link and download the project template : Jetbrains Compose Multiplatform Repo
Unzip and open the above project in Android Studio

Project Structure

To check the project structure, change Android option to Project.

Now, we can check androidApp and iosApp folders. Also, there is a shared folder where we will write our shared business logic and create common UIs.

App.kt in shared folder

Here, we can modify this file and create our own view.

const val contentData = "Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms with Kotlin. " +
        "It is based on Jetpack Compose and developed by JetBrains and open-source contributors." +
        "It is based on Jetpack Compose and developed by JetBrains and open-source contributors.\n" +
        "\n" +
        "You can choose the platforms across which to share your UIs using Compose Multiplatform:\n" +
        "\n" +
        "iOS (Alpha)\n" +
        "Android (via Jetpack Compose)\n" +
        "Desktop (Windows, MacOS, Linux)\n" +
        "Web (Experimental)\n"

const val MIN_LINES = 2

@Composable
fun App() {

    var isExpanded by remember { mutableStateOf(false) }
    val textLayoutResultState = remember { mutableStateOf<TextLayoutResult?>(null) }
    var isClickable by remember { mutableStateOf(false) }
    var expandableText by remember { mutableStateOf(contentData) }

    val textLayoutResult = textLayoutResultState.value
    LaunchedEffect(textLayoutResult) {
        if (textLayoutResult == null) return@LaunchedEffect
        when {
            isExpanded -> {
                expandableText = "$contentData \nShow Less"
            }
            !isExpanded && textLayoutResult.hasVisualOverflow -> {
                val lastCharIndex = textLayoutResult.getLineEnd(MIN_LINES - 1)
                val showMoreString = "... Show More"
                val adjustedText = contentData
                    .substring(startIndex = 0, endIndex = lastCharIndex)
                    .dropLast(showMoreString.length)
                    .dropLastWhile { it == ' ' || it == '.' }

                expandableText = "$adjustedText$showMoreString"
                isClickable = true
            }
        }
    }

    Text(
        text = expandableText,
        maxLines = if (isExpanded) Int.MAX_VALUE else MIN_LINES,
        onTextLayout = { textLayoutResultState.value = it },
        modifier = Modifier.clickable(enabled = isClickable) { isExpanded = !isExpanded }
            .animateContentSize(),
    )
}