Chronometer in Kotlin

Android ChronoMeter is user interface control which shows timer in the view. We can easily start up or down counter with base time using the chronometer widget. By default, start() method can assume base time and starts the counter.
Generally, we can create use ChronoMeter widget in XML layout but we can do it programmatically also.

Step by Step in Chronometer in Kotlin

Step 1: Create New Project

First we create a new project by following the below steps:

Click on File, then New => New Project.
After that include the Kotlin support and click on next.
Select the minimum SDK as per convenience and click next button.
Then select the Empty activity => next => finish.

Step 2: Modify activity_main.xml file

In this file, we use the ChronoMeter widget along with a button to start or stop the meter and also set attributes for both of them.

Note: android:countDown is a attribute which is used to define whether the chronometer will count up or count down.

activity_main.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:orientation="vertical"
    android:id="@+id/constraint_layout"
    android:background="@color/white">

    <Chronometer
        android:id="@+id/c_meter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_marginStart="68dp"
        android:layout_marginTop="256dp"
        android:layout_marginEnd="68dp"
        android:layout_marginBottom="28dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@color/black"
        android:textSize="36sp"
        android:gravity="center_horizontal"
        app:layout_constraintBottom_toTopOf="@+id/btn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="163dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="163dp"
        android:text="@string/start"
        app:layout_constraintEnd_toEndOf="@id/c_meter"
        app:layout_constraintHorizontal_bias="0.485"
        app:layout_constraintStart_toEndOf="@+id/c_meter"
        app:layout_constraintStart_toStartOf="@id/c_meter"
        app:layout_constraintTop_toBottomOf="@+id/c_meter" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Update strings.xml file

Here, we update the name of the application using the string tag. We also other strings which can be used in MainActivity.kt file.

MainActivity.kt:

XML

<resources>
    <string name="app_name">ChronometerInKotlin</string>
    <string name="stop">Stop Timer</string>
    <string name="start">Start Timer</string>
    <string name="working">Started</string>
    <string name="stopped">Stopped</string>
</resources>

Step 3: Access ChronoMeter in MainActivity.kt file

First, we declare a variable meter to access the Chronometer from the XML layout file.

val meter = findViewById<Chronometer>(R.id.c_meter)

then, we access the button from the xml file and set setOnClickListener to start and stop the timer.

val btn = findViewById<Button>(R.id.btn)
        btn?.setOnClickListener(object : View.OnClickListener {...}

MainActivity.kt:

Kotlin

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle
import android.os.SystemClock
import android.widget.Button
import android.view.View
import android.widget.Chronometer
import android.widget.Toast

class MainActivity : AppCompatActivity() {

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

        // Access the chronometer from XML file
        val meter = findViewById<Chronometer>(R.id.c_meter)
        var pauseOffset:Long =0


        // Access the button using id
        val btn = findViewById<Button>(R.id.btn)
        btn?.setOnClickListener(object : View.OnClickListener {

            var isWorking = false

            override fun onClick(v: View) {
                if (!isWorking) {
                
                    // Updating the Values in the Chronometer
                    meter.base = SystemClock.elapsedRealtime() - pauseOffset
                    
                    meter.start()
                    
                    isWorking = true
                } else {
                    meter.stop()
                    
                    // Calculate pause offset for later resume
                    pauseOffset = SystemClock.elapsedRealtime() - meter.base
                    isWorking = false
                }

                btn.setText(if (isWorking) R.string.start else R.string.stop)

                Toast.makeText(this@MainActivity, getString(
                    if (isWorking)
                        R.string.working
                    else
                        R.string.stopped),
                    Toast.LENGTH_SHORT).show()
            }
        })
    }
}

Step by Step in Chronometer in Kotlin

Step 1: Create New Project

Step 2: Modify activity_main.xml file

Step 3: Update strings.xml file

Step 3: Access ChronoMeter in MainActivity.kt file

Demo Video:

Explore