Count Down Timer App in Android Programmatically

Hello Guys , 

   

   In this tutorial , we are making count down timer app in android. A Count Down Timer is a sequence of backward counting to indicate the time remaining before event closed. In this app we are using CountDownTimer  class for built these application. It easy to use, efficient and works. CountDownTimer is abstract class so method need to overridden to implement. A Count Down Timer is is an accurate timer that can be used in website or blog for special event. 

   

   In this app we are using progressbar , edittext , textview and two imageview under RelativeLayout. progressbar is used to display how much time remaining. edittext is used to enter the count down time. textview is used to display time and imageview is used to display icon like reset , start and stop.

CountDownTimer App MainScreen looking like below picture :

 

Let's get started.

Step 1 : Create a new Project.

Step 2 :  Adding Drawable

• Here we write some custom drawable xml file for circular progressbar and also add some images for reset , start and stop.
• Here we create two drawable resource file. drawable_circle_green.xml and drawable_circle_dark_blue.xml file.

•  drawable_circle_green.xml   

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadiusRatio="2.3" android:shape="ring" android:thickness="10dp" android:useLevel="true"> <solid android:color="#2BF133"/> </shape>

• drawable_circle_dark_blue.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadiusRatio="2.3" android:shape="ring" android:thickness="10dp" android:useLevel="false"> <solid android:color="#0E121B" /> </shape>

Step 3 :  Edit activity_main.xml file

• Here we add progressbar , edittext  , textview and imageview for creating attractive layout.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#0E121B" tools:context=".MainActivity"> <ProgressBar android:id="@+id/progressBarCircle" style="?android:attr/progressBarStyleHorizontal" android:layout_width="270dp" android:layout_height="270dp" android:layout_centerInParent="true" android:background="@drawable/drawable_circle_dark_blue" android:indeterminate="false" android:max="100" android:progress="100" android:progressDrawable="@drawable/drawable_circle_green" android:rotation="-90" /> <EditText android:id="@+id/editTextMinute" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textViewTime" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:gravity="center" android:hint="Minute" android:inputType="number" android:maxLength="15" android:maxLines="1" android:minEms="5" android:text="1" android:textColor="#2BF133" android:textColorHint="#2BF133" /> <TextView android:id="@+id/textViewTime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="00:01:00" android:textColor="#2BF133" android:textSize="40sp" /> <ImageView android:id="@+id/imageViewReset" android:layout_width="30dp" android:layout_height="30dp" android:layout_below="@+id/textViewTime" android:layout_centerInParent="true" android:layout_marginTop="30dp" android:src="@drawable/reset" android:visibility="gone" /> <ImageView android:id="@+id/imageViewStartStop" android:layout_width="50dp" android:layout_height="50dp" android:layout_below="@+id/progressBarCircle" android:layout_centerHorizontal="true" android:layout_marginTop="20dp" android:src="@drawable/start" /> </RelativeLayout>

Step 4 :  Implement MainActivity.java file

• Here we implement some method for create CountDownTimer App.

import androidx.appcompat.app.AppCompatActivity; import android.annotation.SuppressLint; import android.os.Bundle; import android.os.CountDownTimer; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.ProgressBar; import android.widget.TextView; import android.widget.Toast; import java.util.concurrent.TimeUnit; public class MainActivity extends AppCompatActivity { private long timeCountInMilliSeconds = 60000; private enum TimerStatus { STARTED, STOPPED } private TimerStatus timerStatus = TimerStatus.STOPPED; private ProgressBar progressBarCircle; private EditText editTextMinute; private TextView ViewTime; private ImageView Reset; private ImageView StartStop; private CountDownTimer countDownTimer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); progressBarCircle = (ProgressBar) findViewById(R.id.progressBarCircle); editTextMinute = (EditText) findViewById(R.id.editTextMinute); ViewTime = (TextView) findViewById(R.id.textViewTime); Reset = (ImageView) findViewById(R.id.imageViewReset); StartStop = (ImageView) findViewById(R.id.imageViewStartStop); Reset.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Reset Count Down timer reset(); } }); StartStop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startstop(); } }); } // Reset Count Down timer private void reset() { stopTimer(); startTimer(); } /** * method to stop count down timer */ private void stopTimer() { countDownTimer.cancel(); } /** * method to start count down timer */ private void startTimer() { countDownTimer = new CountDownTimer(timeCountInMilliSeconds, 1000) { @Override public void onTick(long millisUntilFinished) { ViewTime.setText(hmsTimeFormatter(millisUntilFinished)); progressBarCircle.setProgress((int) (millisUntilFinished / 1000)); } @Override public void onFinish() { ViewTime.setText(hmsTimeFormatter(timeCountInMilliSeconds)); // call to initialize the progress bar values setProgressBarValues(); // hiding the reset icon Reset.setVisibility(View.GONE); // changing stop icon to start icon StartStop.setImageResource(R.drawable.start); // making edit text editable editTextMinute.setEnabled(true); // changing the timer status to stopped timerStatus = TimerStatus.STOPPED; } }.start(); countDownTimer.start(); } /** * method to start and stop count down timer */ private void startstop() { if (timerStatus == TimerStatus.STOPPED) { // call to initialize the timer values setTimerValues(); // call to initialize the progress bar values setProgressBarValues(); // showing the reset icon Reset.setVisibility(View.VISIBLE); // changing play icon to stop icon StartStop.setImageResource(R.drawable.stop); // making edit text not editable editTextMinute.setEnabled(false); // changing the timer status to started timerStatus = TimerStatus.STARTED; // call to start the count down timer startTimer(); } else { // hiding the reset icon Reset.setVisibility(View.GONE); // changing stop icon to start icon StartStop.setImageResource(R.drawable.start); // making edit text editable editTextMinute.setEnabled(true); // changing the timer status to stopped timerStatus = TimerStatus.STOPPED; stopTimer(); } } /** * method to initialize the values for count down timer */ private void setTimerValues() { int time = 0; if (!editTextMinute.getText().toString().isEmpty()) { // fetching value from edit text and type cast to integer time = Integer.parseInt(editTextMinute.getText().toString().trim()); } else { // Display message Toast.makeText(getApplicationContext(), "Please Enter Minutes..." , Toast.LENGTH_LONG).show(); } // assigning values after converting to milliseconds timeCountInMilliSeconds = time * 60 * 1000; } /** * method to set circular progress bar values */ private void setProgressBarValues() { progressBarCircle.setMax((int) timeCountInMilliSeconds / 1000); progressBarCircle.setProgress((int) timeCountInMilliSeconds / 1000); } /** * method to convert millisecond to time format */ @SuppressLint("DefaultLocale") private String hmsTimeFormatter(long milliSeconds) { return String.format("%02d:%02d:%02d", TimeUnit.MILLISECONDS.toHours(milliSeconds), TimeUnit.MILLISECONDS.toMinutes(milliSeconds) - TimeUnit.HOURS.toMinutes(TimeUnit.MILLISECONDS.toHours(milliSeconds)), TimeUnit.MILLISECONDS.toSeconds(milliSeconds) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes(milliSeconds))); } }

Now your CountDownTimer App is ready.

Output : 

I hope you like post. If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support.  🙏