How To Create CountDown Timer App In Android Studio: Step By Step Guide

CountDown Timer App is about setting a time that moves in reverse like it shows the time left in upcoming event. Likewise here we are making an Android App in context to CRICKET WORLD CUP which will start in 2019. So let’s begin App creation step by step towards it completion.

In this CountDown Timer App tutorial we are going to use multiple Android UI components to design its interface in Android Studio.

Topics Used For Creating CountDown Timer App – Before following the below steps it is recommended you check out TextView, Relative LayoutLinear Layout topics. Also go through JAVA OOPS concept once.


How To Create CountDown Timer App In Android Studio:

Below you can download code, see final output and step by step explanation of CountDown Timer App in Android Studio.

Download Code (Password: abhiandroid)
CountDown App In Android Studio

Step 1: Firstly get the android studio downloaded in your system, then open it.

Step 2: Create a new project and name it CountDownTimer.

Step 3: Open res -> layout -> activity_main.xml (or) main.xml. Here we are going to create the application interface like add layouts(linearlayout & relativelayout), TextView. Carefully analyze the code as it’s a bit complicated, we used Linearlayout for displaying each part of CountDown Timer(days, hours, minutes , seconds).

The complete interface code of activity_main.xml:

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/backimage"
    tools:context="com.example.countdown.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/counter"
        android:textSize="30sp"
        android:textColor="#ffeeee"
        android:textStyle="bold|italic"
        android:layout_above="@+id/relativeLayout"
        android:layout_centerHorizontal="true"
        android:id="@+id/textViewheader1" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/relativeLayout">

        <LinearLayout
            android:id="@+id/LinearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tveventStart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="50sp"
                android:gravity="center"
                android:singleLine="true"
                android:text="@string/worldcup_2k19"
                android:textColor="#fff"
                android:textSize="24sp"
                android:textStyle="bold"
                android:visibility="gone" />
            <LinearLayout
                android:id="@+id/LinearLayout1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/counter"
                android:gravity="center"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/txtDay"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:gravity="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4a0000"
                    android:textSize="35sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/txt_Day"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:text="@string/days"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#fff"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/LinearLayout2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/counter"
                android:gravity="center"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/txtHour"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:gravity="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4a0000"
                    android:textSize="35sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/txt_Hour"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:text="@string/hours"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#fff"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/LinearLayout3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/counter"
                android:gravity="center"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/txtMinute"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:gravity="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4a0000"
                    android:textSize="35sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/txt_Minute"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:text="@string/minutes"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#fff"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/LinearLayout4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/counter"
                android:gravity="center"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/txtSecond"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:gravity="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="#4a0000"
                    android:textSize="35sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/txt_Second"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center_horizontal"
                    android:text="@string/seconds"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="#fff"
                    android:textStyle="bold" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/countleft"
        android:layout_below="@+id/relativeLayout"
        android:layout_centerHorizontal="true"
        android:id="@+id/textViewheader2"
        android:textSize="35sp"
        android:textStyle="bold|italic"
        android:textColor="@android:color/background_dark" />
    
</RelativeLayout>

CountDown App UI In Android Studio

Step 4: Open src -> package -> MainActivity.java. The interface part of the application is over, let’s focus on adding functionality to the application.
In this app we use System date and the upcoming event date in our case it’s  30-may-2019(World Cup 2k19). Nextly we will subtract the both  dates and get the time in milliseconds further we have some arithmetic operations over it to get the left time till the event arrival.

You also see that we use handler in this code to schedule message and runnable in future at some point and scheduling is accomplished by various methods but we used postDelayed(runnable, long).

package com.example.countdown;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.text.SimpleDateFormat;
import java.util.Date;
import android.os.Handler;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView txtDay, txtHour, txtMinute, txtSecond;
    private TextView tvEventStart;
    private Handler handler;
    private Runnable runnable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txtDay = (TextView) findViewById(R.id.txtDay);
        txtHour = (TextView) findViewById(R.id.txtHour);
        txtMinute = (TextView) findViewById(R.id.txtMinute);
        txtSecond = (TextView) findViewById(R.id.txtSecond);
        tvEventStart = (TextView) findViewById(R.id.tveventStart);

        countDownStart();
    }

    public void countDownStart() {
        handler = new Handler();
        runnable = new Runnable() {
            @Override
            public void run() {
                handler.postDelayed(this, 1000);
                try {
                    SimpleDateFormat dateFormat = new SimpleDateFormat(
                            "yyyy-MM-dd");
                    // Please here set your event date//YYYY-MM-DD
                    Date futureDate = dateFormat.parse("2019-5-30");
                    Date currentDate = new Date();
                    if (!currentDate.after(futureDate)) {
                        long diff = futureDate.getTime()
                                - currentDate.getTime();
                        long days = diff / (24 * 60 * 60 * 1000);
                        diff -= days * (24 * 60 * 60 * 1000);
                        long hours = diff / (60 * 60 * 1000);
                        diff -= hours * (60 * 60 * 1000);
                        long minutes = diff / (60 * 1000);
                        diff -= minutes * (60 * 1000);
                        long seconds = diff / 1000;
                        txtDay.setText("" + String.format("%02d", days));
                        txtHour.setText("" + String.format("%02d", hours));
                        txtMinute.setText(""
                                + String.format("%02d", minutes));
                        txtSecond.setText(""
                                + String.format("%02d", seconds));
                    } else {
                        tvEventStart.setVisibility(View.VISIBLE);
                        tvEventStart.setText("The event started!");
                        textViewGone();
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        };
        handler.postDelayed(runnable, 1 * 1000);
    }

    public void textViewGone() {
        findViewById(R.id.LinearLayout1).setVisibility(View.GONE);
        findViewById(R.id.LinearLayout2).setVisibility(View.GONE);
        findViewById(R.id.LinearLayout3).setVisibility(View.GONE);
        findViewById(R.id.LinearLayout4).setVisibility(View.GONE);
        findViewById(R.id.textViewheader1).setVisibility(View.GONE);
        findViewById(R.id.textViewheader2).setVisibility(View.GONE);
    }
}

OUTPUT:
Now run the App and you will see the CountDown App. Add any upcoming event in the app and use its functionality.

One thought on “How To Create CountDown Timer App In Android Studio: Step By Step Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *

One More Step To Download Code...

SignUp! To Download Calculator App Code
Free Download Code Now >>
100% tested, easy instant download and import in Android Studio
close-link
JUST ONE MORE STEP TO COMPLETE...

Enter your email to get FREE exclusive Android App email tips:
SEND ME THE UPDATE
We hate SPAM and promise to keep your email address safe.
close-link
One More Step To Download Code...

SignUp! To Download WebView App Code
FREE DOWNLOAD CODE NOW >>
100% tested, easy instant download and import in Android Studio
close-link