Creating Stop Watch Android Application Tutorial

Introduction

 

Hello all! In this tutorial, we will learn how to create a Stopwatch Android app, which will have basic features of a stopwatch like, Start, Stop, Pause, and Reset. 

 

Requirements

• Android Studio 2.3.3
• Little knowledge of Java and XML
• Android Phone to test the Android app

Let’s get started.

 

Let’s start creating the Android app using Android Studio. As usual, I have also provided the download link of the project, which you can find below.

 

Step 1 - Creating a new project with Android studio

 

Open Android Studio and create a new project, name it as "StopWatch" and give a company domain whatever you like, (you can use your own name also). 

• Click "Next" and choose Min SDK; I have chosen Android 4.1 (Jelly Bean).
• Click "Next" and select "Empty Activity".
• Choose the Activity as Main Activity and click "Next", then "Finish".
   
   

Once we create our new project, Gradle will take some time to sync the project and will resolve all the dependencies. Sometimes, this process also takes a lot of time.

 

Step 2 - Creating Layout of StopWatch App 

 

 

Here, we will create a layout for our app. So, for tutorial purposes, I am keeping it simple. So our StopWatch will have three buttons - Stop, Pause, and Reset, and a text view where we will display our time.

 

XML code for our layout is shown below.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="@color/colorPrimary"
    tools:context="in.amitsin6h.stopwatch.MainActivity">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:paddingBottom="90dp">


           <TextView
               android:text="00:00:00"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/tvTimer"
               android:textSize="50dp"
               android:textStyle="bold"
               android:textColor="#ffffff"
               android:layout_marginTop="120dp"
               android:paddingBottom="50dp"
               android:layout_alignParentTop="true"
               android:layout_centerHorizontal="true" />

           <Button
               android:text="Start"
               android:background="#ffffff"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_below="@+id/tvTimer"
               android:layout_alignParentLeft="true"
               android:layout_alignParentStart="true"
               android:layout_marginTop="41dp"
               android:id="@+id/btStart" />

           <Button
               android:text="Pause"
               android:background="#ffffff"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/btPause"
               android:layout_alignBaseline="@+id/btStart"
               android:layout_alignBottom="@+id/btStart"
               android:layout_centerHorizontal="true" />

           <Button
               android:text="Reset"
               android:background="#ffffff"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignTop="@+id/btPause"
               android:layout_alignParentRight="true"
               android:layout_alignParentEnd="true"
               android:id="@+id/btReset" />

        </RelativeLayout>


</android.support.constraint.ConstraintLayout>

Step 3 – Stop Watch Android Java Code

 

Here, we will write Java code to make our app function. So for our three buttons Start, Pause and Reset we will be using OnClickListener to handle our function of buttons. Let’s see the below code to understand more clearly.

 

Just copy the below java code and paste it to MainActivity.java.

 

MainActivity.java

package in.amitsin6h.stopwatch;

import android.os.Handler;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView timer ;
    Button start, pause, reset;
    long MillisecondTime, StartTime, TimeBuff, UpdateTime = 0L ;
    Handler handler;
    int Seconds, Minutes, MilliSeconds ;

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

        timer = (TextView)findViewById(R.id.tvTimer);
        start = (Button)findViewById(R.id.btStart);
        pause = (Button)findViewById(R.id.btPause);
        reset = (Button)findViewById(R.id.btReset);

        handler = new Handler() ;

        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                StartTime = SystemClock.uptimeMillis();
                handler.postDelayed(runnable, 0);

                reset.setEnabled(false);

            }
        });

        pause.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                TimeBuff += MillisecondTime;

                handler.removeCallbacks(runnable);

                reset.setEnabled(true);

            }
        });

        reset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                MillisecondTime = 0L ;
                StartTime = 0L ;
                TimeBuff = 0L ;
                UpdateTime = 0L ;
                Seconds = 0 ;
                Minutes = 0 ;
                MilliSeconds = 0 ;

                timer.setText("00:00:00");

            }
        });

    }

    public Runnable runnable = new Runnable() {

        public void run() {

            MillisecondTime = SystemClock.uptimeMillis() - StartTime;

            UpdateTime = TimeBuff + MillisecondTime;

            Seconds = (int) (UpdateTime / 1000);

            Minutes = Seconds / 60;

            Seconds = Seconds % 60;

            MilliSeconds = (int) (UpdateTime % 1000);

            timer.setText("" + Minutes + ":"
                    + String.format("%02d", Seconds) + ":"
                    + String.format("%03d", MilliSeconds));

            handler.postDelayed(this, 0);
        }

    };

}

If anyone faces a problem in understanding the java code, they can comment below and I will help you to understand.

 

Step 4 - Compile and Run

 

Now, we are ready to compile and run our Stopwatch Android app. The following screen will appear once our app gets installed.

 

Now, let’s test our own Android Stopwatch.

 

 

 

Project Source Code

Android Stop Watch