Last updated on: June 21, 2022
Today, I will show you how to build a timer that countdowns until an event (e.g. new year’s day or the release date of a video game) using the Handler to update the TextView every second.
First, add a TextView in your layout, like that:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
tools:context=".MainActivity">
<TextView
android:id="@+id/countdown_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="10d 7h 15m 15s"
android:textColor="@android:color/white"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
Code language: HTML, XML (xml)
Then go to your Activity and create a method with a name updateTime() and set the current date:
fun updateTime() {
// Set Current Date
val currentDate = Calendar.getInstance()
}
Code language: Kotlin (kotlin)
Set the event date
fun updateTime() {
// ...
// Set Event Date
val eventDate = Calendar.getInstance()
eventDate[Calendar.YEAR] = 2023
eventDate[Calendar.MONTH] = 0 // 0-11 so 1 less
eventDate[Calendar.DAY_OF_MONTH] = 1
eventDate[Calendar.HOUR] = 0
eventDate[Calendar.MINUTE] = 0
eventDate[Calendar.SECOND] = 0
eventDate.timeZone = TimeZone.getTimeZone("GMT")
// ...
}
Code language: Kotlin (kotlin)
Find how many milliseconds left until the event
fun updateTime() {
// ...
// Find how many milliseconds until the event
val diff = eventDate.timeInMillis - currentDate.timeInMillis
// ...
}
Code language: Kotlin (kotlin)
Convert the milliseconds to days, hours, minutes, and seconds
fun updateTime() {
// ...
// Change the milliseconds to days, hours, minutes and seconds
val days = diff / (24 * 60 * 60 * 1000)
val hours = diff / (1000 * 60 * 60) % 24
val minutes = diff / (1000 * 60) % 60
val seconds = (diff / 1000) % 60
// ...
}
Code language: Kotlin (kotlin)
Show the countdown timer in your TextView
fun updateTime() {
// ...
// Display Countdown
countdownText.text = "${days}d ${hours}h ${minutes}m ${seconds}s"
// ...
}
Code language: Kotlin (kotlin)
Now, to call the updateTime() method every second, we’re going to use the Handler() class and repeat the handler every second (1000 milliseconds)
private lateinit var countdownText: TextView
private val handler = Handler(Looper.getMainLooper())
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
countdownText = findViewById(R.id.countdown_text)
// Update TextView every second
handler.post(object : Runnable {
override fun run() {
// Keep the postDelayed before the updateTime(), so when the event ends, the handler will stop too.
handler.postDelayed(this, 1000)
updateTime()
}
})
}
Code language: Kotlin (kotlin)
If you want to show different text after the event has passed, create a method with the name endEvent and pass the currentDate and eventDate.
After you have shown your text, stop the handler from repeating it.
fun updateTime() {
// ...
// Show different text when the event has passed
endEvent(currentDate, eventDate)
}
private fun endEvent(currentDate: Calendar, eventDate: Calendar) {
if (currentDate.time >= eventDate.time) {
countdownText.text = "Happy New Year!"
// Stop Handler
handler.removeMessages(0)
}
}
Code language: Kotlin (kotlin)
Done!
You can find the final project here
If you have any questions, please feel free to leave a comment below