Make your Android application work on iOS – tutorial

Decide what code to make cross-platform

Decide which code of your Android application is better to share for iOS and which to keep native. A simple rule is: share what you want to reuse as much as possible. The business logic is often the same for both Android and iOS, so it's a great candidate for reuse.

In your sample Android application, the business logic is stored in the package com.jetbrains.simplelogin.androidapp.data. Your future iOS application will use the same logic, so you should make it cross-platform, as well.

Create a shared module for cross-platform code

The cross-platform code that is used for both iOS and Android will be stored in a shared module. The Kotlin Multiplatform plugin for Android Studio provides a wizard for creating such modules.

Create a shared module and connect it to both the existing Android application and your future iOS application:

1. In Android Studio settings, select the Advanced Settings section and turn on the Enable experimental Multiplatform IDE features option.

2. Restart Android Studio for the changes to take effect.

3. Select File | New | New Module from the main menu.

4. In the list of templates, select Java or Kotlin Library. Enter the library name shared and the package name com.jetbrains.simplelogin.shared.

5. Click Finish. The wizard creates a base module that you'll expand into a Kotlin Multiplatform module.

6. In the root build.gradle.kts file, replace the contents with the following code to properly apply Gradle plugins:

   plugins { alias(libs.plugins.androidApplication) apply false alias(libs.plugins.kotlinAndroid) apply false alias(libs.plugins.kotlinMultiplatform) apply false alias(libs.plugins.androidLibrary) apply false }

7. In the shared/build.gradle.kts file, define the necessary KMP targets. To do that, replace the contents of the file with the following code:

   import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi import org.jetbrains.kotlin.gradle.dsl.JvmTarget plugins { alias(libs.plugins.kotlinMultiplatform) alias(libs.plugins.androidLibrary) } kotlin { androidTarget { @OptIn(ExperimentalKotlinGradlePluginApi::class) compilerOptions { jvmTarget.set(JvmTarget.JVM_11) } } listOf( iosX64(), iosArm64(), iosSimulatorArm64() ).forEach { iosTarget -> iosTarget.binaries.framework { baseName = "Shared" isStatic = true } } sourceSets { commonMain.dependencies { // Contains your multiplatform dependencies } } } android { namespace = "com.jetbrains.simplelogin.shared" compileSdk = libs.versions.android.compileSdk.get().toInt() compileOptions { sourceCompatibility = JavaVersion.VERSION_11 targetCompatibility = JavaVersion.VERSION_11 } defaultConfig { minSdk = libs.versions.android.minSdk.get().toInt() } }

8. Sync the Gradle files as suggested by the IDE or using the File | Sync Project with Gradle Files menu item.

9. In the shared/src directory, create androidMain/kotlin, commonMain/kotlin, and iosMain/kotlin directories.

10. In the shared/src directory, delete the main directory.

11. Inside those directories, create packages and files to replicate the following structure:

12. Add code to the files that you created:

    • For commonMain/Platform.kt:

      package com.jetbrains.simplelogin.shared interface Platform { val name: String } expect fun getPlatform(): Platform

    • For commonMain/Greeting.kt:

      package com.jetbrains.simplelogin.shared class Greeting { private val platform = getPlatform() fun greet(): String { return "Hello, ${platform.name}!" } }

    • For androidMain/Platform.android.kt:

      package com.jetbrains.simplelogin.shared import android.os.Build class AndroidPlatform : Platform { override val name: String = "Android ${Build.VERSION.SDK_INT}" } actual fun getPlatform(): Platform = AndroidPlatform()

    • For iosMain/Platform.ios.kt:

      package com.jetbrains.simplelogin.shared import platform.UIKit.UIDevice class IOSPlatform: Platform { override val name: String = UIDevice.currentDevice.systemName() + " " + UIDevice.currentDevice.systemVersion } actual fun getPlatform(): Platform = IOSPlatform()

13. In the app/build.gradle.kts file, set the android.defaultConfig.minSdk value to 24.

14. Sync the Gradle files as suggested by the IDE or using the File | Sync Project with Gradle Files menu item.

You can find the resulting state of the project in the shared_module branch of the GitHub repository.

If you want to better understand the layout of the resulting project, see basics of Kotlin Multiplatform project structure.

Add a dependency on the shared module to your Android application

To use cross-platform code in your Android application, connect the shared module to it, move the business logic code there, and make this code cross-platform.

1. Add a dependency on the shared module to the app/build.gradle.kts file:

   dependencies { // ... implementation(project(":shared")) }

2. Sync the Gradle files as suggested by the IDE or using the File | Sync Project with Gradle Files menu item.

   

3. In the app/src/main/java/ directory, open the LoginActivity.kt file in the com.jetbrains.simplelogin.androidapp.ui.login package.

4. To make sure that the shared module is successfully connected to your application, dump the greet() function result to the log by adding a line to the onCreate() method:

   override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) Log.i("Login Activity", "Hello from shared module: " + (Greeting().greet())) // ... }

5. Follow Android Studio's suggestions to import missing classes.

6. In the toolbar, select app from the dropdown and click Debug .

   

7. On the Logcat tab, search for Hello in the log, and you'll find the greeting from the shared module.

   

Make the business logic cross-platform

You can now extract the business logic code to the Kotlin Multiplatform shared module and make it platform-independent. This is necessary for reusing the code for both Android and iOS.

1. Move the business logic code com.jetbrains.simplelogin.androidapp.data from the app directory to the com.jetbrains.simplelogin.shared package in the shared/src/commonMain directory.

   

2. When Android Studio asks what you'd like to do, select to move the package, and then approve the refactoring.

   

3. Ignore all warnings about platform-dependent code and click Continue.

   

4. Remove Android-specific code by replacing it with cross-platform Kotlin code or connecting to Android-specific APIs using expected and actual declarations. See the following sections for details:

Run your cross-platform application on Android

Run your cross-platform application for Android to make sure it works.

Create an iOS project in Xcode

1. In Xcode, click File | New | Project.

2. Select a template for an iOS app and click Next.

   

3. As the product name, specify simpleLoginIOS and click Next.

   

4. As the location for your project, select the directory that stores your cross-platform application, for example, kmp-integration-sample.

In Android Studio, you'll get the following structure:

You can rename the simpleLoginIOS directory to iosApp for consistency with other top-level directories of your cross-platform project. To do that, close Xcode and then rename the simpleLoginIOS directory to iosApp. If you rename the folder with Xcode open, you'll get a warning and may corrupt your project.

Connect the framework to your iOS project

Once you have the framework, you can connect it to your iOS project manually.

Connect your framework to the iOS project manually:

1. In Xcode, open the iOS project settings by double-clicking the project name.

2. On the Build Phases tab of the project settings, click the + and add New Run Script Phase.

   

3. Add the following script:

   cd "$SRCROOT/.." ./gradlew :shared:embedAndSignAppleFrameworkForXcode

   

4. Move the Run Script phase before the Compile Sources phase.

   

5. On the Build Settings tab, disable the User Script Sandboxing under Build Options:

   

6. Build the project in Xcode. If everything is set up correctly, the project will build successfully.

Use the shared module from Swift

1. In Xcode, open the ContentView.swift file and import the shared module:

   import shared

2. To check that it is properly connected, use the greet() function from the shared module of your cross-platform app:

   import SwiftUI import shared struct ContentView: View { var body: some View { Text(Greeting().greet()) .padding() } }

3. Run the app from Xcode to see the result:

   

4. In the ContentView.swift file, write code for using data from the shared module and rendering the application UI:

   import SwiftUI import shared struct ContentView: View { @State private var username: String = "" @State private var password: String = "" @ObservedObject var viewModel: ContentView.ViewModel var body: some View { VStack(spacing: 15.0) { ValidatedTextField(titleKey: "Username", secured: false, text: $username, errorMessage: viewModel.formState.usernameError, onChange: { viewModel.loginDataChanged(username: username, password: password) }) ValidatedTextField(titleKey: "Password", secured: true, text: $password, errorMessage: viewModel.formState.passwordError, onChange: { viewModel.loginDataChanged(username: username, password: password) }) Button("Login") { viewModel.login(username: username, password: password) }.disabled(!viewModel.formState.isDataValid || (username.isEmpty && password.isEmpty)) } .padding(.all) } } struct ValidatedTextField: View { let titleKey: String let secured: Bool @Binding var text: String let errorMessage: String? let onChange: () -> () @ViewBuilder var textField: some View { if secured { SecureField(titleKey, text: $text) } else { TextField(titleKey, text: $text) } } var body: some View { ZStack { textField .textFieldStyle(RoundedBorderTextFieldStyle()) .autocapitalization(.none) .onChange(of: text) { _ in onChange() } if let errorMessage = errorMessage { HStack { Spacer() FieldTextErrorHint(error: errorMessage) }.padding(.horizontal, 5) } } } } struct FieldTextErrorHint: View { let error: String @State private var showingAlert = false var body: some View { Button(action: { self.showingAlert = true }) { Image(systemName: "exclamationmark.triangle.fill") .foregroundColor(.red) } .alert(isPresented: $showingAlert) { Alert(title: Text("Error"), message: Text(error), dismissButton: .default(Text("Got it!"))) } } } extension ContentView { struct LoginFormState { let usernameError: String? let passwordError: String? var isDataValid: Bool { get { return usernameError == nil && passwordError == nil } } } class ViewModel: ObservableObject { @Published var formState = LoginFormState(usernameError: nil, passwordError: nil) let loginValidator: LoginDataValidator let loginRepository: LoginRepository init(loginRepository: LoginRepository, loginValidator: LoginDataValidator) { self.loginRepository = loginRepository self.loginValidator = loginValidator } func login(username: String, password: String) { if let result = loginRepository.login(username: username, password: password) as? ResultSuccess { print("Successful login. Welcome, \(result.data.displayName)") } else { print("Error while logging in") } } func loginDataChanged(username: String, password: String) { formState = LoginFormState( usernameError: (loginValidator.checkUsername(username: username) as? LoginDataValidator.ResultError)?.message, passwordError: (loginValidator.checkPassword(password: password) as? LoginDataValidator.ResultError)?.message) } } }

5. In simpleLoginIOSApp.swift, import the shared module and specify the arguments for the ContentView() function:

   import SwiftUI import shared @main struct SimpleLoginIOSApp: App { var body: some Scene { WindowGroup { ContentView(viewModel: .init(loginRepository: LoginRepository(dataSource: LoginDataSource()), loginValidator: LoginDataValidator())) } } }

6. Run the Xcode project to see that the iOS app shows the login form. Enter "Jane" for the username and "password" for the password. The app validates the input using the shared code: