Chapter 6: Writing the Android Consumer App

Now that we've implemented the shared code, we should put it to the test. We'll start with the easier step first; that is, consuming the shared module from the Android code. This chapter will be a more concise one as teaching Android development is outside the scope of this book. With that said, I consider it important to see how that shared KMM code can be consumed by the targeted platforms.

In this chapter, we'll cover the following topics:

• Setting up the Android module
• Tying the Android app to the shared code
• Implementing the UI on Android

Technical requirements

You can find the code files for this chapter in this book's GitHub repository at https://github.com/PacktPublishing/Simplifying-Application-Development-with-Kotlin-Multiplatform-Mobile.

Setting up the Android module

Since we tested part of the shared code in Chapter 5, Writing Shared Code, we have already done most of the setup. Let's go through what we need to set up before implementing the Android app.

Enabling Jetpack Compose

We'll be using Android's new UI Toolkit: Jetpack Compose. So, first, we'll need to enable it. You can find the official setup guide here: https://developer.android.com/jetpack/compose/setup#add-compose.

To enable Jetpack Compose, we'll need to add the following configurations to the build.gradle.kts file of the androidApp module, under the android{} configuration block:

1. Enable the compose build feature:

   buildFeatures {
           compose = true
   }

2. Make sure both the Kotlin and Java compilers target Java 8:

   compileOptions {
           sourceCompatibility = JavaVersion.VERSION_1_8
           ...

Tying the Android app to the shared code

We'll be using a simple ViewModel pattern to interact with the shared code and expose the needed data and actions to our UI, based on Android's architecture ViewModel to leverage some life cycle functionality provided by the framework.

We'll create a simple MainViewModel class in the androidApp module. Let's go through the implementation step by step.

First, let's think about what dependencies this ViewModel has:

class MainViewModel(
    breedsRepository: BreedsRepository,
    private val getBreeds: GetBreedsUseCase,
    private val fetchBreeds: FetchBreedsUseCase,
    private val onToggleFavouriteState:
      ToggleFavouriteStateUseCase
 ) : ViewModel() {

Since we'll be communicating with the shared code, we'll make use of the three use cases for running the specific actions, and we&apos...

Implementing the UI on Android

Before we start, I'd like to emphasize that I had conflicting thoughts when I was writing this chapter (as a matter of fact, the whole example project). I wanted to polish the UI as much as possible, try out the new Android 12 splash screen API, make it edge-to-edge, and so on. But at the same time, I didn't want to introduce things without explicitly talking about them in this book as well, and to do that felt out of scope.

So, consider this as me finding an excuse for why the UI looks so barebone.

Now, let's throw some Jetpack Compose code together and see how consuming the shared code can be presented on an Android UI:

1. Let's create a MainScreen that will contain our small number of composable components. We'll start by creating the MainScreen composable:

   @Composable
   fun MainScreen(viewModel: MainViewModel) {
       val state by viewModel.state.collectAsState()
       val breeds...

Summary

In this chapter, we connected our shared code to our Android application and created the Dogify UI in Jetpack Compose. We also observed that consuming the shared code was as easy as consuming a regular Android library.

In the next chapter, we'll try to do the same for iOS and see if we need to make any modifications to our shared code to make it work and easier to consume via Swift.