Building Multiplatform Weather App using KMM : Part 1 — Project Setup & UI

With a lot of mobile app development demand which requires the development process to be more faster & efficient, cross-platform mobile app development (also known as hybrid mobile app development) has been favourite tool for many company/agency. The top cross-platform mobile app development frameworks such as React-Native or Flutter has become most demanded skill for mobile app developer.

However cross-platform mobile app still will not satisfy certain quality required by each respective platform. Native apps have all the UX/UI features for their respective platform. Because they use separate code for iOS and Android, they can take advantage of all the built-in features those mobile devices have.

This is where Kotlin Multiplatform has become solution for the problem. Kotlin Multiplatform enables the developer to write specific code for each platform. While still be able share specific common business logic.

This series will be a documentation how I will attempt to develop a simple weather app using Kotlin Multiplatform.

A. UI Design The app design is simply taken when I browsed around on Figma. For initial stage it will be focused only on black background with 3 texts consist of place, temperature and simple description. Later on I will develop the app further, to add more function.

B. Setup Project In Android Studio, select File | New | New Project. Select Kotlin Multiplatform App in the list of project templates, and click Next

Specify a name for your first application, and click Next.

In the iOS framework distribution list, select the Regular framework option.

Keep the default names for the application and shared folders. Click Finish.

To view the full structure of your mobile multiplatform project, switch the view from Android to Project.

Each Kotlin Multiplatform project includes three modules:

• shared is a Kotlin module that contains the logic common for both Android and iOS applications — the code you share between platforms. It uses Gradle as the build system that helps you automate your build process. The shared module builds into an Android library and an iOS framework.
• androidApp is a Kotlin module that builds into an Android application. It uses Gradle as the build system. The androidApp module depends on and uses the shared module as a regular Android library.
• iosApp is an Xcode project that builds into an iOS application. It depends on and uses the shared module as an iOS framework. The shared module can be used as a regular framework or as a CocoaPods dependency, based on what you’ve chosen in the previous step in iOS framework distribution. In this tutorial, it’s a regular framework dependency.

C. Edit UI for Android The specific UI code for Android App inside MainActivity.kt contains one line of simple text as default.

@Composable
fun GreetingView(text: String) {
    Text(text = text)
}

We will replace this with WeatherView(). We also should adjust all the typography size & colors in MyApplicationTheme.kt

@Composable
fun WeatherView() {
    Column(modifier = Modifier.background(color = Color.Black)
        .padding(24.dp)) {
        Text("Montreal", style = MaterialTheme.typography.body1)
        Text("19°", style = MaterialTheme.typography.h2)
        Text("Clear sky", style = MaterialTheme.typography.body1)
    }
}

D. Edit UI for IOS Similar with Android, the IOS UI default only contains one line of String

struct ContentView: View {
 let greet = Greeting().greet()

 var body: some View {
  Text(greet)
 }
}

And we will replace that with new UI that contains 3 lines of String

struct ContentView: View {
    var body: some View {
        Color.black
            .ignoresSafeArea()
            .overlay(
                VStack {
                    Text("Montreal").foregroundColor(Color.white)
                        .font(.largeTitle)
                    Text("19°")
                        .foregroundColor(Color.white)
                        .font(.system(size: 96))
                    Text("Clear sky")
                        .foregroundColor(Color.white)
                        .font(.largeTitle)
        })
    }
}

Note : UI for Android is using Jetpack Compose. UI for IOS using SwiftUI. I will assume reader has been familiar with these 2 frameworks.

To Be cont’d to Part 2

Visit us at DataDrivenInvestor.com

Subscribe to DDIntel here.

Have a unique story to share? Submit to DDIntel here.

Join our creator ecosystem here.

DDIntel captures the more notable pieces from our main site and our popular DDI Medium publication. Check us out for more insightful work from our community.

DDI Official Telegram Channel: https://t.me/+tafUp6ecEys4YjQ1

Follow us on LinkedIn, Twitter, YouTube, and Facebook.