Why coroutines simplify async programming in Android Kotlin - Build It to Prove It

Build: Async Demo Screen

This screen demonstrates how coroutines simplify asynchronous programming by fetching data with a delay and updating the UI without blocking the main thread.

Target UI

-------------------------
| Async Demo Screen      |
|-----------------------|
| [Fetch Data]          |
|                       |
| Result:               |
|                       |
|                       |
-------------------------

Add a button labeled 'Fetch Data' that starts a coroutine to simulate fetching data asynchronously.

Show a loading indicator while data is being fetched.

After a 2-second delay, display the fetched data text below the button.

Ensure the UI remains responsive during the fetch.

Use Kotlin coroutines with lifecycleScope for coroutine management.

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.lifecycleScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class AsyncDemoActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MaterialTheme {
        // TODO: Add your UI and coroutine code here
      }
    }
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.lifecycleScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class AsyncDemoActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MaterialTheme {
        var isLoading by remember { mutableStateOf(false) }
        var resultText by remember { mutableStateOf("") }

        Column(modifier = Modifier.padding(16.dp)) {
          Button(onClick = {
            isLoading = true
            resultText = ""
            lifecycleScope.launch {
              delay(2000) // Simulate async work
              resultText = "Data fetched successfully!"
              isLoading = false
            }
          }) {
            Text("Fetch Data")
          }

          if (isLoading) {
            CircularProgressIndicator(modifier = Modifier.padding(top = 16.dp))
          } else {
            Text(text = "Result: $resultText", modifier = Modifier.padding(top = 16.dp))
          }
        }
      }
    }
  }
}

This example uses Kotlin coroutines to simplify asynchronous programming. When the user taps the 'Fetch Data' button, a coroutine starts using lifecycleScope.launch. Inside the coroutine, delay(2000) simulates a network call or long-running task without blocking the main thread.

The UI shows a loading spinner while waiting. After the delay, the result text updates to show the fetched data. Because coroutines allow writing asynchronous code sequentially, it is easier to read and maintain compared to callbacks or threads.

Using mutableStateOf and Compose's state management, the UI automatically updates when the loading state or result changes, keeping the app responsive and smooth.

Final Result

Completed Screen

-------------------------
| Async Demo Screen      |
|-----------------------|
| [Fetch Data]          |
|                       |
| Loading... (spinner)  |
|                       |
-------------------------

After 2 seconds:

-------------------------
| Async Demo Screen      |
|-----------------------|
| [Fetch Data]          |
|                       |
| Result: Data fetched   |
| successfully!         |
-------------------------

User taps 'Fetch Data' button.

A loading spinner appears below the button.

After 2 seconds, spinner disappears and result text 'Data fetched successfully!' appears.

UI remains responsive during loading.

Stretch Goal

Add error handling to simulate a failed fetch and show an error message.

💡 Hint

Use try-catch inside the coroutine and update the UI state to show an error message if an exception occurs.