Update the user interface

Update the Android module

The androidApp module contains an Android application, defines its main activity and the UI views, and uses the shared module as a regular Android library. The UI of the application uses the Jetpack Compose framework.

Make some changes and see how they are reflected in the UI:

1. Navigate to the MainActivity.kt file in androidApp.

2. Find the Greeting class invocation. Select the greet() function and use the ⌘ B shortcut to go to the function's declaration. You'll see that it's the same class from the shared module you edited in the previous step.

3. In Greeting.kt, update the greet() function:

   fun greet(): List<String> = buildList { add(if (Random.nextBoolean()) "Hi!" else "Hello!") add("Guess what this is! > ${platform.name.reversed()}!") }

   Now it returns a list of strings.

4. Go back to MainActivity.kt. It no longer compiles because the GreetingView composable expects a String argument. Update its definition:

   @Composable fun GreetingView(phrases: List<String>) { LazyColumn( contentPadding = PaddingValues(20.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { items(phrases) { phrase -> Text(phrase) Divider() } } }

   Here the LazyColumn composable shows the list of Text items, adds padding around the content, and adds a space between the list items.

5. Follow Android Studio's suggestions to import the missing dependencies.

6. Update the preview, passing a list as an argument:

   @Preview @Composable fun DefaultPreview() { MyApplicationTheme { GreetingView(listOf("Hello, Android!")) } }

7. Now you can run the Android app to ensure it displays the list:

   

Work with the iOS module in Xcode

iosApp is an Xcode project that builds into an iOS application. It depends on and uses the shared module as an iOS framework. The UI of the app is written in Swift.

Implement the same changes as in the Android app:

1. Launch Xcode. Select Open Existing Project.

2. Navigate to your project, for example KotlinMultiplatformSandbox, and select the iosApp folder. Click Open.

3. In the ContentView.swift file, select the greet() function and use the ⌃ ⌘ J shortcut to jump to the function's definition.

   You'll see the Objective-C declarations for the Kotlin functions defined in the shared module. Kotlin types are represented as Objective-C types when used from Objective-C/Swift. Here the greet() function returns List<String> in Kotlin and is seen from Swift as returning NSArray<NSString>. For more on type mappings, see Interoperability with Swift/Objective-C.

4. If you try running the project, the build will fail. As in the Android app earlier, the Swift code that uses the greet() function doesn't compile because its declaration is now different. Change the SwiftUI code to display a list of items:

   struct ContentView: View { let phrases = Greeting().greet() var body: some View { List(phrases, id: \.self) { Text($0) } } }

   • The results of the greet() call are stored in the phrases variable (let in Swift is similar to Kotlin's val).

   • The List function produces a list of Text items.

5. Run the app to see the changes:

   

Next step

In the next part of the tutorial, you'll learn about dependencies and add a third-party library to expand the functionality of your project.

Proceed to the next part

Get help

• Kotlin Slack. Get an invite and join the #multiplatform channel.

• Kotlin issue tracker. Report a new issue.