Android Chronometer Example

android.widget.Chronometer is an android provides timer component.It is also extends android.widget.TextView. So you can use a lot of TextView’s xml attributes and methods. But this article will show you examples about how to use Chronometer self owned attributes and methods.

1. Chronometer Use Case.

  1. Display digital time text with default format like mm:ss. This is commonly use case.
  2. Display a count down timer.
  3. Display what ever text that you want to display every second.
  4. Display different images every second.

2. Chronometer Core Methods.

  1. setBase(long timerBaseTime) : Base time is the timer start count time. You can use this method to set it to any time. If you do not set, it will use the default time when the chronometer instance is created.
  2. start() : Start the timer, then you can see the chronometer text area time value increased every one second in general. You can see the demo video on URL https://youtu.be/Pvx7lZbfeHU.
  3. stop() : Stop the timer from counting, then the time value will not update. But if you call start() method later, because the base time is not change, so you can see the time value will bounce to a little bigger time. If you want chronometer count from 00:00, you need to call setBase(SystemClock.elapsedRealtime()) to set the base time to current system time. Then start the timer again immediately.
  4. setOnChronometerTickListener(new Chronometer.OnChronometerTickListener()) : If you want to customize the timer behaviour, you should set a OnChronometerTickListener instance. This listener will be invoked automatically for every second when the timer counting. You just need to override it’s onChronometerTick() mehtod, this method will be invoked every second.

3. Chronometer Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/KqasLFHn7QE

activity_chronometer.xml

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <Button
                android:id="@+id/buttonStartChronometer"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="fill_vertical"
                android:layout_weight="1"
                android:textAllCaps="false"
                android:text="Start" />

            <Button
                android:id="@+id/buttonStopChronometer"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textAllCaps="false"
                android:layout_gravity="fill_vertical"
                android:text="Stop" />

            <Button
                android:id="@+id/buttonRestartChronometer"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textAllCaps="false"
                android:layout_gravity="fill_vertical"
                android:text="Restart" />

            <Button
                android:id="@+id/buttonSetChronometerFormat"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textAllCaps="false"
                android:layout_gravity="fill_vertical"
                android:text="Auto Reset Base Time" />

            <Button
                android:id="@+id/buttonClearChronometerFormat"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textAllCaps="false"
                android:layout_gravity="fill_vertical"
                android:text="Count Down Timer" />
        </LinearLayout>

        <Chronometer
            android:id="@+id/chronometerExample"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="60sp"
            android:textColor="@color/colorBlue"
            android:gravity="center_horizontal"/>
  </LinearLayout>

ChronometerActivity.java

package com.dev2qa.example;

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;

public class ChronometerActivity extends AppCompatActivity {

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

        final Chronometer chronometer = (Chronometer)findViewById(R.id.chronometerExample);

        Button buttonStart = (Button)findViewById(R.id.buttonStartChronometer);
        buttonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                chronometer.start();
            }
        });

        Button buttonStop = (Button)findViewById(R.id.buttonStopChronometer);
        buttonStop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                chronometer.stop();
            }
        });

        Button buttonRestart = (Button)findViewById(R.id.buttonRestartChronometer);
        buttonRestart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                long systemCurrTime = SystemClock.elapsedRealtime();
                chronometer.setBase(systemCurrTime);
            }
        });

        Button buttonSetChronometerFormat = (Button)findViewById(R.id.buttonSetChronometerFormat);
        buttonSetChronometerFormat.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                /* This listener will reset this chronometer every 10 seconds.
                   So every 10 seconds, the chronometer will start count from 00:00.
                   If do not add this listener, the chronometer will count forever.
                   You can comment below method to see the effect.
                */
                chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
                    @Override
                    public void onChronometerTick(Chronometer chronometer) {
                        long systemCurrTime = SystemClock.elapsedRealtime();
                        long chronometerBaseTime = chronometer.getBase();
                        long deltaTime = systemCurrTime - chronometerBaseTime;

                        if(deltaTime > 10000)
                        {
                            chronometer.setBase(systemCurrTime);
                        }
                    }
                });

            }
        });

        Button buttonClearChronometerFormat = (Button)findViewById(R.id.buttonClearChronometerFormat);
        buttonClearChronometerFormat.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                /* This listener will customize the chronometer text content.
                *  It will show number from 10 to 0 repeatedly.
                * */
                chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
                    int counter = 10;
                    @Override
                    public void onChronometerTick(Chronometer chronometer) {
                        if(counter < 0)
                        {
                            counter = 10;
                        }
                        chronometer.setText(counter + "");
                        counter--;
                    }
                });
            }
        });
    }
}

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.