Friday, December 21, 2012

Android beginner tutorial: Part 27 - Chronometer widget

In this tutorial we'll learn about the Chronometer widget and create a simple stopwatch.

The Chronometer widget is pretty much what the name suggests - its a chronometer. In other words, a stopwatch.

It allows the user to start and stop counting time, as well as set the starting time value.

The main three methods used with this class are start(), stop(), setFormat() and setBase(). The first two methods are self-explanatory - the start and stop the stopwatch. The setFormat() method sets the format of the displayed time (for example "H:MM:SS"). The setBase() method sets the time that the chronometer time is in reference to. This can be used, for example, to reset the stopwatch.

Let's create a simple application now.

Add a Chronometer and three buttons in the layout XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity" >
    
    <Chronometer android:id="@+id/chronometer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        />
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        
        <Button android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn1"
            />
        
        <Button android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn2"
            />
        
        <Button android:id="@+id/btn_reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn3"
            />
        
    </LinearLayout>
    
</LinearLayout>

As you can see, there are 3 buttons - btn_start, btn_stop and btn_reset.

Their labels are set in strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Code For Food Test</string>
    <string name="btn1">Start</string>
    <string name="btn2">Stop</string>
    <string name="btn3">Reset</string>
    <string name="menu_settings">Settings</string>

</resources>

Now go to the MainActivity.java class file.

Firstly, implement the OnClickListener interface to the activity:

public class MainActivity extends Activity implements OnClickListener{

Declare a "chrono" value:

private Chronometer chrono;

In the onCreate() function set the reference to the chronometer object in the layour xml to chrono variable. Declare 3 variables for each of the button, then use them to add listeners to the buttons using setOnClickListener:

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

chrono = (Chronometer)findViewById(R.id.chronometer);

final Button bStart = (Button)findViewById(R.id.btn_start);
final Button bStop = (Button)findViewById(R.id.btn_stop);
final Button bReset = (Button)findViewById(R.id.btn_reset);

bStart.setOnClickListener(this);
bStop.setOnClickListener(this);
bReset.setOnClickListener(this);
}

Then add an onClick() function that listens to the click events. Use a switch..case statement to check what object was clicked on. Call the start() and stop() methods of the chronometer if the objects are btn_start and btn_stop. If the btn_reset button is called, call the setBase() method of the chronometer and pass SystemClock.elapsedRealtime() as parameter. This will set the base time to the elapsed time since the launching of the application, resetting the stopwatch.

@Override
public void onClick(View v){
switch(v.getId()){
case R.id.btn_start:
chrono.start();
break;
case R.id.btn_stop:
chrono.stop();
break;
case R.id.btn_reset:
chrono.setBase(SystemClock.elapsedRealtime());
break;
}
}

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Chronometer;

public class MainActivity extends Activity implements OnClickListener{

private Chronometer chrono;

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

chrono = (Chronometer)findViewById(R.id.chronometer);

final Button bStart = (Button)findViewById(R.id.btn_start);
final Button bStop = (Button)findViewById(R.id.btn_stop);
final Button bReset = (Button)findViewById(R.id.btn_reset);

bStart.setOnClickListener(this);
bStop.setOnClickListener(this);
bReset.setOnClickListener(this);
}

@Override
public void onClick(View v){
switch(v.getId()){
case R.id.btn_start:
chrono.start();
break;
case R.id.btn_stop:
chrono.stop();
break;
case R.id.btn_reset:
chrono.setBase(SystemClock.elapsedRealtime());
break;
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

The results:



Thanks for reading!

1 comment:

nickelback said...

Hi thanks!!!
Is there a method in chronometer to do split lap?

Post a Comment