Curso de Desarrollo Android. Tema 12: practicando con los Views en Android Studio: un reloj y un calendario

Rubén Velasco Publicado el 14 de febrero, 2016 • 10:00

En temas anteriores de este curso de desarrollo Android hemos visto ya los conceptos básicos de la programación en Android Studio, desde la instalación y configuración del IDE hasta la creación de proyectos. Como hemos podido ver, los elementos que aparecen en la pantalla, o actividad, de nuestra aplicación se llaman Views, o vistas. En este nuevo tema vamos a practicar un poco más con este tipo de Views, especialmente con los relacionados con la fecha y la hora, creando así una sencilla aplicación «drag&drop» que nos muestre un reloj, un calendario… y alguna sorpresa más.

Creando un nuevo proyecto en Android Studio

Lo primero que haremos para iniciar esta parte del desarrollo Android es crear un nuevo proyecto. Para ello simplemente debemos seguir el tema donde lo explicamos (en resumen, abrimos el IDE y seleccionamos File > New > New project) y rellenamos el asistente con los siguientes parámetros (dejando el resto por defecto):

Name: Reloj y Calendario
Phone & tablet – API19 (para garantizar compatibilidad con los Views)
Empty Activity

El resto de elementos del asistente los dejamos en su configuración por defecto, sin modificar nada, por ejemplo, el nombre del Activity. Cuando finalice el proceso de creación del nuevo proyecto ya estaremos listos para empezar a programar.

Empezamos a programar

Como ya hemos dicho en ocasiones anteriores, al crear un nuevo proyecto se crea un programa «Hola mundo». Para que no nos moleste esta cadena de texto lo primero que haremos será eliminarla, de la forma que más nos guste.

Una vez eliminada, ya podemos empezar a desarrollar nuestra nueva aplicación. Tanto el reloj como el calendario Android Studio los considera Views del tipo Date&Time, por lo que nos aparecerán en dicha sección.

Añadiendo un View de reloj a nuestra nueva aplicación

Lo primero que vamos a hacer es añadir un reloj. Podemos añadir el que más nos guste, por ejemplo, una analógico, uno digital e incluso ambos. Para ello, desde el apartado anterior simplemente debemos arrastrar los Views a la pantalla de Android, quedando de una forma similar a la siguiente.

Añadiendo un View de calendario a nuestra nueva aplicación

Una vez que tenemos ya los relojes vamos a añadir el calendario. De igual forma, cogemos el View del calendario y lo arrastraremos hasta la pantalla del dispositivo, colocándolo donde mejor nos parezca.

Cambiando las propiedades de los Views para ajustarlos a la pantalla

Ya hemos colocado los diferentes Views en nuestra Activity. Lo próximo que debemos hacer es configurar sus propiedades para que se ajustes lo mejor posible a la interfaz. En temas anteriores hemos visto las diferentes propiedades de los diferentes elementos que podemos añadir, por lo que no vamos a profundizar demasiado en este aspecto.

Entre otras, las propiedades que podemos configurar serán:

Ajuste vertical y horizontal (layout:width / layout:height)
Fondo (background)
Color del texto (TextColor)
Tamaño del texto (TextSize)
Estilo del texto (TextStyle)

Ya tenemos nuestra aplicación de reloj y calendario creada. Podemos compilarla y probarla en la máquina virtual para comprobar que, efectivamente, funciona correctamente. Sin embargo, nosotros no nos vamos a quedar aquí y, para repasar conceptos, vamos a crear una segunda actividad que nos permita, por ejemplo, utilizar un cronómetro.

Creando una segunda actividad dentro de nuestra aplicación

Para crear la segunda actividad simplemente debemos hacer clic con el botón derecho en la carpeta principal de la lista de ficheros de la izquierda y crear desde allí una nueva actividad, en blanco. Uno de los temas anteriores explicaba paso a paso el proceso, por lo que os recomendamos repasarlo si tenemos dudas.

Ya tenemos nuestra nueva actividad. Lo siguiente que debemos hacer es añadir los elementos que queramos a ella. Como hemos dicho, vamos a hacer un cronómetro, por lo que arrastraremos los elementos que queramos (especialmente «Chronometer», del apartado «Time&Date) desde la lista de Views a la actividad y los colocaremos como más nos guste.

También debemos añadir dos botones, los cuales llamaremos «Start» y «Stop» para arrancar y detener el cronómetro. Con los elementos ya añadidos a la actividad configuraremos sus propiedades, por ejemplo, para hacer más grande el contador y dar un color a cada botón.

Nuestra actividad debería quedar similar a la siguiente.

Programando el código del cronómetro en Android Studio

Tal como tenemos la actividad del cronómetro hasta ahora no hace nada. Para que funcione debemos programar en Crono.java lo que queremos que haga la actividad.

En resumen, lo que debemos hacer es que cuando pulsemos sobre «buttonStart» el cronómetro empiece a funcionar y cuando pulsemos sobre «buttonStop» el crono se detenga.

El código que debe ir en Crono.java es el siguiente:

package es.movilzona.relojycalendario;

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

public class Crono extends Activity {
    Chronometer crono;

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

        Button button;
        crono = (Chronometer) findViewById(R.id.chronometer);

        button = (Button) findViewById(R.id.buttonStart);
        button.setOnClickListener(empezar);

        button = (Button) findViewById(R.id.buttonStop);
        button.setOnClickListener(detener);

    }

    View.OnClickListener empezar = new OnClickListener() {
        public void onClick(View v) {
            crono.setBase(SystemClock.elapsedRealtime());
            crono.start();
        }
    };

    View.OnClickListener detener = new OnClickListener() {
        public void onClick(View v) {
            crono.stop();
        }
    };
}

El cronómetro de Google solo cuenta por segundos, por lo que si queremos un crono avanzado (por ejemplo, que cuente en milisegundos) debemos utilizar otras clases revisadas diferentes a las de Google.

Programando el código de cambio de Activity

Una vez que tenemos nuestra segunda actividad ya creada, para cambiar entre actividades vamos a crear un botón en la Activity 1. Para ello arrastramos dicho View a la pantalla del dispositivo y le cambiamos sus propiedades para que tenga un ID sencillo de recordar (para hacer referencia a él) y el texto, por ejemplo, «Crono.»

A continuación, lo único que nos queda por hacer es añadir a ActivityMain.java el siguiente código, que se encarga de indicar al programa que al pulsar el botón nos cargue la segunda actividad.

package es.movilzona.relojycalendario;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Al pulsar el botón Crono nos lleva a la Activity 2
        Button btn = (Button) findViewById(R.id.cronometro);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(v.getContext(), Crono.class);
                startActivityForResult(intent, 0);
            }
        });

    }
}

Todo listo. Ya podemos probar nuestra aplicación, que será una de las más completas que hemos hecho ya en este curso de desarrollo Android.

Si tienes alguna duda, pásate por el Foro de MovilZona donde hemos creado un post para las consultas al respecto de este tema para el curso de desarrollo Android, como venimos haciendo para cada uno.