Jetpack Compose: Countdown Timer

In this blog post, we will explore how to implement a countdown timer using Jetpack Compose, the modern toolkit for building native Android UI. We will start with a basic timer and gradually add more advanced features.

Photo by Towfiqu barbhuiya on Unsplash

“The only time you fail is when you fall down and stay down.” — Stephen Richards

1. Creating a Basic Countdown Timer

Let’s start with a simple countdown timer. In Jetpack Compose, we can use LaunchedEffect and mutableStateOf to create a timer.

Here’s a simple example:

// Kotlin
@Composable
fun BasicCountdownTimer() {
    var timeLeft by remember { mutableStateOf(60) }

    LaunchedEffect(key1 = timeLeft) {
        while (timeLeft > 0) {
            delay(1000L)
            timeLeft--
        }
    }

    Text(text = "Time left: $timeLeft")
}

In this example, we create a mutable state for our timer using the remember function. We then launch a coroutine using LaunchedEffect that decrements the time left every second. The Text composable displays the time left.

2. Adding Pause and Resume Functionality

In a real-world application, we often need to pause and resume our timer. We can achieve this by adding a isPaused state to our composable.