Update the user interface

Update the Android part

The androidApp module contains an Android application and defines its main activity. The UI code is mostly contained in the sharedUI module, which the Android app uses as an Android library. The UI is implemented using the Compose Multiplatform framework.

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

1. Navigate to the App.kt file in the sharedUI/src/commonMain/.../greetingkmp directory.

2. Find the Greeting().greet() function call. Right-click the greet() and select Go To | Declaration or Usages. The IDE will open the sharedLogic/src/commonMain/.../Greeting.kt file.

3. In the Greeting.kt file, update the Greeting class so that the greet() function returns a list of strings:

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

4. Import the kotlin.random.Random package as the IDE suggests.

5. Go back to the sharedUI/src/commonMain/.../App.kt file and update the App() implementation to display the list of strings:

   @Composable @Preview fun App() { MaterialTheme { val greeting = remember { Greeting().greet() } Column( modifier = Modifier .padding(all = 10.dp) .safeContentPadding() .fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp), ) { greeting.forEach { greeting -> Text(greeting) HorizontalDivider() } } } }

   Here the Column composable shows each of the Text items, adding padding around them and space between them.

6. Follow the IDE's suggestions to import the missing dependencies.

7. Now you can run the Android app to see how it displays the list of strings:

   

Update the iOS part

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

Implement the same changes as in the Android app to account for the update in common code:

1. In IntelliJ IDEA, find the iosApp/iosApp folder at the root of your project in the Project tool window.

2. Open the iosApp/ContentView.swift file, right-click the Greeting().greet() call, and select Go To | Declaration or Usages. You can see that IDEA correctly matches the Swift call with the Kotlin declaration.

3. Return to the ContentView.swift file. To display a list of strings in the same way as in the Android app, replace the code for the ContentView structure with the following:

   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.

4. Start the iOS run configuration to see the changes:

   

Possible issues and solutions

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.