Cronómetro en Android

El cronómetro es un widget en Android que se usa para mostrar una vista similar a un temporizador en la aplicación de Android. Podemos usarlo como un temporizador donde podemos proporcionar un contador de tiempo de subida y bajada. En este artículo, veremos cómo usar Chronometer en una aplicación de Android. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : este artículo de Android cubre los lenguajes Java y Kotlin . 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: trabajar con el archivo activity_main.xml

Vaya a aplicación > res > diseño > actividad_principal.xml y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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>

Paso 3: trabajar con el archivo MainActivity 

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.widget.Button
import android.widget.Chronometer
import androidx.appcompat.app.AppCompatActivity
 
class 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()
            }
        }
    }
}

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();
                }
            }
        });
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: