Simple Stopwatch (Android)





In this tutorial we will try to create a Simple Stopwatch Using Android. Android is most commonly comes installed on a variety of smartphones and tablets, and even in TV. Android is an open source so that developer find it easy to develop and expand new features. So let's do the coding...
Getting Started:
First you will have to download & install the Android Development IDE (Android Studio or Eclipse). Android Studio is an open source development feel free to develop your things.
Here's the link for the Android Studio https://developer.android.com/studio/index.html
Layout Design
We will now add some layout to the application. Just kindly copy the code below and paste it inside the code editor
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android"
  3. " rel="nofollow">http://schemas.android.com/apk/res/android"
  4. </a> xmlns:app="<a href="http://schemas.android.com/apk/res-auto"
  5. " rel="nofollow">http://schemas.android.com/apk/res-auto"
  6. </a> xmlns:tools="<a href="http://schemas.android.com/tools"
  7. " rel="nofollow">http://schemas.android.com/tools"
  8. </a> android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. tools:context="com.example.arvin.simplestopwatch.MainActivity"
  11. tools:layout_editor_absoluteY="81dp"
  12. tools:layout_editor_absoluteX="0dp">
  13. <TextView
  14. android:id="@+id/time_view"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:textSize="92sp"
  18. android:textColor="@color/gray"
  19. tools:layout_constraintTop_creator="1"
  20. tools:layout_constraintRight_creator="1"
  21. app:layout_constraintRight_toRightOf="parent"
  22. android:layout_marginTop="52dp"
  23. tools:layout_constraintLeft_creator="1"
  24. app:layout_constraintLeft_toLeftOf="parent"
  25. app:layout_constraintTop_toTopOf="parent" />
  26. android:id="@+id/btn_start"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:layout_marginBottom="15dp"
  30. android:layout_marginEnd="10dp"
  31. android:layout_marginRight="10dp"
  32. android:background="@color/colorPrimary"
  33. android:onClick="onClickStart"
  34. android:text="@string/start"
  35. android:textColor="@color/white"
  36. app:layout_constraintBottom_toTopOf="@+id/btn_reset"
  37. app:layout_constraintRight_toLeftOf="@+id/btn_reset"
  38. tools:layout_constraintBottom_creator="1"
  39. tools:layout_constraintRight_creator="1" />
  40. android:id="@+id/btn_stop"
  41. android:layout_width="wrap_content"
  42. android:layout_height="wrap_content"
  43. android:layout_marginEnd="13dp"
  44. android:layout_marginRight="13dp"
  45. android:layout_marginTop="15dp"
  46. android:background="@color/red"
  47. android:onClick="onClickStop"
  48. android:text="@string/stop"
  49. android:textColor="@color/white"
  50. app:layout_constraintRight_toLeftOf="@+id/btn_start"
  51. app:layout_constraintTop_toBottomOf="@+id/btn_start"
  52. tools:layout_constraintRight_creator="1"
  53. tools:layout_constraintTop_creator="1" />
  54. android:id="@+id/btn_reset"
  55. android:layout_width="wrap_content"
  56. android:layout_height="wrap_content"
  57. android:layout_marginBottom="55dp"
  58. android:layout_marginEnd="50dp"
  59. android:layout_marginRight="48dp"
  60. android:background="@color/orange"
  61. android:onClick="onClickReset"
  62. android:text="@string/reset"
  63. android:textColor="@color/white"
  64. app:layout_constraintBottom_toBottomOf="parent"
  65. app:layout_constraintRight_toRightOf="parent"
  66. tools:layout_constraintBottom_creator="1"
  67. tools:layout_constraintRight_creator="1" />
  68. </android.support.constraint.ConstraintLayout>
Android Manifest File
The Android Manifest file provides essential information about your app to the Android system in which the system must required before running the code.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="<a href="http://schemas.android.com/apk/res/android"
  3. " rel="nofollow">http://schemas.android.com/apk/res/android"
  4. </a> package="com.example.arvin.simplestopwatch">
  5. <application
  6. android:allowBackup="true"
  7. android:icon="@mipmap/ic_launcher"
  8. android:label="@string/app_name"
  9. android:roundIcon="@mipmap/ic_launcher_round"
  10. android:supportsRtl="true"
  11. android:theme="@style/AppTheme">
  12. <activity android:name=".MainActivity"
  13. android:configChanges="orientation"
  14. android:screenOrientation="portrait">
  15. <intent-filter>
  16. <action android:name="android.intent.action.MAIN" />
  17. <category android:name="android.intent.category.LAUNCHER" />
  18. </intent-filter>
  19. </activity>
  20. </application>
  21. </manifest>
App Resources
This contains the all the resources that I have used in the app.
Colors
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="colorPrimary">#3F51B5</color>
  4. <color name="colorPrimaryDark">#303F9F</color>
  5. <color name="colorAccent">#FF4081</color>
  6. <color name="white">#FFF</color>
  7. <color name="red">#FF0000</color>
  8. <color name="orange">#FFA500</color>
  9. <color name="gray">#CCC</color>
  10. </resources>
String
  1. <resources>
  2. <string name="app_name">Simple Stopwatch</string>
  3. <string name="start">Start</string>
  4. <string name="stop">Stop</string>
  5. <string name="reset">Reset</string>
  6. </resources>
The Main Function
This code contains the main function of the application. This code automatically run the time when the user touch the start button, and simultaneously stop when the stop button touch, at the same time reset when the reset button touch.
  1. package com.example.arvin.simplestopwatch;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.os.Handler;
  5. import android.view.View;
  6. import android.widget.TextView;
  7. public class MainActivity extends Activity {
  8. private int seconds=0;
  9. private boolean startRun;
  10. @Override
  11. protected void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. setContentView(R.layout.activity_main);
  14. if(savedInstanceState != null){
  15. seconds = savedInstanceState.getInt("seconds");
  16. startRun=savedInstanceState.getBoolean("startRun");
  17. }
  18. Timer();
  19. }
  20. public void onSaveInstanceState(Bundle saveInstanceState){
  21. saveInstanceState.putInt("seconds", seconds);
  22. saveInstanceState.putBoolean("startRun", startRun);
  23. }
  24. public void onClickStart(View view){
  25. startRun=true;
  26. }
  27. public void onClickStop(View view){
  28. startRun=false;
  29. }
  30. public void onClickReset(View view){
  31. startRun=false;
  32. seconds=0;
  33. }
  34. private void Timer(){
  35. final TextView timeView = (TextView)findViewById(R.id.time_view);
  36. final Handler handler = new Handler();
  37. handler.post(new Runnable() {
  38. @Override
  39. public void run() {
  40. int hours = seconds/3600;
  41. int minutes = (seconds%3600)/60;
  42. int secs = seconds%60;
  43. String time = String.format("%d:%02d:%02d", hours, minutes, secs);
  44. timeView.setText(time);
  45. if(startRun){
  46. seconds++;
  47. }
  48. handler.postDelayed(this, 100);
  49. }
  50. });
  51. }
  52. }
There you have it we successfully created a Simple Stopwatch Using Android. I hope that this simple tutorial help you to your projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

0 comments:

Post a Comment