ZOFTINO.COM android and web dev tutorials

Android Chronometer Timer Stopwatch Tutorial

Android Chronometer is a timer which can be used to count time from a point of time. Android Chronometer can be used to count time upwards and downwards. It is a subclass of TextView and it displays the count in TextView.

Chronometer can be started by calling start method. Before chronometer is started, you need to set starting point of time from that you want chronometer to start the count, by using setBase method and passing starting point of time. By default, meaning if you don’t set base, it starts counting from 0 because Chronometer’s default base time is time at which start method is called.

Even if you set base to SystemClock.elapsedRealtime(), counting will start from 0, this is how Chronometer gets its default base.

To stop chronometer, you need to call stop method on it. Start and stop methods don’t change the base, they just start and stop showing count in the text view. That means Chronometer never stops counting once it is started. But you can rest base by calling setBase with a new starting point.

Chronometer timer by default displays time in "MM:SS" or "H:MM:SS, you can change it by using setFormat method.

I’ll show how to use Android Chronometer with an example.

Android Chronometer Stopwatch Example

Below code is an example of chronometer stopwatch which displays chronometer and a button. First, button will be displayed as start button. Once button is clicked, chronometer will start counting from current time displaying time in seconds and button text will change to stop. On clicking stop button, count will stop and button text will change to start. On clicking the start again, base will be reset to current time again to start a new count.

android chronometer stopwatch example

Layout

Below layout contains Chronometer with text appearance and background style settings.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Chronometer
        android:id="@+id/chronometer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="#ad1457"
        android:background="#b2dfdb"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"></Chronometer>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        style="@style/Widget.AppCompat.Button.Colored"
        android:text="Start"
        android:onClick="startStopChronometer"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chronometer"
        />
</android.support.constraint.ConstraintLayout>

You can implement Chronometer.OnChronometerTickListener and add to chronometer by calling setOnChronometerTickListener method. The listener has onChronometerTick callback method which gets called when chronometer changes.

Activity

import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Chronometer;
import android.widget.Toast;

public class ChronometerActivity  extends AppCompatActivity {

    private Chronometer chronometer;
    private boolean isStart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chronometer_activity);

        chronometer = findViewById(R.id.chronometer);
      
        chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometerChanged) {
                chronometer = chronometerChanged;
            }
        });
    }
    public void startStopChronometer(View view){
        if(isStart){
            chronometer.stop();
            isStart = false;
            ((Button)view).setText("Start");
        }else{
            chronometer.setBase(SystemClock.elapsedRealtime());
            chronometer.start();
            isStart = true;
            ((Button)view).setText("Stop");
        }
    }
}

Android Chronometer Countdown or Downward Counting

By default, chronometer counts upwards. If you want to have countdown chronometer, you need to call setCountDown method passing true as value to it. This feature is useful to count down from future time. Let’s say you want to count down from tomorrow in your app. Then you need to first set setCountDown to true and set base to SystemClock.elapsedRealtime() + one day’s time in milliseconds which is 1000*60*60*24.

 chronometer = findViewById(R.id.chronometer);
chronometer.setCountDown(true);
long dayInMilli = 60*60*24*1000;
chronometer.setBase(SystemClock.elapsedRealtime()+dayInMilli);
chronometer.start() 

Android Chronometer Other Example

If you want chronometer to count upwards from yesterday then you can use below code.

 chronometer = findViewById(R.id.chronometer);
long dayInMilli = 60*60*24*1000;
chronometer.setBase(SystemClock.elapsedRealtime() - dayInMilli);
chronometer.start()