Post
Ask Question

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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <radialprogress.RadialProgressView  
  7.         android:id="@+id/progressView"  
  8.         android:layout_width="300px"  
  9.         android:layout_height="300px"  
  10.         android:layout_margin="20dp"  
  11.         android:layout_gravity="center_horizontal"  
  12.         min_value="0"  
  13.         max_value="60"  
  14.         progress_type="big"  
  15.         hide_label="true"  
  16.         progress_color="#009688" />  
  17.     <TextView  
  18.         android:text="0:0:0"  
  19.         android:textAppearance="?android:attr/textAppearanceLarge"  
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content"  
  22.         android:layout_gravity="center_horizontal"  
  23.         android:id="@+id/txtTimer" />  
  24.     <Button  
  25.         android:text="Start"  
  26.         android:layout_width="match_parent"  
  27.         android:layout_height="wrap_content"  
  28.         android:id="@+id/btnstart" />  
  29.     <Button  
  30.         android:text="Stop"  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="wrap_content"  
  33.         android:id="@+id/btnstop" />  
  34. </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
  1. using Android.App;  
  2. using Android.OS;  
  3. using Android.Widget;  
  4. using RadialProgress;  
  5. using System.Timers;  
  6. namespace StopWatch  
  7. {  
  8.     [Activity(Label = "StopWatch", MainLauncher = true)]  
  9.     public class MainActivity : Activity  
  10.     {  
  11.         RadialProgressView radialProgrssView;  
  12.         Button btnStart, btnStop;  
  13.         TextView txtTimer;  
  14.         Timer timer;  
  15.         int hour = 0, min = 0, sec = 0;  
  16.         protected override void OnCreate(Bundle savedInstanceState)  
  17.         {  
  18.             base.OnCreate(savedInstanceState);  
  19.             // Set our view from the "main" layout resource  
  20.             SetContentView(Resource.Layout.Main);  
  21.             radialProgrssView = FindViewById<RadialProgressView>(Resource.Id.progressView);  
  22.             btnStart = FindViewById<Button>(Resource.Id.btnstart);  
  23.             btnStop = FindViewById<Button>(Resource.Id.btnstop);  
  24.             txtTimer = FindViewById<TextView>(Resource.Id.txtTimer);  
  25.             btnStart.Click += delegate {  
  26.                 timer = new Timer();  
  27.                 timer.Interval = 1000; // 1 second  
  28.                 timer.Elapsed += Timer_Elapsed;  
  29.                 timer.Start();  
  30.             };  
  31.             btnStop.Click += delegate {  
  32.                 timer.Dispose();  
  33.                 timer = null;  
  34.             };  
  35.         }  
  36.         private void Timer_Elapsed(object sender, ElapsedEventArgs e)  
  37.         {  
  38.             sec++;  
  39.             if(sec == 60)  
  40.             {  
  41.                 min++;  
  42.                 sec = 0;  
  43.             }  
  44.             if(min == 60)  
  45.             {  
  46.                 hour++;  
  47.                 min = 0;  
  48.             }  
  49.             RunOnUiThread(() => { txtTimer.Text = $"{hour}:{min}:{sec}"; });  
  50.             radialProgrssView.Value = sec;  
  51.         }  
  52.     }  
  53. }  

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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <TextView  
  7.         android:text="0:00:000"  
  8.         android:textAppearance="?android:attr/textAppearanceLarge"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:id="@+id/txtTimer"  
  12.         android:textSize="40sp"  
  13.         android:layout_gravity="center_horizontal"  
  14.         android:layout_marginTop="20dp"  
  15.         android:layout_marginBottom="10dp" />  
  16.     <LinearLayout  
  17.         android:orientation="horizontal"  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="wrap_content">  
  20.         <Button  
  21.             android:text="Start"  
  22.             android:layout_width="0dp"  
  23.             android:layout_weight="1"  
  24.             android:layout_height="wrap_content"  
  25.             android:id="@+id/btnStart" />  
  26.         <Button  
  27.             android:text="Pause"  
  28.             android:layout_width="0dp"  
  29.             android:layout_weight="1"  
  30.             android:layout_height="wrap_content"  
  31.             android:id="@+id/btnPause" />  
  32.         <Button  
  33.             android:text="Lap"  
  34.             android:layout_width="0dp"  
  35.             android:layout_weight="1"  
  36.             android:layout_height="wrap_content"  
  37.             android:id="@+id/btnLap" />  
  38.     </LinearLayout>  
  39.   <LinearLayout  
  40.     android:orientation="vertical"  
  41.     android:layout_width="match_parent"  
  42.     android:layout_height="wrap_content">  
  43.     <ScrollView  
  44.     android:layout_width="match_parent"  
  45.     android:layout_height="wrap_content">  
  46.       <LinearLayout      
  47.         android:orientation="vertical"  
  48.         android:layout_width="match_parent"  
  49.         android:layout_height="wrap_content"  
  50.         android:id="@+id/container">  
  51.       </LinearLayout>  
  52.     </ScrollView>  
  53.   </LinearLayout>  
  54. </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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <TextView  
  9.         android:text="Large Text"  
  10.         android:textAppearance="?android:attr/textAppearanceLarge"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:id="@+id/textView1" />  
  14. </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
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using System.Timers;  
  5. using System;  
  6. using Android.Views;  
  7. using Android.Content;  
  8. namespace StopWatchMilliseconds  
  9. {  
  10.     [Activity(Label = "StopWatchMilliseconds", MainLauncher = true)]  
  11.     public class MainActivity : Activity  
  12.     {  
  13.         Button btnStart, btnPause, btnLap;  
  14.         TextView txtTimer;  
  15.         LinearLayout container;  
  16.         Timer timer;  
  17.         int mins = 0, secs = 0, millisecond = 1;  
  18.         protected override void OnCreate(Bundle savedInstanceState)  
  19.         {  
  20.             base.OnCreate(savedInstanceState);  
  21.             // Set our view from the "main" layout resource  
  22.             SetContentView(Resource.Layout.Main);  
  23.             btnStart = FindViewById<Button>(Resource.Id.btnStart);  
  24.             btnPause = FindViewById<Button>(Resource.Id.btnPause);  
  25.             btnLap = FindViewById<Button>(Resource.Id.btnLap);  
  26.             container = FindViewById<LinearLayout>(Resource.Id.container);  
  27.             txtTimer = FindViewById<TextView>(Resource.Id.txtTimer);  
  28.             btnStart.Click += delegate {  
  29.                 timer = new Timer();  
  30.                 timer.Interval = 1; // 1 Milliseconds  
  31.                 timer.Elapsed += Timer_Elapsed;  
  32.                 timer.Start();  
  33.             };  
  34.             btnPause.Click += delegate {  
  35.                 timer.Stop();  
  36.                 timer = null;  
  37.             };  
  38.             btnLap.Click += delegate {  
  39.                 LayoutInflater inflater = (LayoutInflater)BaseContext.GetSystemService(Context.LayoutInflaterService);  
  40.                 View addView = inflater.Inflate(Resource.Layout.row, null);  
  41.                 TextView textContent = addView.FindViewById<TextView>(Resource.Id.textView1);  
  42.                 textContent.Text = txtTimer.Text;  
  43.                 container.AddView(addView);  
  44.             };  
  45.         }  
  46.         private void Timer_Elapsed(object sender, ElapsedEventArgs e)  
  47.         {  
  48.             millisecond++;  
  49.             if (millisecond > 1000)  
  50.             {  
  51.                 secs++;  
  52.                 millisecond = 0;  
  53.             }  
  54.             if (secs == 59)  
  55.             {  
  56.                 mins++;  
  57.                 secs = 0;  
  58.             }  
  59.             RunOnUiThread(() => {  
  60.                 txtTimer.Text = String.Format("{0}:{1:00}:{2:000}", mins, secs, millisecond);  
  61.             });  
  62.         }  
  63.     }  
  64. }  
Output
 
 
 
Summary
 
This was the process of creating a Stop Watch app in Xamarin.Android, using Visual Studio. Please share your comments and feedback. 


Similar Articles