KMP Compose Multiplatform First Project Setup & Run Guide for Android & iOS

This tutorial teaches you how to set up and run your first Compose Multiplatform project on a Mac. I am using a Mac because Windows cannot run iOS apps. So, to develop apps for both Android and iOS, using Compose Multiplatform on a Mac is preferable.

KMP Compose Multiplatform First Project Setup & Run Guide for Android iOS

What is Compose Multiplatform?

Compose multiplatform is a UI framework created in Kotlin and developed by JetBrains to develop Android, iOS, desktop, and web apps using a single codebase. It is similar to Flutter and React native but faster because in Compose multiplatform we can integrate native code directly which is platform-specific, Though it is faster.

Prerequisites to run Compose Multiplatform:

1. 1. JAVA – JDK
   2. Android Studio as IDE
   3. Kotlin Multiplatform Plugin Installation in Android Studio
   4. SDK Manager for Android development
   5. AVD Manager to create an Android virtual device(Simulator)
   6. Xcode – to develop and run iOS apps.
   7. Cocoapods for iOS
   8. iOS simulator – to run iOS app
   9. Kotlin composes multiplatform projects.

1. Download & Install Java

1. Visit Java Archive Downloads and download the Java 18.0.2 version for your MAC OS. After downloading, it should look like this.
2. Double-click on the dmg file and start the installation.3. Follow all the steps and install Java 18.0.2.1 JDK in your MAC OS.

2. Setup Android Studio for Compose Multiplatform KMM:

1. Visit developer.android.com/studio and download the latest version of Android Studio. At the time of making this tutorial Android Studio Ladybug is present. When you download Studio, it will ask if your MAC chip is Intel or Apple silicon. Choose your chip type and download.
2. After downloading Android Studio your setup should look like this.
3. Drage Android Studio to Applications.
4. After successfully installing, Goto Apps and opening Android Studio.
5. Allow all the permissions and Android Studio Installation Setup Wizard to open, Click on Next to continue
6. Select the Standard option from the radio button and click on Next.
7. On the next screen, it will show you the default installation components. Click on Next again to install them.
8. Accept the license agreement and click Finish to install.
9. Wait for a few minutes to download all the essential components for Android Studio. It depends on your internet connection speed. Click on Finish.Now your Android Studio is installed and ready to use.

3. Install the Kotlin Multiplatform plugin in Android Studio

1. Click on Plugins.
2. Search for the keyword “Kotlin Multiplatform,” select the first result, and click the Install button to install the plugin.
3. Now it will ask you to Restart the IDE. Tap to restart and your AndroidStudio is ready to start development in Kotlin compose multiplatform mobile.

4. Creating AVD Manger(Android Virtual Device – Simulator)

1. AVD – Android virtual devices are simulators that test Android apps. To create your first AVD click on More Actions.
2. Click on Virtual Device Manager.
3. Now by default a virtual device is created but I prefer not to use it and create your own with your custom configuration. So click the 3 dotted menus present at the End of the virtual device.
4. Click on Delete to delete the existing simulator. It will ask for confirmation Press on the Yes button.

5. You can create an Android simulator with your own configuration now. Click on the “Create Virtual Device” link.

6. Select any Android device from the list, I am using Pixel 6 because it is faster than other devices.
7. You have to download the latest stable Android version from the AVD download manager. I am downloading Android 14 for now but you can also download the latest versions.
8. Wait from few minutes as it will download and install the Android version in your system.
9. After you have downloaded an Android version, that version will be highlighted. Then, select it and press the “Next” button.
10. Set your Simulator name and click on Advanced Settings.
11. On the next screen, You can set RAM for your AVD, Heap memory size, Internal storage size, SD card size, and Un-checkable device frame.
12. Your AVD has been successfully created. Click on the Play button to start the Android Virtual Device.
13. Wait for a few minutes and Your Android simulator will be started. Let the Android emulator run in the background.

5. Installing Xcode and configure MAC for iOS development

1. Click on the App Store icon.
2. Find Xcode in the search box and click on the Get button to install Xcode.
3. After installing Xcode, We have to download & install command line tools for XCode. So open your Terminal and type “xcode-select –install” command.
4. The next step is to download Cocoapods. Pods are used to download and SYNC dependencies in iOS projects. To download the Cocoapods first you have to download Homebrew. Open your terminal and execute this command to download and install Homebrew first. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
5. Execute this command to install Cocoapods brew install cocoapods .

6. Download & Configure the first KMP compose multiplatform Android project:

1. Open kmp.jetbrains.com and create your first KMP project.
2. After download the project zip file, Extract it and open the project in Android Studio
3. Select your KMP project and click on Open.
4. It will ask you to Trust and Open the project, Hit the Trust Protect button. Now your KMP project will open in Android Studio. Wait from few minutes as it will download Gradle and dependencies for this project and Sync the Gradle.
5. Click on the Play button present at the front of composeApp to run your KMP project in the Android simulator.Wait for a few minutes and your KMP project will be launched in the Android simulator.

7. Install Kotlin Multiplatform Plugin in Android Studio

1. Open Android Studio.
2. Click on Plugins, Search for Kotlin Multiplatform, and click on Install.
3. After successfully installing the plugin, Restart the Android studio.

 

8. Run KMP project in iOS Simulator from Android Studio

1. Click on the drop-down arrow.
2. Click on Edit Configurations.
3. Click on the PLUS button.
4. Select the iOS application from the list.
5. Enter your App Name, and Select the Xcode project file from your project folder. This file will be present in the iOS folder.
6. Now click on the Play button in Android Studio and your iOS app will be launched in the iOS simulator.

Hope you have liked my tutorial on the KMP installation guide. If you face a problem on any step feel free to comment and I will reply to you.