Let’s Make a Countdown Timer app using Android Compose ⏱

Begüm Yazıcı 👩🏻‍💻

Published in

ProAndroidDev

5 min readMar 14, 2021

#AndroidDevChallangeWeek2 🚀

What are Android Compose and Week #2 challenges?

Hi all, I decided to write this article because I’d like to share my #AndroidDevChallange week 2 experience. Let’s rock and roll! 🥳

Android Jetpack Compose has been published by Google and now it is currently in beta 🐣. Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android.

After announcing this version, Google started the Android Dev Challenge for four weeks and each week has prizes. It looks so exciting, isn’t it? 👀 For each challenge, you have a week to submit your app. The second week of the challenge was the Countdown Timer! Our UI must be fully built-in Compose.

How do we make a countdown timer app using an Android Compose?

Before I started to develop the countdown timer, I’ve looked into the Compose Pathway which is super useful. At the same time according to week #2 challenge details, they suggested that we should check out state and animation.

Let’s start!

Before starting coding, I’ve made my project plan. First of all, I decided to use View Model, normally I could do the same app without using View Model but I have to handle configuration change myself.

I need to use some hour, minute, second variables as well as a countdown timer to make a Countdown timer.

Now, It’s time to learn and use state 🤩. But what it is and how we can use that? Let’s look under the hood together!

State in Compose

Reacting to state changes is taking an important place in the Compose. Every app work with specific values which can change. As we know, a state can change over time. When your data changes, you recall the functions with new data and you need to update the UI.

Compositon and re-composition

Composition: a description of the UI built by Jetpack Compose when it executes composable.

Initial composition: the creation of a Composition by running composable the first time.

Recomposition: re-running composable to update the Composition when data changes.

Difference between ‘remember’ and ‘rememberSaveable’

Actually, I’ve learned them from Android Developers and I couldn’t explain better so I’m transferring that directly from the site;

Composable functions can store a single object in memory by using the remember composable. You can use remember to store both mutable and immutable objects. remember helps you preserve the state across recompositions. If you use mutableStateOf without also using remember, then the state is reinitialized to an empty string every time the relevant composable is recomposed. While remember helps you retain state across recompositions, the state is not retained across configuration changes.

rememberSaveable automatically saves any value that can be saved in a Bundle. For other values, you can pass in a custom saver object. rememberSaveable helps you retain state across configuration changes.

Use the viewModel with Live Data and ‘observeAsState’

In Android Jetpack Compose, you can use the ViewModel that stores the state in an observable holder(such as Live Data) and handle events.

LiveDate store the state in an observable holder and handle events. Whenever the LiveData changes, obserAsState observes a LiveData<T> and returns a State<T> which is an observable type. As the view model survives configuration changes, we don’t need to do anything else the persist the UI states. observeAsState also remembers the state for it so it can survive recomposition.

Normally if I didn’t use the compose, I would have to create an XML file and I use <layout> tag and create a data object for data binding.

But now no need for these! We just declaration our live data and it’s ready to use on the MainActivity page, that is all!

Building UI Using Jetpack Compose

I wanted to show you my app’s design. I’ve used some of Jetpack Compose components;

Surface: covered your design and you can give a background color, etc.
Column: you can design vertically
Row: you can design horizontally
Text: you can use such a textView
Image: you can use such an Imageview
Spacer: you can use for space
CircularProgressIndicator: you can use for a circle progress bar

Part 1: In this part, I’ve used a text which is ‘Let’s start the countdown!’ using Text and you can choose the size of text, style, color, etc whichever fits your design.

Part 2: In this part, I’ve used a circular progress bar for showing the remaining time that is so easy and I’ve used the reusable header text which is ‘00:00:00’ and you can choose the text and color whichever fits your design.

Part 3: In this part, I wanted to show these constants which are the hour, min, and sec in my project so I’ve used Text at the same time I prefer to use ‘companion object ’ while I show these constants.

Part 4: In this part, I’ve used Live Data which are hours, minutes, and secs. I’ve used these in TimerComponent whenever it’s changed, UI is updated.

Part 5 and 6: In this part, I’ve used Float Action Button which has an OnClick() method so whenever the button is clicked this function call thus I have a chance to decide which method should call whether ‘startCountDown()’ or ‘cancelTimer()’.