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

3 Comments

Join the conversation! Your thoughts help the community grow.

Nijin Nawzat4y ago
Please sir can you help me i dont understand this long MillisecondTime, StartTime, TimeBuff, UpdateTime = 0L ;
Sean C7y ago
Will this app continue to run in the background?
Gajendra Jangid8y ago
Great article........................