Chronometer Example

In android, widgets are small and interactive components that allow users to access app information quickly. One such widget is the chronometer widget, which is used to display time in a stopwatch or countdown timer format.

In this article, we will discuss how to implement the chronometer widget in android.

Step 1: Creating a new project

To create a new project, open Android Studio and click on File > New Project. In the New Project wizard, enter the project name, select the language, and other necessary details.

Step 2: Adding the chronometer widget to the layout file

To add the chronometer widget to the layout file, open the activity_main.xml file and add the following code:

<Chronometer
    android:id="@+id/chronometer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:layout_gravity="center" />

This will add the chronometer widget to the center of the screen. You can customize the layout as per your requirement.

Step 3: Starting the chronometer

To start the chronometer, we need to get a reference to the chronometer widget and call the start() method. We can do this in the MainActivity class as shown below:

class MainActivity : AppCompatActivity() {
    private lateinit var chronometer: Chronometer

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        chronometer = findViewById(R.id.chronometer)
        chronometer.start()
    }
}

In the code above, we get a reference to the chronometer widget using the findViewById() method and start the chronometer using the start() method.

Step 4: Pausing and Resuming the chronometer

To pause and resume the chronometer, we need to add a button to the layout file and implement the onClickListener() interface in the MainActivity class. Here is the code for the button and the onClickListener() method:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Pause" />

and in MainActivity class

class MainActivity : AppCompatActivity(), View.OnClickListener {
    private lateinit var chronometer: Chronometer
    private lateinit var button: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        chronometer = findViewById(R.id.chronometer)
        chronometer.start()

        button = findViewById(R.id.button)
        button.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        if (button.text == "Pause") {
            button.text = "Resume"
            chronometer.stop()
        } else {
            button.text = "Pause"
            chronometer.start()
        }
    }
}

In the code above, we get a reference to the button widget using the findViewById() method and implement the onClickListener() interface to handle the click events. When the button is clicked, we check its text to determine whether to pause or resume the chronometer.

Step 5: Resetting the chronometer

To reset the chronometer, we can add another button to the layout file and call the reset() method on the chronometer widget. Here is the code for the reset button and its onClickListener() method:

<Button
    android:id="@+id/reset_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Reset" />

and in MainActivity class

class MainActivity : AppCompatActivity(), View.OnClickListener {
    private lateinit var chronometer: Chronometer
    private lateinit var button: Button
    private lateinit var resetButton: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        chronometer = findViewById(R.id.chronometer)
        chronometer.start()

        button = findViewById(R.id.button)
        button.setOnClickListener(this)

        resetButton = findViewById(R.id.reset_button)
        resetButton.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.button -> {
                if (button.text == "Pause") {
                    button.text = "Resume"
                    chronometer.stop()
                } else {
                    button.text = "Pause"
                    chronometer.start()
                }
            }
            R.id.reset_button -> {
                chronometer.base = SystemClock.elapsedRealtime()
            }
        }
    }
}

In the code above, we get a reference to the reset button using the findViewById() method and call the reset() method on the chronometer widget when the button is clicked.

Another Example

This is a simple example that allows you create a timer using the standard Chronometer API in android sdk. The example is written in Kotlin.

Here is the demo of what is created:

Step 1: Dependencies

No third party dependency is needed or used. However because Kotlin is used you need to add Kotlin sdk. Also androidx is used so add androidx appcompat as opposed to support library appcompat.

Step 2: Add to Layout

Next you add the chronometer to your xml layout. Also add a togglebutton to be used to toggle between on and off:

activity_main.xml

The code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Chronometer
        android:id="@+id/chr_main_timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginTop="60dp"/>

    <ToggleButton
        android:id="@+id/tog_main_on"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:textOff="on"
        android:textOn="off"/>

    <Button
        android:id="@+id/btn_main_rest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rest"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"/>

</LinearLayout>

Step 3: Write Kotlin Code

You can start or stop the chronometer using the start() and stop() functions. Here is the full code for main activity:

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.SystemClock
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    var pauseOffset = 0L

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        tog_main_on.setOnClickListener {
            if (tog_main_on.isChecked) {
                chr_main_timer.base = SystemClock.elapsedRealtime() - pauseOffset
                chr_main_timer.start()
            }
            else {
                pauseOffset = SystemClock.elapsedRealtime() - chr_main_timer.base
                chr_main_timer.stop()
            }
        }

//        on click btn
        btn_main_rest.setOnClickListener {
            pauseOffset = 0L
            chr_main_timer.base = SystemClock.elapsedRealtime()
        }
    }
}

Step 4: Run

Lastly run the project.

Reference

Download the code below:

No	Link
1.	Download code
2.	Browse code
3.	Follow code author

Conclusion

In this article, we discussed how to implement the chronometer widget in android. We covered how to add the widget to the layout file, start, pause, resume, and reset the chronometer. We hope this article was helpful in understanding how to use this widget in your android applications. Happy coding!