Android Count Down Timer Tutorial


A countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur. To achieve countdown Android comes with a built-in CountDownTimer class for constructing CountDownTimers. Its easy to use, efficient and works.This class is an abstract class whose methods need to be overridden to implement it in our project.

Let’s Get it Working

In this tutorial we are going to learn the basic usage of CountDownTimer. To really understand the usage of count down timer we will create an app. This app show the circular progress bar , time and start/stop image to control the count down timer.

Count Down Timer App

Count Down Timer App

DownloadCode
 
github

Basic Usage

Implementing a Count Down Timer in your app won’t take more than two steps. First you need to create an object of in-built abstract class named CountDownTimer. This class is used to Schedule a countdown until a time in the future, with regular notifications on intervals along the way.

Second you have to start the count down timer via invoking start() method.

Step 1) Creating New Project

Create a new project in Android Studio from File ⇒ New Project Fill the required information like project name and package name of the project. When it prompts you to select the default activity, select Empty Activity and proceed.

Step 2) Defining strings,colors and styles

2.1 Add the below string values to the strings.xml located in res ⇒ values ⇒ strings.xml.

2.2 Add the below color values to the colors.xml located in res ⇒ values ⇒ colors.xml.

2.3 Add the below style values to the styles.xml located in res ⇒ values ⇒ styles.xml.

Step 3) Adding drawable

Before creating layout we have to write custom drawable xmls for circular progress bar .And also need some images for start, stop and reset icon.
3.1 Create new drawable resource file by right click on drawable ⇒ New ⇒ Drawable resource file name it drawable_circle_yellow.xml and add the below code to it. This file will create a yellow hollow circle of 10dp of thicknes.

3.2 Again Create new drawable resource file by right click on drawable ⇒ New ⇒ Drawable resource file name it drawable_circle_dark_blue.xml and add the below code to it. This file will create a blue hollow circle of 10dp of thicknes.

3.3 Download the images zip. Unzip it and place all the images in drawable folder.

Step 4) Creating the layout

Now add the below code to activity_main.xml located in res ⇒ layout ⇒ activity_main.xml. This code will create a view show above in the screen shot i.e a circular progress bar to show the time elapsed progress, input field to enter minutes, text field to show the time, start/stop and reset image to control the count down timer.





Step 5) Writing Code in MainActivity class

Now add the below code to MainActivity.java located in java ⇒ project’s package ⇒ MainActivity. Here i have written code to initialize views, added click listeners on it ,methods to control start stop reset functionality.

initViews() to intialize views.
initListeners() to initialize the click listeners.
setTimerValues() fetches the input minute value from the edit text, convert minutes to milliseconds that is required for count down timer.
startCountDownTimer() initializes the abstract class count down timer object with two implemented methods onTick(long milliSeconds) and onFinish(). onTick(long milliSeconds) Callback is fired on regular interval and onFinish() Callback is fired when the time is up. With count down timer object i started it by calling countDownTimer.start();
stopCountDownTimer() stops the count down timer by calling cancel() method.
startStop() contains start/stop functionality for count down timer and also make changes in views.
hmsTimeFormatter(long milliSeconds) convert the milliseconds to HH:mm:ss time format.

Count Down Timer

Count Down Timer

DownloadCode
 
github

Enjoy Coding and Share Knowledge

Show Buttons
Hide Buttons