For modern smartphone users, a clock app is an indispensable tool.
Consequently, many developers are creating clock apps and adding various features.
In this tutorial, we will explore in detail how to implement a stopwatch function while developing an Android app using Java.
1. Setting Up the Development Environment
To develop a stopwatch app, you need Android Studio and a Java development environment.
Follow the steps below to set up the development environment.
-
Download and Install Android Studio:
Android Studio is the officially supported Android development tool.
Download the latest version from the [Android Studio Download Page](https://developer.android.com/studio) and install it. -
Create a New Project:
Launch Android Studio and select “New Project,” then choose “Empty Activity.”
Set the project name to “StopwatchApp” and select Java. -
Gradle Setup:
Use Gradle builds to add the necessary libraries and set the SDK version.
Set `compileSdkVersion` and `targetSdkVersion` appropriately in the `build.gradle` file.
2. Designing the UI
Now, let’s design the UI of the stopwatch. In Android, we define layouts using XML.
Open the `activity_main.xml` file and write the code as shown below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/txtTimer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00:00"
android:textSize="48sp"
android:layout_centerInParent="true"/>
<Button
android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_below="@id/txtTimer"
android:layout_marginTop="20dp"
android:layout_alignParentStart="true"/>
<Button
android:id="@+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
android:layout_below="@id/txtTimer"
android:layout_marginTop="20dp"
android:layout_toEndOf="@id/btnStart"
android:layout_marginStart="20dp"/>
<Button
android:id="@+id/btnReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset"
android:layout_below="@id/txtTimer"
android:layout_marginTop="20dp"
android:layout_toEndOf="@id/btnStop"
android:layout_marginStart="20dp"/>
</RelativeLayout>
The UI includes a `TextView` that displays the time in the center and three buttons (Start, Stop, Reset).
These buttons control the stopwatch’s functionality.
3. Implementing Stopwatch Functionality
Now that the UI is ready, it’s time to implement the watch functionality.
Open the `MainActivity.java` file and write the code as follows.
package com.example.stopwatchapp;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private TextView txtTimer;
private Button btnStart, btnStop, btnReset;
private long startTime = 0L;
private boolean isRunning = false;
private final Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txtTimer = findViewById(R.id.txtTimer);
btnStart = findViewById(R.id.btnStart);
btnStop = findViewById(R.id.btnStop);
btnReset = findViewById(R.id.btnReset);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (!isRunning) {
startTime = SystemClock.elapsedRealtime();
handler.postDelayed(runnable, 0);
isRunning = true;
}
}
});
btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (isRunning) {
handler.removeCallbacks(runnable);
isRunning = false;
}
}
});
btnReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
handler.removeCallbacks(runnable);
txtTimer.setText("00:00:00");
isRunning = false;
}
});
}
private final Runnable runnable = new Runnable() {
@Override
public void run() {
long elapsedMillis = SystemClock.elapsedRealtime() - startTime;
int seconds = (int) (elapsedMillis / 1000);
int minutes = seconds / 60;
seconds = seconds % 60;
int hours = minutes / 60;
minutes = minutes % 60;
txtTimer.setText(String.format("%02d:%02d:%02d", hours, minutes, seconds));
handler.postDelayed(this, 1000);
}
};
}
The above code contains the basic functionality of the stopwatch.
It uses a `Handler` to periodically update the elapsed time.
- Start Button: Starts the stopwatch and begins counting time.
- Stop Button: Stops the stopwatch and retains the current time.
- Reset Button: Resets the stopwatch and displays the time as “00:00:00”.
4. Testing the App
Now it’s time to test the stopwatch app. Click the “Run” button in Android Studio to
launch the app in the emulator. Click the buttons to verify that the stopwatch functionality works correctly.
It is important to test various scenarios to ensure all features operate seamlessly.
5. Implementing Additional Features
In addition to the basic stopwatch functionality, you might consider adding extra features to enhance the user experience.
For example, think about adding lap functionality, notification sounds, or user settings.
-
Lap Functionality:
Add a feature that allows users to record elapsed times for multiple laps. -
Sound Notifications:
Provide feedback by sounding alerts when users start and stop the stopwatch. -
Theme Settings:
Offer users the option to change the colors or fonts of the app.
These features can improve the quality of the app and enhance user satisfaction.
6. Conclusion
In this tutorial, you learned how to develop an Android stopwatch app using Java. I hope that setting up the development environment,
designing the UI, and implementing functionality provided a foundation in Android app development.
I encourage you to add more features or continue to evolve your app in your own style.