Using Chronometer in Android

In this blog post, I would like to show how to code Chronometer in Android.

In Simple Words, Chronometer is a Stop Watch without milliseconds.

1. Create a new project File -> Android Project. On activity_main.xml copy paste this code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 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" >

 <Chronometer
 android:id="@+id/chronometer1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="42dp"
 android:text="Chronometer" />

 <Button
 android:id="@+id/button3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/button2"
 android:layout_alignBottom="@+id/button2"
 android:layout_centerHorizontal="true"
 android:text="Stop" />

 <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/chronometer1"
 android:layout_marginRight="18dp"
 android:layout_marginTop="50dp"
 android:layout_toLeftOf="@+id/button3"
 android:text="Start" />

 <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/button1"
 android:layout_alignBottom="@+id/button1"
 android:layout_marginLeft="20dp"
 android:layout_toRightOf="@+id/button3"
 android:text="Reset" />

 <Button
 android:id="@+id/button4"
 style="?android:attr/buttonStyleSmall"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/button3"
 android:layout_centerHorizontal="true"
 android:text="Continue" />

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/button4"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="25dp" />

</RelativeLayout>

2. Now open your MainActivity.java and copy paste this code:

import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Chronometer;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {
 Chronometer chrono;
 Button b1, b2, b3, b4;
 TextView tv;
 Boolean pausesFlag = false;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 chrono = (Chronometer) findViewById(R.id.chronometer1);
 b1 = (Button) findViewById(R.id.button1);
 b2 = (Button) findViewById(R.id.button2);
 b3 = (Button) findViewById(R.id.button3);
 b4 = (Button) findViewById(R.id.button4);
 tv = (TextView) findViewById(R.id.textView1);

 b1.setOnClickListener(this);
 b2.setOnClickListener(this);
 b3.setOnClickListener(this);
 b4.setOnClickListener(this);

 }

 @Override
 public void onClick(View v) {
 if (v.getId() == R.id.button1) {

 if (pausesFlag) {
 chrono.start();
 } else {
 chrono.setBase(SystemClock.elapsedRealtime());
 chrono.start();
 }

 } else if (v.getId() == R.id.button2) {
 pausesFlag = false;
 showElapsedTime();
 chrono.setBase(SystemClock.elapsedRealtime());

 } else if (v.getId() == R.id.button3) {
 pausesFlag = true;
 chrono.stop();
 showElapsedTime();

 } else if (v.getId() == R.id.button4) {
 int stoppedMilliseconds = 0;
 String chronoText = chrono.getText().toString();
 String array[] = chronoText.split(":");
 if (array.length == 2) {
 stoppedMilliseconds = Integer.parseInt(array[0]) * 60 * 1000
 + Integer.parseInt(array[1]) * 1000;
 } else if (array.length == 3) {
 stoppedMilliseconds = Integer.parseInt(array[0]) * 60 * 60
 * 1000 + Integer.parseInt(array[1]) * 60 * 1000
 + Integer.parseInt(array[2]) * 1000;
 }
 chrono.setBase(SystemClock.elapsedRealtime() - stoppedMilliseconds);
 chrono.start();
 }
 }

 private void showElapsedTime() {
 long elapsedMillis = SystemClock.elapsedRealtime() - chrono.getBase();
 tv.setText("Elapsed milliseconds: " + elapsedMillis);
 }

}

ScreenShots:

Screenshot_2014-12-10-13-11-25 Screenshot_2014-12-10-13-11-03 Screenshot_2014-12-10-13-11-12


Tips to Remember always:

1. When the Activity Starts Chronometer actually starts along with it. So when we need to starts the chronometer, we need to use this line

chrono.setBase(SystemClock.elapsedRealtime());

2. On MainActivity.java class line no: 38 – 43. I’m using pause flag to know whether to restart the chronometer from the beginning or to continue  the chronometer(i.e., as a lap). Oh wait, what about the continue option then [on MainActivity.java on line: 56-69] for? this option is to continue the chronometer where it stops.

 

Hope this helpful. Your valuable comments are always welcomed. It will help to improve my post and understanding.
Download Source Code from here.

durga chiranjeevi

durga chiranjeevi

I'm currently working as Android developer at Energy Alternatives India. Interested in Application and Game development.
durga chiranjeevi

Leave a Reply

Your email address will not be published. Required fields are marked *