[Tutorial] Your First Kotlin Multiplatform iOS & Android Apps, the Easy Way!

Hi Kotlin, iOS, and Android lovers.

I am going to take you through the steps of creating a new Kotlin Multiplatform (KMP) project and create Android and iOS apps.

In this tutorial I am going to take the easy way path, using IntelliJ IDEA, promising you to have another tutorial using Android Studio.

As we are targeting the iOS, we must have a Mac machine with Xcode installed on it, or having a shared folder with a Mac to complete the tutorial.

1) Install IntelliJ IDEA Community EdItion, as it is free and support Android.

2) Install the JDK 8 (Java Development Kit), I advice you to download it from filehorse.com

3) Download the Android SDK (Software Development Kit)

4) Now we are ready to create our first KMP project.

5) Select Kotlin -> Mobile Android/iOS | Gradle, then click Next

6) For the Gradle JVM select the 1.8 java, this is the version that works with Android, as Android supports JDK 1.7 & 1.8, and that was the reason for downloading the JDK, then click Next.

7) Then change the Project Name and Location, and click Finish. I used KMP as my project name.

8) Every time you create a KMP or Android project might start with Error, don't panic, this is normal, the IDE just don't know where the Android SDK.

9) You can easily enter the SDK location, rebuild the project, and all is Good.

10) Now we had the KMP project created for us with environment for both the iOS and Android.

11) We will find to Apps folder if we are in the Project preview, app folder (that contains all our KMP code for business and magic), and iosApp folder (which contains the Xcode project created for us), and that was the creating that tutorial with the IntelliJ IDEA.

12) Lets navigate in the app folder, we will find under app->src folder androidMain, iosMain, and commonMain. Those are the main folders were all the magic happens, and business written.

13) Under the commonMain, we will find the Sample.kt file. This files contains the common business APIs and classes that is going to be called and consumed from both iOS and Android. I the class, variable, or method needs data from the native platform we must use (expect), that is how we till the native platform code the necessity to override or modify that variable. Remember you classes should be public to be able to see from iOS and Android classes.

In our example we can see that we have a hello() function that returns String when called with message "Hello from ${Platform.name}", and this an expect variable that should return "iOS" from iOS simulator and "Android" from Android emulator.

14) Now let open the SampleIos.kt file under the iosMain folder, we will find the (expect) val and object overridden by (actual), and passing the "iOS" string.

15) Same we will find that for Android the string was overridden to "Android" in the SampleAndroid.kt under the main folder. I still advice to put Android logic under the androidMain folder instead.

16) In the previous image you will find that from Android class we called the hello() function from the commonMain class, and inserted its text in the Android activity layout.

17) Now to run the application on Android emulator first we have to create AVD (Android Virtual Device), or connect to mobile. Then create Android configuration.

18) Then change the Module to app, and change the name to "AndroidApp" or as you like.

19) Now Run, test, and enjoy your work.

20) Voilà!! PERFECT!!

21) Now to try in Xcode and iOS we must first run the project Gradle wrapper for iOS. Remember!! This step should be done regularly every time we do change in iosMain or commonMain.

22) Now let's open the project with Xcode.

23) We can see that the iOS ViewController calls, the Proxy().proxyHello() method from the KMP commonMain and change the view label.text

24) Let's run and see.

25) Just AMAZING!! And we are done!

You can find the tutorial video with extra info and implementation in this video:

And the session for why to use Kotlin Multiplatform, and what is the difference with other market technologies in this video:

And previous session slides here: