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.