Implementing XML UI in Kotlin Multiplatform Projects

Kotlin Multiplatform (KMP) empowers developers to share code across different platforms, including Android, iOS, web, and desktop. However, UI implementation often varies because native UI toolkits differ greatly across these platforms. In this article, we’ll explore how to handle XML-based UI in Kotlin Multiplatform projects, primarily focusing on the Android platform, and strategies for managing UI code when targeting multiple platforms.

What is Kotlin Multiplatform (KMP)?

Kotlin Multiplatform allows developers to write code in Kotlin that can be compiled to multiple platforms. This enables the reuse of business logic, data models, and more, while still leveraging native UI toolkits for each platform.

Why Use Kotlin Multiplatform?

• Code Reuse: Share non-UI logic across platforms.
• Maintainability: Simplify maintenance by updating shared code in one place.
• Cost-Effective: Reduce development costs by minimizing platform-specific code.
• Performance: Use native UI for optimal performance on each platform.

Challenges of UI Implementation in KMP

The primary challenge in KMP is handling the UI layer, as native UI frameworks like XML-based layouts in Android and Storyboards/SwiftUI in iOS are platform-specific. It’s not feasible to share UI code directly across these different systems. The typical strategy is to abstract the UI-related logic and leave the actual UI implementation to the native platform-specific code.

Implementing XML UI in Kotlin Multiplatform Projects

In KMP, you’ll typically define your UI using XML layouts within the Android module and then interact with these layouts from your Kotlin code in the shared module.

Step 1: Set Up a KMP Project

First, set up a basic KMP project in IntelliJ IDEA. Choose the “Kotlin Multiplatform App” template, which creates a shared module and platform-specific modules (Android, iOS, etc.).

Step 2: Define XML Layout in Android Module

Create an XML layout file in the res/layout directory of your Android module. For example, create activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/messageTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello from Android!"
        android:textSize="20sp"
        android:layout_marginBottom="16dp" />

    <Button
        android:id="@+id/updateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Update Message" />

</LinearLayout>

Step 3: Access UI Elements in Android Activity

In your Android Activity, use setContentView() to load the XML layout and interact with UI elements using their IDs:

package com.example.kmpsample

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.example.kmpsample.shared.Greeting

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val messageTextView: TextView = findViewById(R.id.messageTextView)
        val updateButton: Button = findViewById(R.id.updateButton)

        messageTextView.text = Greeting().greet() // Use shared code

        updateButton.setOnClickListener {
            messageTextView.text = "Button Clicked!"
        }
    }
}

Step 4: Integrate Shared Code

The key is to keep the UI-related code (like setting text, handling button clicks) in the Android module while using the shared module for non-UI logic, such as data processing or business rules.

// In the shared module (commonMain)
package com.example.kmpsample.shared

class Greeting {
    fun greet(): String {
        return "Hello, ${Platform().platform}!"
    }
}

expect class Platform() {
    val platform: String
}

// In the Android module (androidMain)
package com.example.kmpsample.shared

import android.os.Build

actual class Platform actual constructor() {
    actual val platform: String = "Android ${Build.VERSION.SDK_INT}"
}

Handling UI Logic in Shared Code

To minimize platform-specific UI code, you can handle UI logic in the shared module using interfaces or abstract classes. This approach decouples the shared code from platform-specific UI implementations.

Example: UI Event Handling

Define an interface for UI events in the shared module:

// In the shared module (commonMain)
package com.example.kmpsample.shared

interface UIEventHandler {
    fun onUpdateButtonClicked()
}

Implement this interface in the Android Activity:

// In the Android module (androidApp)
package com.example.kmpsample

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.example.kmpsample.shared.Greeting
import com.example.kmpsample.shared.UIEventHandler

class MainActivity : AppCompatActivity(), UIEventHandler {

    private lateinit var messageTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        messageTextView = findViewById(R.id.messageTextView)
        val updateButton: Button = findViewById(R.id.updateButton)

        messageTextView.text = Greeting().greet()

        updateButton.setOnClickListener {
            onUpdateButtonClicked()
        }
    }

    override fun onUpdateButtonClicked() {
        messageTextView.text = "Button Clicked!"
    }
}

Alternative UI Frameworks

For complete UI code sharing, you can consider using cross-platform UI frameworks:

• Compose Multiplatform: Jetpack Compose support for other platforms such as desktop and web.
• KMMBridge: Third party libraries to help smooth integration between shared code and native UIs.

Conclusion

Implementing XML UI in Kotlin Multiplatform projects involves using platform-specific UI frameworks (like Android’s XML layouts) while sharing non-UI logic in the shared module. By carefully abstracting UI logic using interfaces and considering cross-platform UI frameworks, you can build maintainable and cost-effective multiplatform applications. Focus on leveraging the strength of native UI toolkits for each platform while maximizing code reuse in the shared Kotlin module.