Create Stop Watch Android Application

Introduction

Android is one of the most popular operating systems for mobiles. In this article, I will show you how to create a stopwatch Android application using Android Studio. Android is a kernel based operating system that allows the users to modify GUI components and source code.

Requirements

Steps should be followed

Carefully follow these steps to create a stopwatch Android application using Android Studio and I have included the source code below.

Step 1

Open Android Studio and create a new project.

Android

Step 2

Put the application name and company domain. If you wish to use C++ for coding the project, mark the "Include C++ support" checkbox and click Next.

Android

Step 3

Select the Android minimum SDK. After you chose the minimum SDK,  it will show approximate percentage of people using that SDK. Now, click Next.

Android

Step 4

Choose the Basic Activity then click Next.

Android

Step 5

Put the activity name and layout name. Android Studio basically takes java class name same as the activity name. Click Finish.

Android

Step 6

Go to activity_stop_watch.xml, then click the text bottom. This xml file contains the designing code for Android app. Into the activity_stop_watch.xml, paste the below code.

activity_stop_watch.xml:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.design.widget.CoordinatorLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.     xmlns:tools="http://schemas.android.com/tools"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent"  
  8.     android:fitsSystemWindows="true"  
  9.     tools:context=" ganeshannt.stopwatch.StopWatchActivity">  
  10.   
  11.     <android.support.design.widget.AppBarLayout  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:theme="@style/AppTheme.AppBarOverlay">  
  15.   
  16.         <android.support.v7.widget.Toolbar  
  17.             android:id="@+id/toolbar"  
  18.             android:layout_width="match_parent"  
  19.             android:layout_height="?attr/actionBarSize"  
  20.             android:background="?attr/colorPrimary"  
  21.             app:popupTheme="@style/AppTheme.PopupOverlay"/>  
  22.   
  23.     </android.support.design.widget.AppBarLayout>  
  24.   
  25.     <include layout="@layout/content_stop_watch"/>  
  26.   
  27. </android.support.design.widget.CoordinatorLayout>  

Android

Step 7

Create new content_stop_watch.xml file (File ⇒ New ⇒Activity⇒Empty_activity).

Go to content_stop_watch.xml and click the text bottom. In there, paste the below code.

content_stop_watch.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.     xmlns:tools="http://schemas.android.com/tools"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  10.     android:paddingRight="@dimen/activity_horizontal_margin"  
  11.     android:paddingTop="@dimen/activity_vertical_margin"  
  12.     app:layout_behavior="@string/appbar_scrolling_view_behavior"  
  13.     tools:context=" ganeshannt.stopwatch.StopWatchActivity"  
  14.     tools:showIn="@layout/activity_stop_watch">  
  15.   
  16.     <TextView  
  17.         android:id="@+id/time_view"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:layout_alignParentTop="true"  
  21.         android:layout_centerHorizontal="true"  
  22.         android:layout_marginTop="0dp"  
  23.         android:text=""  
  24.         android:textAppearance="?android:attr/textAppearanceLarge"  
  25.         android:textSize="92sp"/>  
  26.   
  27.     <Button  
  28.         android:id="@+id/start_button"  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_below="@+id/time_view"  
  32.         android:layout_centerHorizontal="true"  
  33.         android:layout_marginTop="20dp"  
  34.         android:onClick="onClickStart"  
  35.         android:text="@string/start"/>  
  36.   
  37.     <Button  
  38.         android:id="@+id/stop_button"  
  39.         android:layout_width="wrap_content"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_below="@+id/start_button"  
  42.         android:layout_centerHorizontal="true"  
  43.         android:layout_marginTop="10dp"  
  44.         android:onClick="onClickStop"  
  45.         android:text="@string/stop"/>  
  46.   
  47.     <Button  
  48.         android:id="@+id/reset_button"  
  49.         android:layout_width="wrap_content"  
  50.         android:layout_height="wrap_content"  
  51.         android:layout_below="@+id/stop_button"  
  52.         android:layout_centerHorizontal="true"  
  53.         android:layout_marginTop="10dp"  
  54.         android:onClick="onClickReset"  
  55.         android:text="@string/reset"/>  
  56. </RelativeLayout>  

Android

Step 8

Into the StopWatchActivity.java, paste the below code. Do not replace your package name otherwise the app will not run.

StopWatchActivity.java code

  1. package ganeshannt.stopwatch;  
  2.   
  3. import android.os.Bundle;  
  4. import android.os.Handler;  
  5. import android.support.design.widget.FloatingActionButton;  
  6. import android.support.design.widget.Snackbar;  
  7. import android.support.v7.app.AppCompatActivity;  
  8. import android.support.v7.widget.Toolbar;  
  9. import android.view.View;  
  10. import android.view.Menu;  
  11. import android.view.MenuItem;  
  12. import android.widget.TextView;  
  13.   
  14. public class StopWatchActivity extends AppCompatActivity {  
  15.   
  16.     private int seconds = 0;  
  17.     private boolean running;  
  18.     private boolean wasRunning;  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.         setContentView(R.layout.activity_stop_watch);  
  24.         // toolbar is the blue bar at the top of the main layout  
  25. //        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
  26. //        setSupportActionBar(toolbar);  
  27.   
  28.         if(savedInstanceState!=null) {  
  29.             seconds = savedInstanceState.getInt("seconds");  
  30.             running = savedInstanceState.getBoolean("running");  
  31.             wasRunning = savedInstanceState.getBoolean("wasRunning");  
  32.         }  
  33.         runTimer();  
  34.   
  35.     }  
  36.   
  37.     //start the stopwatch running when the start button is clicked  
  38.     public void onClickStart(View view){  
  39.         running = true;  
  40.     }  
  41.   
  42.     //stop the stopwatch running when the stop button is clicked  
  43.     public void onClickStop(View view) {  
  44.         running = false;  
  45.     }  
  46.   
  47.     //reset the stopwatch when the reset button is clicked  
  48.     public void onClickReset(View view) {  
  49.         running = false;  
  50.         seconds = 0;  
  51.     }  
  52.   
  53.     private void runTimer() {  
  54.         final TextView timeView = (TextView) findViewById(R.id.time_view);  
  55.         final Handler handler = new Handler();  
  56.         handler.post(new Runnable() {  
  57.             @Override  
  58.             public void run() {  
  59.   
  60.             int hours = seconds / 3600;  
  61.             int minutes = (seconds % 3600) / 60;  
  62.             int secs = seconds % 60;  
  63.             String time = String.format("%d:%02d:%02d", hours, minutes, secs);  
  64.             timeView.setText(time);  
  65.             if(running)  
  66.   
  67.             {  
  68.                 seconds++;  
  69.             }  
  70.   
  71.             handler.postDelayed(this,1000);  
  72.             }  
  73.         });  
  74.   
  75.     }  
  76.   
  77.     @Override  
  78.     public void onSaveInstanceState(Bundle savedInstanceState){  
  79.         savedInstanceState.putInt("seconds", seconds);  
  80.         savedInstanceState.putBoolean("running", running);  
  81.         savedInstanceState.putBoolean("wasRunning", wasRunning);  
  82.     }  
  83.   
  84. //    @Override  
  85. //    protected void onStop(){  
  86. //        super.onStop();  
  87. //        wasRunning = running;  
  88. //        running = false;  
  89. //    }  
  90. //    @Override  
  91. //    protected void onStart() {  
  92. //        super.onStart();  
  93. //        if(wasRunning) {  
  94. //            running = true;  
  95. //        }  
  96. //    }  
  97.   
  98.     @Override  
  99.     protected void onPause() {  
  100.         super.onPause();  
  101.         wasRunning = running;  
  102.         running = false;  
  103.     }  
  104.   
  105.     @Override  
  106.     protected void onResume() {  
  107.         super.onResume();  
  108.         if(wasRunning) {  
  109.             running = true;  
  110.         }  
  111.     }  
  112. }   

Step 9

This is our user interface of the application. Click the "Make Project" option.

Android

Step 10

Run the application, then choose virtual machine, and then click OK.

Android

Deliverables

Here, we have successfully created stop watch Android application.

Android

Android

Don’t forgot to like and follow me. If you have any doubts, just comment below.