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

• Android Studio
• Little bit XML and JAVA knowledge.
• Android Emulator (or) Android mobile
• Download link (Android Studio)

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.



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.



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.



Step 4

Choose the Basic Activity then click Next.



Step 5

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



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:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=" ganeshannt.stopwatch.StopWatchActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_stop_watch"/>

</android.support.design.widget.CoordinatorLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=" ganeshannt.stopwatch.StopWatchActivity"
    tools:showIn="@layout/activity_stop_watch">

    <TextView
        android:id="@+id/time_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="0dp"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="92sp"/>

    <Button
        android:id="@+id/start_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/time_view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:onClick="onClickStart"
        android:text="@string/start"/>

    <Button
        android:id="@+id/stop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/start_button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:onClick="onClickStop"
        android:text="@string/stop"/>

    <Button
        android:id="@+id/reset_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/stop_button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:onClick="onClickReset"
        android:text="@string/reset"/>
</RelativeLayout>

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

package ganeshannt.stopwatch;

import android.os.Bundle;
import android.os.Handler;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class StopWatchActivity extends AppCompatActivity {

    private int seconds = 0;
    private boolean running;
    private boolean wasRunning;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_stop_watch);
        // toolbar is the blue bar at the top of the main layout
//        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//        setSupportActionBar(toolbar);

        if(savedInstanceState!=null) {
            seconds = savedInstanceState.getInt("seconds");
            running = savedInstanceState.getBoolean("running");
            wasRunning = savedInstanceState.getBoolean("wasRunning");
        }
        runTimer();

    }

    //start the stopwatch running when the start button is clicked
    public void onClickStart(View view){
        running = true;
    }

    //stop the stopwatch running when the stop button is clicked
    public void onClickStop(View view) {
        running = false;
    }

    //reset the stopwatch when the reset button is clicked
    public void onClickReset(View view) {
        running = false;
        seconds = 0;
    }

    private void runTimer() {
        final TextView timeView = (TextView) findViewById(R.id.time_view);
        final Handler handler = new Handler();
        handler.post(new Runnable() {
            @Override
            public void run() {

            int hours = seconds / 3600;
            int minutes = (seconds % 3600) / 60;
            int secs = seconds % 60;
            String time = String.format("%d:%02d:%02d", hours, minutes, secs);
            timeView.setText(time);
            if(running)

            {
                seconds++;
            }

            handler.postDelayed(this,1000);
            }
        });

    }

    @Override
    public void onSaveInstanceState(Bundle savedInstanceState){
        savedInstanceState.putInt("seconds", seconds);
        savedInstanceState.putBoolean("running", running);
        savedInstanceState.putBoolean("wasRunning", wasRunning);
    }

//    @Override
//    protected void onStop(){
//        super.onStop();
//        wasRunning = running;
//        running = false;
//    }
//    @Override
//    protected void onStart() {
//        super.onStart();
//        if(wasRunning) {
//            running = true;
//        }
//    }

    @Override
    protected void onPause() {
        super.onPause();
        wasRunning = running;
        running = false;
    }

    @Override
    protected void onResume() {
        super.onResume();
        if(wasRunning) {
            running = true;
        }
    }
}

Step 9

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



Step 10

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



Deliverables

Here, we have successfully created stop watch Android application.





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