Cronometros y relojes en Aplicaciones Android

Cuando usamos Eclipse para hacer nuestras aplicaciones para Android, contamos con diferentes herramientas que nos pueden ser de bastante ayuda para ahorrar código y recursos del sistema. Por eso hoy te traemos 3 Views sencillos que pueden serte de ayuda para tus desarrollos sin mucha complicación; estos son, DigitalClock, AnalogClock y Chronometer.

AnalogClock
Empecemos con el recurso que más me gusta de los 3 que hoy te presentamos, elAnalogClock, cuyo recurso es sencillo, práctico y muy personalizable, solo depende de tu imaginación para crear un reloj análogo sin igual.
¿Qué necesitamos para hacer utilizar este recurso? Primero y como en la mayoría de las aplicaciones en Android, escribes dentro de un archivo XML el Layout que le de forma y orden a los componentes de tu desarrollo, asignando el ancho y alto del mismo y codificando las diferentes características que requieras; después creas en el mismo archivo XML el recurso AnalogClock más o menos similar a esto:
Si corres tu programa con estas pocas líneas tendrás listo un reloj análogo funcionando y perfectamente sincronizado con la hora del dispositivo en donde tengas corriendo tu aplicación, mostrándose de la siguiente manera:Este reloj es muy simple, no tiene números y el color es algo que no tiene en absoluto, esto se debe a que tenemos en “obra gris” a nuestro reloj. Para poder personalizarlo y darle la forma que deseamos, en Android contamos con 4 parámetros que podemos parametrizar y le darán a nuestro reloj el aspecto que queremos: hand_minute, hand_hour, dial y backgroud.
Estos parámetros deben tener una imagen que representen la función que desempeñan en nuestro reloj análogo. La imagen que representa la propiedad hand_minute debe ser el de una manecilla de los minutos. La imagen de hand_hour debe representar la manecilla de las horas. La imagen de dial debe representar los números del reloj, ya sea tan solo de la hora o de los minutos, eso lo decide tu imaginación y tus necesidades. Y elbackground te ayudará a complementar la imagen de fondo de tu reloj, en mi caso probé colocarle una especie de carcasa del reloj.

Como haces para vincular las imágenes pertenecientes a cada propiedad del reloj análogo? En tu proyecto dentro de la carpeta res creas una carpeta nueva llamadadrawable y copias en esta las 4 imágenes correspondientes a cada propiedad del reloj análogo, con nombres diferenciados para que puedas después vincularlos en tu proyecto, similar a la siguiente forma:
 Las imágenes que asigné a mi proyecto son las siguientes:

Puedes darte cuenta que cada una representa una parte del reloj, las cuales deben tener un tamaño proporcional entre si para que la hora sea la correcta y no te marquen cosas raras ni pierda precisión tu reloj.
La manera de vincular estas imágenes a tu proyecto se realiza en el archivo XML que tengas asignado para mostrar tu reloj; puedes llamar a tus imágenes como desees, en mi caso las nombre de una manera que fuera de fácil recordación y  la vinculación queda de la siguiente manera:
Esta sencilla aplicación en mi Android muestra un lindo reloj con un aire de antigüedad y elegancia que me gusta mucho, en la siguiente imagen puedes ver el resultado y si te fijas en la parte superior derecha he subrayado en rojo la hora del dispositivo, la cual concuerda con la que asigna el reloj que acabamos de diseñar:Así de fácil es hacer un reloj análogo en Android, pero debes tener presente 2 cosas muy importantes, la primera es que tus imágenes deben ser de un formato PNG o uno similar que no llegue a tapar la imagen que se encuentra detrás; por ejemplo la imagen de las manecillas debe solo contener (para este caso) el recorte de la manecilla, no debe tener un fondo adicional porque taparía a la otra manecilla y se perdería el sentido de las imágenes y del reloj.
Lo segundo y muy importante es que las imágenes de las manecillas deben estar verticalmente y apuntando siempre apuntando hacia arriba, hacia las 12 en punto, debido a que Android toma como referencia inicial la posición que tiene tu imagen al guardarla en el proyecto y desde este punto calcula en donde debe posicionarla con respecto a la hora que debe representar. Si no haces esto la hora que muestre en tu reloj estará desfasada y corrida.
Como te habrás dado cuenta este View no tiene la propiedad de los segundos, creo que los desarrolladores en Google no vieron necesario colocarlo, porque ¿quién mira los segundos en un reloj de manecillas? Lo que no significa que no puedas hacerlo, tendrías que hacer una programación diferente, pero esto lo trataremos más adelante si así lo crees necesario. Ahora que ya sabes crear un reloj análogo, crees que puedes hacer uno parecido a estos 2:
DigitalClock
Pero si quieres ver los segundos en tu reloj propio, lo podrás hacer fácilmente en el segundo View que hoy te traemos, el cual se llama DigitalClock. Este es más sencillo que el anterior, ya que tan solo con escribir unas pocas líneas tienes un digno reloj funcionando a las mil maravillas. Para crear tu reloj digital lo único que debes hacer es escribir en tu archivo XML y ordenado en tu Layout el siguiente código:
Así no mas te aparece un reloj en tu aplicación, la cual va a tomar obviamente el tiempo del sistema, ósea la misma hora del dispositivo en el cual este corriendo la aplicación y se vera de la siguiente manera si corres estas pocas líneas de código:

Puedes ver que tiene la misma hora del sistema adicionando los segundos que no nos permitía ver tan fácilmente en el AnalogClock. Así de fácil es crear un reloj digital, pero esto no se queda aquí, este reloj también lo puedes personalizar a tu antojo, le puedes cambiar al tamaño a los números, el color de la letra, le puedes aplicar sombreado, y por su puesto le puedes cambiar el tipo de fuente para que se vea súper tu reloj. Que como se hace todo esto de cambiarle el estilo a mi reloj? Corre sin perder tiempo a leerte los fabulosos artículos publicados por @consesa_sama Personalizar los tipos de letra en Android y Aplicar estilos y temas en Android. Aparte de poder personalizar los números mostrados en nuestro reloj digital, le podemos también agregar una imagen de fondo que le de un mejor toque y forma a nuestra inspiración.

Nosotros quisimos darle un toque de nuestra querida página Androideity con unas letras orientales estilo samurái, así que para lograrlo asignamos las siguientes características a nuestro archivo XML:En donde fondo_digital es una imagen PNG que previamente cargamos la carpetadrawable contenida en la carpeta res, las demás características ya se han visto en artículos previos aquí en la página, y si no los has visto, no puedes dejarlos pasar. Y el resultado corriendo en nuestro dispositivo Android es el siguiente:

Que bonito que nos quedo nuestro reloj digital; pero esta es solo una muestra de lo que se puede hacer con este valioso recurso que nos ofrecer Android. Es tu imaginación la que te dará un toque de distinción en tu aplicación; ahora ya mas o menos sabes como se puede hacer un reloj como estos?:

Cronometro
Para terminar con nuestro post y que no se haga tan largo vamos a mostrarte cómo funciona el View que nos ofrece Android llamado Chronometer. Este recurso te puede llegar a ser muy útil en aplicaciones en las que debas medir intervalos de tiempo, por ejemplo cuando sales a hacer ejercicio y debes cronometrar un tiempo exacto para trotar, o quieres saber el tiempo que pasó un semáforo para informarle a la empresa de los movimientos en la vía; en fin, el uso del recurso lo da tus necesidades, aquí te ofrecemos las herramientas para que trabajes, tú decides como usarlas.
La herramienta de cronómetro varía un poco frente a las 2 que te acabamos de mostrar ya que debemos incluirle herramientas de activación y detención del conteo cuando lo queramos; pero lo que si tiene en común es la personalización de la misma. Puedes usar las mismas propiedades de tipo de fuente, color del texto, tamaño del texto y todas las demás que usamos en el reloj digital.

Vamos a crear un cronómetro básico y común. En nuestro archivo XML  asignamos unLinearLayout principal con sus respectivas propiedades, así como el View Chronometer. Seguido creamos otro LinearLayout que contendrá los botones que comandaran las acciones del cronómetro, la propiedad orientation la dejamos en “horizontal” para que los botones proyecten la imagen de tener una relación en común; el archivo XML va quedando de la siguiente manera:
Para terminar con el archivo XML creamos 2 botones que manejan el estado del cronómetro; no significa que los botones sean los únicos elementos que puedan controlar el conteo del cronómetro, solo que es más fácil explicar la manera en que funciona este View. Los dejamos centrados y ordenados para que se vean de una forma estética, así que el resto de nuestro archivo XML incluyendo los botones quedaría de la siguiente manera:

Con nuestros elementos listos y dispuestos, escribimos el código para que funcione nuestro cronómetro. El botón llamado btn_enter tiene 2 tareas importantes, la primera es que inicie el cronometro desde ceros, pero cuando este conteo empiece, el mismo botón cambie a tener la posibilidad de pausar el conteo y adicionalmente tenga la posibilidad de restaurar el conteo desde donde previamente fue pausado.
Para que btn_enter realice los descrito, debemos entender la instrucción “setBase”, la cual configura al cronómetro para que tenga una referencia y sepa cuando empezar su conteo; si no referenciamos al cronómetro, este iniciará el conteo tan pronto iniciemos nuestra aplicación; esto es útil cuando quieras llevar el tiempo que dedicas a tu aplicación, por ejemplo cuando estás utilizando el servicio de llamadas en tu teléfono y quieres saber cuanto tiempo gastaste hablando. Pero lo que nosotros queremos es comandar nuestro cronómetro, así que lo configuramos de la siguiente manera:

“cronometro.setBase(SystemClock.elapsedRealtime());” con esto se puede iniciar el cronometro cuando lo deseemos.

Con el botón btn_stop haremos que el cronometro se detenga en un punto y quede listo para volver a ser utilizado desde cero.
Empezamos nuestro código en la respectiva clase con el importe de librerías, creación de variables, asignación del tipo de letra que este caso utilizamos la old_stamper  y seguido la recuperación de Views:
En la siguiente parte de código creamos el evento en el cual será escuchado el botón llamado botonEnter con el cual se evalúa el String llamado “estado” que toma 3 opciones, inactivo, pausado e inactivo. Cuando es pulsado botonEnter y el cronómetro está en el estado “inactivo” arranca el cronometro desde cero (0) y pasa a estar a estado “activo”. Si el botón botonEnter de nuevo es pulsado y el cronómetro está en modo “activo” el cronómetro es detenido pero se guarda el valor que ha transcurrido y el cronómetro pasa a estado “pausado”. Si es de nuevo pulsado y se encuentra en estado “pausado”, el cronometro de nuevo empieza a funcionar desde el punto desde donde fue pausado y queda en estado “activo”. Veamos como es el código de lo explicado:Por último asignamos al botón llamado botonStop, el código necesario para que detenga el conteo del cronómetro y quede en estado “inactivo”. Con lo que el final del código sería este:

Con este código nuestro cronómetro funciona como lo deseamos, claro que esta es solo una muestra de lo que puedes hacer, ya depende solo de la creatividad y necesidades que requieras. Puedes registrar tiempos y guardarlos en una base de datos, o puedes generar alarmas cada tanto tiempo; solo debes ajustar a tu aplicación estas herramientas que te mostramos el día de hoy. En nuestro dispositivo el cronómetro queda de la siguiente manera: