Chronometer is a widget in android which is used to display a timer-like view in the android application. We can use it like a timer where we can provide an up and down time counter. In this article, we will look at how to use Chronometer in an android application. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the code below. Comments are added in the code to get to know in detail.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:id="@+id/idRLContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!--on below line we are creating a simple text view--> <TextView android:id="@+id/idTVHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@id/idCMmeter" android:layout_centerInParent="true" android:layout_margin="20dp" android:gravity="center" android:padding="10dp" android:text="Chronometer in Android" android:textAlignment="center" android:textColor="@color/black" android:textSize="20sp" android:textStyle="bold" /> <!--on below line we are creating a chronometer--> <Chronometer android:id="@+id/idCMmeter" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="20dp" android:gravity="center" android:padding="10dp" android:textAlignment="center" android:textColor="@color/black" android:textSize="20sp" android:textStyle="bold" /> <!--on below line we are creating a button to create a chronometer--> <Button android:id="@+id/idBtnChronometer" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idCMmeter" android:layout_margin="20dp" android:padding="4dp" android:text="Start Chronometer" android:textAllCaps="false" /></RelativeLayout> |
Step 3: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgprojectimport android.os.Bundleimport android.widget.Buttonimport android.widget.Chronometerimport androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() { // on below line we are creating a variable. lateinit var chronometer: Chronometer lateinit var chronometerBtn: Button var isRunning = false override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing our variables. chronometer = findViewById(R.id.idCMmeter) chronometerBtn = findViewById(R.id.idBtnChronometer) // on below line we are adding click listener for our button chronometerBtn.setOnClickListener { // on below line we are checking // if chronometer is running or not. if (isRunning) { // in this condition chronometer is running // on below line we are updating text for button chronometerBtn.text = "Start Chronometer" // on below line we are updating boolean variable isRunning = false // on below line we are stopping chronometer chronometer.stop() } else { // in this condition chronometer is running // on below line we are updating text for button chronometerBtn.text = "Stop Chronometer" // on below line we are updating boolean variable isRunning = true // on below line we are starting chronometer chronometer.start() } } }} |
Java
package com.gtappdevelopers.kotlingfgproject;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Chronometer;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity { // on below line we are creating variables. private Chronometer chronometer; private Button chronometerBtn; boolean isRunning = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line we are initializing our variables. chronometer = findViewById(R.id.idCMmeter); chronometerBtn = findViewById(R.id.idBtnChronometer); // on below line we are adding click listener for our button chronometerBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // on below line we are checking if // chronometer is running or not. if (isRunning) { // in this condition chronometer is running // on below line we are updating text for button chronometerBtn.setText("Start Chronometer"); // on below line we are updating boolean variable isRunning = false; // on below line we are stopping chronometer chronometer.stop(); } else { // in this condition chronometer is running // on below line we are updating text for button chronometerBtn.setText("Stop Chronometer"); // on below line we are updating boolean variable isRunning = true; // on below line we are starting chronometer chronometer.start(); } } }); }} |
Now run your application to see the output of it.
Output:
