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 "Stop Watch" 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".

    Android

    Android

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 Stop Watch App 

Android

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

XML code for our layout is shown below.

activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:background="@color/colorPrimary"  
  8.     tools:context="in.amitsin6h.stopwatch.MainActivity">  
  9.   
  10.   
  11.   
  12.         <RelativeLayout  
  13.             android:layout_width="fill_parent"  
  14.             android:layout_height="fill_parent"  
  15.             android:layout_marginLeft="10dp"  
  16.             android:layout_marginRight="10dp"  
  17.             android:paddingBottom="90dp">  
  18.   
  19.   
  20.            <TextView  
  21.                android:text="00:00:00"  
  22.                android:layout_width="wrap_content"  
  23.                android:layout_height="wrap_content"  
  24.                android:id="@+id/tvTimer"  
  25.                android:textSize="50dp"  
  26.                android:textStyle="bold"  
  27.                android:textColor="#ffffff"  
  28.                android:layout_marginTop="120dp"  
  29.                android:paddingBottom="50dp"  
  30.                android:layout_alignParentTop="true"  
  31.                android:layout_centerHorizontal="true" />  
  32.   
  33.            <Button  
  34.                android:text="Start"  
  35.                android:background="#ffffff"  
  36.                android:layout_width="wrap_content"  
  37.                android:layout_height="wrap_content"  
  38.                android:layout_below="@+id/tvTimer"  
  39.                android:layout_alignParentLeft="true"  
  40.                android:layout_alignParentStart="true"  
  41.                android:layout_marginTop="41dp"  
  42.                android:id="@+id/btStart" />  
  43.   
  44.            <Button  
  45.                android:text="Pause"  
  46.                android:background="#ffffff"  
  47.                android:layout_width="wrap_content"  
  48.                android:layout_height="wrap_content"  
  49.                android:id="@+id/btPause"  
  50.                android:layout_alignBaseline="@+id/btStart"  
  51.                android:layout_alignBottom="@+id/btStart"  
  52.                android:layout_centerHorizontal="true" />  
  53.   
  54.            <Button  
  55.                android:text="Reset"  
  56.                android:background="#ffffff"  
  57.                android:layout_width="wrap_content"  
  58.                android:layout_height="wrap_content"  
  59.                android:layout_alignTop="@+id/btPause"  
  60.                android:layout_alignParentRight="true"  
  61.                android:layout_alignParentEnd="true"  
  62.                android:id="@+id/btReset" />  
  63.   
  64.         </RelativeLayout>  
  65.   
  66.   
  67. </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

  1. package in.amitsin6h.stopwatch;  
  2.   
  3. import android.os.Handler;  
  4. import android.os.SystemClock;  
  5. import android.support.v7.app.AppCompatActivity;  
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.widget.Button;  
  9. import android.widget.TextView;  
  10.   
  11. public class MainActivity extends AppCompatActivity {  
  12.   
  13.     TextView timer ;  
  14.     Button start, pause, reset;  
  15.     long MillisecondTime, StartTime, TimeBuff, UpdateTime = 0L ;  
  16.     Handler handler;  
  17.     int Seconds, Minutes, MilliSeconds ;  
  18.   
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.activity_main);  
  23.   
  24.         timer = (TextView)findViewById(R.id.tvTimer);  
  25.         start = (Button)findViewById(R.id.btStart);  
  26.         pause = (Button)findViewById(R.id.btPause);  
  27.         reset = (Button)findViewById(R.id.btReset);  
  28.   
  29.         handler = new Handler() ;  
  30.   
  31.         start.setOnClickListener(new View.OnClickListener() {  
  32.             @Override  
  33.             public void onClick(View view) {  
  34.   
  35.                 StartTime = SystemClock.uptimeMillis();  
  36.                 handler.postDelayed(runnable, 0);  
  37.   
  38.                 reset.setEnabled(false);  
  39.   
  40.             }  
  41.         });  
  42.   
  43.         pause.setOnClickListener(new View.OnClickListener() {  
  44.             @Override  
  45.             public void onClick(View view) {  
  46.   
  47.                 TimeBuff += MillisecondTime;  
  48.   
  49.                 handler.removeCallbacks(runnable);  
  50.   
  51.                 reset.setEnabled(true);  
  52.   
  53.             }  
  54.         });  
  55.   
  56.         reset.setOnClickListener(new View.OnClickListener() {  
  57.             @Override  
  58.             public void onClick(View view) {  
  59.   
  60.                 MillisecondTime = 0L ;  
  61.                 StartTime = 0L ;  
  62.                 TimeBuff = 0L ;  
  63.                 UpdateTime = 0L ;  
  64.                 Seconds = 0 ;  
  65.                 Minutes = 0 ;  
  66.                 MilliSeconds = 0 ;  
  67.   
  68.                 timer.setText("00:00:00");  
  69.   
  70.             }  
  71.         });  
  72.   
  73.     }  
  74.   
  75.     public Runnable runnable = new Runnable() {  
  76.   
  77.         public void run() {  
  78.   
  79.             MillisecondTime = SystemClock.uptimeMillis() - StartTime;  
  80.   
  81.             UpdateTime = TimeBuff + MillisecondTime;  
  82.   
  83.             Seconds = (int) (UpdateTime / 1000);  
  84.   
  85.             Minutes = Seconds / 60;  
  86.   
  87.             Seconds = Seconds % 60;  
  88.   
  89.             MilliSeconds = (int) (UpdateTime % 1000);  
  90.   
  91.             timer.setText("" + Minutes + ":"  
  92.                     + String.format("%02d", Seconds) + ":"  
  93.                     + String.format("%03d", MilliSeconds));  
  94.   
  95.             handler.postDelayed(this, 0);  
  96.         }  
  97.   
  98.     };  
  99.   
  100. }  

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.

Android

Android

Project Source Code

Android Stop Watch