Compose Multiplatform : Android and iOS app code at one place
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(),
)
}
Run Your Application
Create your virtual device if required and run your applications.
Conclusion
In this blog, we learned how to use Compose Multiplatform to create common UIs for Android and iOS applications.
We looked at the tools needed for setup and its process. Furthermore, we developed our first demo application.
For Desktop apps, check the following link : Desktop Compose Multiplatform App
I hope you enjoyed this tutorial. If you have any questions or feedback, please feel free to share in the comments.
Happy Learning 🙂
Visit my other Android blogs as well : Blogs