Xamarin.Android - Stop Watch Seconds And Milliseconds

Introduction

 

In this article, I shall show you how to make a simple stop watch app in Xamarin Android. A stopwatch is a handheld timepiece designed to measure the amount of time elapsed from a particular time when it is activated to the time when the piece is deactivated. A large digital version of a stopwatch designed for viewing at a distance, as in a sports stadium, is called a stopclock. In manual timing, the clock is started and stopped by a person pressing a button.

 

Prerequisites

• Radial Progress 
• Visual Studio 2017

The steps given below are required to be followed in order to create a Stop Watch app in Xamarin.Android, using Visual Studio.

 

Step 1

 

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like StopWatch.

 

 

Step 2

 

Go to Solution Explorer-> Components -> then Right Click-> Get More Components. In this way, you can move on Xamarin Components Store, search for Radial Progress, and add that to the app.

 

 

Step 3

 

Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml and add the following code. The layout will have an RadialProgressView in order to preview of progress. I also added a TextView to display the watch and two button Start and Stop.

 

(FileName: Main.axml)

 

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <radialprogress.RadialProgressView
        android:id="@+id/progressView"
        android:layout_width="300px"
        android:layout_height="300px"
        android:layout_margin="20dp"
        android:layout_gravity="center_horizontal"
        min_value="0"
        max_value="60"
        progress_type="big"
        hide_label="true"
        progress_color="#009688" />
    <TextView
        android:text="0:0:0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:id="@+id/txtTimer" />
    <Button
        android:text="Start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnstart" />
    <Button
        android:text="Stop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnstop" />
</LinearLayout>

Step 4

 

Now, go to solution Explorer-> Project Name-> MainActivity file and add following code and use appropriate namespaces.

 

(FileName: MainActivity.cs)

 

MainActivity C# Code

using Android.App;
using Android.OS;
using Android.Widget;
using RadialProgress;
using System.Timers;
namespace StopWatch
{
    [Activity(Label = "StopWatch", MainLauncher = true)]
    public class MainActivity : Activity
    {
        RadialProgressView radialProgrssView;
        Button btnStart, btnStop;
        TextView txtTimer;
        Timer timer;
        int hour = 0, min = 0, sec = 0;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            radialProgrssView = FindViewById<RadialProgressView>(Resource.Id.progressView);
            btnStart = FindViewById<Button>(Resource.Id.btnstart);
            btnStop = FindViewById<Button>(Resource.Id.btnstop);
            txtTimer = FindViewById<TextView>(Resource.Id.txtTimer);
            btnStart.Click += delegate {
                timer = new Timer();
                timer.Interval = 1000; // 1 second
                timer.Elapsed += Timer_Elapsed;
                timer.Start();
            };
            btnStop.Click += delegate {
                timer.Dispose();
                timer = null;
            };
        }
        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            sec++;
            if(sec == 60)
            {
                min++;
                sec = 0;
            }
            if(min == 60)
            {
                hour++;
                min = 0;
            }
            RunOnUiThread(() => { txtTimer.Text = $"{hour}:{min}:{sec}"; });
            radialProgrssView.Value = sec;
        }
    }
}

Output

 

 

Create Another Project For Stop Watch Milliseconds

 

The steps given below are required to be followed in order to create a Stop Watch Milliseconds app in Xamarin.Android, using Visual Studio.

 

Step 1

 

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like StopWatchMilliseconds.

 

 

 

Step 2

 

Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml and add the following code.

 

(FileName: Main.axml)

 

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="0:00:000"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtTimer"
        android:textSize="40sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp" />
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="Start"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/btnStart" />
        <Button
            android:text="Pause"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/btnPause" />
        <Button
            android:text="Lap"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/btnLap" />
    </LinearLayout>
  <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
      <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/container">
      </LinearLayout>
    </ScrollView>
  </LinearLayout>
</LinearLayout>

Step 3

 

Open Solution Explorer-> Project Name-> Resources-> Layout-> Right Click to Add-> New Item, select Layout from list, give it a name like row.axml, and add the following code.

 

(FileName: row.axml)

 

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
</LinearLayout>

Step 4

 

Now, go to solution Explorer-> Project Name-> MainActivity file and add following code and use appropriate namespaces.

 

(FileName: MainActivity.cs)

 

MainActivity C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using System.Timers;
using System;
using Android.Views;
using Android.Content;
namespace StopWatchMilliseconds
{
    [Activity(Label = "StopWatchMilliseconds", MainLauncher = true)]
    public class MainActivity : Activity
    {
        Button btnStart, btnPause, btnLap;
        TextView txtTimer;
        LinearLayout container;
        Timer timer;
        int mins = 0, secs = 0, millisecond = 1;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            btnStart = FindViewById<Button>(Resource.Id.btnStart);
            btnPause = FindViewById<Button>(Resource.Id.btnPause);
            btnLap = FindViewById<Button>(Resource.Id.btnLap);
            container = FindViewById<LinearLayout>(Resource.Id.container);
            txtTimer = FindViewById<TextView>(Resource.Id.txtTimer);
            btnStart.Click += delegate {
                timer = new Timer();
                timer.Interval = 1; // 1 Milliseconds
                timer.Elapsed += Timer_Elapsed;
                timer.Start();
            };
            btnPause.Click += delegate {
                timer.Stop();
                timer = null;
            };
            btnLap.Click += delegate {
                LayoutInflater inflater = (LayoutInflater)BaseContext.GetSystemService(Context.LayoutInflaterService);
                View addView = inflater.Inflate(Resource.Layout.row, null);
                TextView textContent = addView.FindViewById<TextView>(Resource.Id.textView1);
                textContent.Text = txtTimer.Text;
                container.AddView(addView);
            };
        }
        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            millisecond++;
            if (millisecond > 1000)
            {
                secs++;
                millisecond = 0;
            }
            if (secs == 59)
            {
                mins++;
                secs = 0;
            }
            RunOnUiThread(() => {
                txtTimer.Text = String.Format("{0}:{1:00}:{2:000}", mins, secs, millisecond);
            });
        }
    }
}

Output

 

 

 

Summary

 

This was the process of creating a Stop Watch app in Xamarin.Android, using Visual Studio. Please share your comments and feedback.