BrewClok para Android

Introducción:

En este tutorial vamos a crear una aplicación más compleja, la aplicación va a consistir en crear un contador de cafés,  para ello vamos a necesitar indicarle el tiempo que vamos a tardar en tomarnos el café, tendremos que mostrar los café tomados y un botón iniciar para que empiece el contador a contar marcha atrás.

También me ha parecido interesante añadirle un contador que empiece desde -10 y luego muestre el exceso consumido.

En esta aplicación vas a aprender:

• A manejar un contador de tiempo (CountDownTimer)

Espero que le guste, para cualquier error o cualquier duda que usted tenga no dude en comentar.

¡ Saludos !

Enlaces de interés:

Código Fuente

Puede descargar si lo desea el código fuente de este proyecto.

Ayuda para usar CountDownTimer

Aquí podrás obtener ayuda de como usar la clase CountDownTimer en la guía para usuarios oficial de Android.

Pasos a seguir:

1. Crea la interfaz gráfica como mejor te parezca, más adelante te dejo un ejemplo de interfaz para que te puedas guiar. Recuerda que esta interfaz será una actividad puesto que dentro de la actividad tendremos que programar todas las funciones

Elementos más importantes de la interfaz:

• TextView
• LinearLayout
• Button

El código de esta interfaz se muestra a continuación:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dip">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="20dip"
      android:text="Brews: " />
    <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="None"
      android:gravity="right"
      android:textSize="20dip"
      android:id="@+id/brew_count_label" />
  </LinearLayout>

  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal" >

      <TextView
          android:id="@+id/textView1"
          android:layout_width="144dp"
          android:layout_height="wrap_content"
          android:text="Brews que faltan:"
          android:textSize="20dip" />

      <TextView
          android:id="@+id/TxtVRestante"
          android:layout_width="fill_parent"
          android:layout_height="42dp"
          android:gravity="right"
          android:text="None"
          android:textSize="20dip" />
  </LinearLayout>

  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="0.91"
      android:gravity="center"
      android:orientation="horizontal"
      android:padding="10dip" >

    <Button
      android:id="@+id/brew_time_down"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="-"
      android:textSize="40dip" />
    <TextView
      android:id="@+id/brew_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="0:00"
      android:textSize="40dip"
      android:padding="10dip" />
    <Button
      android:id="@+id/brew_time_up"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="+"
      android:textSize="40dip" />
  </LinearLayout>
  <Button
    android:id="@+id/brew_start"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:text="Start" />
</LinearLayout>

3. Ahora vamos a programar, la parte más importante de esta aplicación, para ello declare todos los campos más importante en la parte superior de la clase, para tener una mayor comodidad, puesto que en  los próximos proyecto que hagamos serán más complejos es necesario ir adquiriendo una forma de programar que nos facilite el entendimiento del código cuando este sea muy extenso.

public class BrewClockActivity extends Activity implements OnClickListener {
  // CAMPOS /////////////////////////////////////////////////////////////////
    
  protected Button brewAddTime;
  protected Button brewDecreaseTime;
  protected Button startBrew;
  protected TextView brewCountLabel;
  protected TextView brewTimeLabel;
  protected TextView txtCuentAtras;

  protected int brewTime = 3;
  protected CountDownTimer brewCountDownTimer;
  protected int brewCount = 0;
  protected int cuentaAtras = -10;
  protected boolean isBrewing = false;
  
  // FIN CAMPOS ///////////////////////////////////////////////////////////////////

4. Establecemos las propiedades para acceder a los campos.

public TextView getTxtCuentAtras() {
    return txtCuentAtras;
}

public int getCuentaAtras() {
    return cuentaAtras;
}

public void setCuentaAtras(int cuentaAtras) {
    this.cuentaAtras = cuentaAtras;
    txtCuentAtras.setText(String.valueOf(cuentaAtras));
}

5. En el método onCreate damos memoria a los campos creados en la clase.

/**
 * Se crea cuando se inicia la actividad
 */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // INICIALIZACIÓN DE CAMPOS ////////////////////////////////////////////////
    
    brewAddTime = (Button) findViewById(R.id.brew_time_up);
    brewDecreaseTime = (Button) findViewById(R.id.brew_time_down);
    startBrew = (Button) findViewById(R.id.brew_start);
    brewCountLabel = (TextView) findViewById(R.id.brew_count_label);
    brewTimeLabel = (TextView) findViewById(R.id.brew_time);
    txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante);
    
    // FIN INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////

6. Creamos un método con el que podamos mostrar al usuario los minutos que nos pasa el contador en forma de entero.

  /**
   * Muestra los minutos
   * 
   * @param minutes Los minutos.
   */
  public void setBrewTime(int minutes) {
    if(isBrewing)
      return;
    
    brewTime = minutes;
    
    if(brewTime < 1)
      brewTime = 1;

    brewTimeLabel.setText(String.valueOf(brewTime) + "m");
  }

7. Creamos un método que muestre al usuario el número de cafés que se ha tomado.

  /**
   * Establece el número de brews que se ha tomado e informa al usuario. 
   * @param count El número de cafés
   */
  public void setBrewCount(int count) {
    brewCount = count;
    brewCountLabel.setText(String.valueOf(brewCount));
  }

8. Creamos un método para que empiece a contar el contador de tiempo para el café.

/**
   * Empieza el contador
   */
  public void startBrew() {
    // Crea un nuevo contador
    brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) {
      @Override
      public void onTick(long millisUntilFinished) {
        brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s");
      }
      
      @Override
      public void onFinish() {
        isBrewing = false;
        setBrewCount(brewCount + 1);
        setCuentaAtras(cuentaAtras + 1);
        
        brewTimeLabel.setText("Brew Up!");
        startBrew.setText("Start");
      }
    };
    
    brewCountDownTimer.start();
    startBrew.setText("Stop");
    isBrewing = true;
  }

9. También tenemos que crear un método para finalizar el contador.

  /**
   * Para el contador
   */
  public void stopBrew() {
    if(brewCountDownTimer != null)
      brewCountDownTimer.cancel();
    
    isBrewing = false;
    startBrew.setText("Start");
  }

10. Completamos de programar el método onCreate para poder suscribirnos  a lo eventos de los botones además de establecer los valores iniciales.

/**
 * Se crea cuando se inicia la actividad
 */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // INICIALIZACIÓN DE CAMPOS ////////////////////////////////////////////////
    
    brewAddTime = (Button) findViewById(R.id.brew_time_up);
    brewDecreaseTime = (Button) findViewById(R.id.brew_time_down);
    startBrew = (Button) findViewById(R.id.brew_start);
    brewCountLabel = (TextView) findViewById(R.id.brew_count_label);
    brewTimeLabel = (TextView) findViewById(R.id.brew_time);
    txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante);
    
    // FIN INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////
    
    // Subcripción ha eventos
    brewAddTime.setOnClickListener(this);
    brewDecreaseTime.setOnClickListener(this);
    startBrew.setOnClickListener(this);
    
    // Establece los valores iniciales
    setBrewCount(0);
    setBrewTime(3);
    setCuentaAtras(-10);
  }

11. Finalmente terminamos de programar los eventos de los botones.

/** Evento OnClick **/
  /* (non-Javadoc)
   * @see android.view.View.OnClickListener#onClick(android.view.View)
   */
  public void onClick(View v) {
    if(v == brewAddTime)
      setBrewTime(brewTime + 1);
    else if(v == brewDecreaseTime)
      setBrewTime(brewTime -1);
    else if(v == startBrew) {
      if(isBrewing)
        stopBrew();
      else
        startBrew();
    }
  }

12. Al final todo este código unido quedaría así.

package com.example.brewclock;

import android.app.Activity;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class BrewClockActivity extends Activity implements OnClickListener {
  // CAMPOS /////////////////////////////////////////////////////////////////
    
  protected Button brewAddTime;
  protected Button brewDecreaseTime;
  protected Button startBrew;
  protected TextView brewCountLabel;
  protected TextView brewTimeLabel;
  protected TextView txtCuentAtras;

  protected int brewTime = 3;
  protected CountDownTimer brewCountDownTimer;
  protected int brewCount = 0;
  protected int cuentaAtras = -10;
  protected boolean isBrewing = false;
  
  // FIN CAMPOS ///////////////////////////////////////////////////////////////////
  
  public TextView getTxtCuentAtras() {
    return txtCuentAtras;
}

public int getCuentaAtras() {
    return cuentaAtras;
}

public void setCuentaAtras(int cuentaAtras) {
    this.cuentaAtras = cuentaAtras;
    txtCuentAtras.setText(String.valueOf(cuentaAtras));
}


// MÉTODOS /////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Se crea cuando se inicia la actividad
 */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // INICIALIZACIÓN DE CAMPOS ////////////////////////////////////////////////
    
    brewAddTime = (Button) findViewById(R.id.brew_time_up);
    brewDecreaseTime = (Button) findViewById(R.id.brew_time_down);
    startBrew = (Button) findViewById(R.id.brew_start);
    brewCountLabel = (TextView) findViewById(R.id.brew_count_label);
    brewTimeLabel = (TextView) findViewById(R.id.brew_time);
    txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante);
    
    // FIN INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////
    
    // Subcripción ha eventos
    brewAddTime.setOnClickListener(this);
    brewDecreaseTime.setOnClickListener(this);
    startBrew.setOnClickListener(this);
    
    // Establece los valores iniciales
    setBrewCount(0);
    setBrewTime(3);
    setCuentaAtras(-10);
  }
  
  
  /**
   * Muestra los minutos
   * 
   * @param minutes Los minutos.
   */
  public void setBrewTime(int minutes) {
    if(isBrewing)
      return;
    
    brewTime = minutes;
    
    if(brewTime < 1)
      brewTime = 1;

    brewTimeLabel.setText(String.valueOf(brewTime) + "m");
  }
  
  /**
   * Establece el número de brews que se ha tomado e informa al usuario. 
   * @param count El número de cafés
   */
  public void setBrewCount(int count) {
    brewCount = count;
    brewCountLabel.setText(String.valueOf(brewCount));
  }
  
  /**
   * Empieza el contador
   */
  public void startBrew() {
    // Crea un nuevo contador
    brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) {
      @Override
      public void onTick(long millisUntilFinished) {
        brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s");
      }
      
      @Override
      public void onFinish() {
        isBrewing = false;
        setBrewCount(brewCount + 1);
        setCuentaAtras(cuentaAtras + 1);
        
        brewTimeLabel.setText("Brew Up!");
        startBrew.setText("Start");
      }
    };
    
    brewCountDownTimer.start();
    startBrew.setText("Stop");
    isBrewing = true;
  }
  
  /**
   * Para el contador
   */
  public void stopBrew() {
    if(brewCountDownTimer != null)
      brewCountDownTimer.cancel();
    
    isBrewing = false;
    startBrew.setText("Start");
  }
  
  /** Evento OnClick **/
  /* (non-Javadoc)
   * @see android.view.View.OnClickListener#onClick(android.view.View)
   */
  public void onClick(View v) {
    if(v == brewAddTime)
      setBrewTime(brewTime + 1);
    else if(v == brewDecreaseTime)
      setBrewTime(brewTime -1);
    else if(v == startBrew) {
      if(isBrewing)
        stopBrew();
      else
        startBrew();
    }
  }
}

Para aprender más:

CountDownTimer

Planificar una cuenta atrás hasta un momento en el futuro, con las notificaciones regulares en intervalos a lo largo del tiempo.

Un ejemplo sencillo para que puedas entender mejor su uso:

 new CountDownTimer(30000, 1000) {

     public void onTick(long millisUntilFinished) {
         mTextField.setText("seconds remaining: " + millisUntilFinished / 1000);
     }

     public void onFinish() {
         mTextField.setText("done!");
     }
  }.start();

FIN

Hola Usuario para Android

Introducción:

En este tutorial vamos crear una aplicación que en donde podamos  introducir un nombre y a través de un botón se abra una nueva actividad y se muestre un saludo con el nombre y con otro botón se muestre en otra actividad una despedida con el nombre introducido.

En este tutorial aprenderás ha:

• Introducir diferentes controles en un layout
• Pasar información entre los distintos layout
• Lanzar una nueva actividad

En este tutorial se va a explicar los pasos para crear la aplicación si profundizar en el uso de del entorno de desarrollo Eclipse.

Espero que le resulte le sirva, para cualquier cosa no dude en comentar.

¡ Saludos !


Enlaces de interés:

Código Fuente
Puede descargar si lo desea el código fuente de este proyecto.

Pasos a seguir:

1. Comenzar un nuevo proyecto y añadir los siguientes elementos de una forma similar como se muestra en la siguiente imagen.

• TextView
• EditText
• Button

Para ello puede introducir este código en el editor de texto del layout. Recuerde modificar los identificadores como se enseñó en el anterior tutorial.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <TextView android:id="@+id/LblNombre"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:text="@string/nombre" />
        
    <EditText android:id="@+id/TxtNombre"
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent" />
    
    <Button android:id="@+id/BtnHola"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"   
        android:text="@string/hola" />

    <Button
        android:id="@+id/BtnAdios"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/adios" />

</LinearLayout>

2. Cree el segunda actividad, para ello pulse sobre New/Other, pulse sobre Android Activity y luego sobre Next, seguidamente rellene los datos.

3. Y ahora añada los siguientes elementos de una forma aparecida a como se muestra en la imagen.

• TextView
• Button

Aquí le dejo el código de este layout por si tiene dudas.

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

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

<TextView
    android:id="@+id/TxtSaludo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Respuesta" />

<Button
    android:id="@+id/btnAtras"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Atrás" />
    
</LinearLayout>

4. Ahora programamos las clases de cada layout, aquí le muestro el código que programa los componentes de la primera actividad, intente comprender que se hace leyendo los comentarios.

package net.sgoliver;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class HolaUsuario extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        //Localizar los controles
        final EditText txtNombre = (EditText)findViewById(R.id.TxtNombre);
        
        final Button btnHola = (Button)findViewById(R.id.BtnHola);
      
        btnHola.setOnClickListener(new OnClickListener() {
                public void onClick(View v) {
                    //Creamos el Intent
                    Intent intent = new Intent(HolaUsuario.this, FrmSaludo.class);
                    
                    //Creamos la información a pasar entre actividades
                    Bundle b = new Bundle(); 
                    b.putString("NOMBRE", "Hola " +txtNombre.getText().toString());
                    
                    //Añadimos la información al intent
                    intent.putExtras(b);
                    
                    //Iniciamos la nueva actividad
                    startActivity(intent);
                }
            });
        
        final Button btnAdios = (Button)findViewById(R.id.BtnAdios);
        
        btnAdios.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                //Creamos el Intent
                Intent intent = new Intent(HolaUsuario.this, FrmSaludo.class);
                
                //Creamos la información a pasar entre actividades
                Bundle b = new Bundle(); 
                b.putString("NOMBRE", "Adios " +txtNombre.getText().toString());
                
                //Añadimos la información al intent
                intent.putExtras(b);
                
                //Iniciamos la nueva actividad
                startActivity(intent);
            }
        });
        
    }
}

5. Y este código es el necesario para que funcione la segunda actividad, esta totalmente comentado por lo que tiene que intentar comprender que se hace y cómo, en los próximo tutoriales iré explicando las cosas más importantes para programas en Java.

package net.sgoliver;

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

public class FrmSaludo extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frmsaludo);
        
        //Localizar los controles
        TextView txtSaludo = (TextView)findViewById(R.id.TxtSaludo);
        
        //Recuperamos la información pasada en el intent
        Bundle bundle = this.getIntent().getExtras();
        
        //Construimos el mensaje a mostrar
        txtSaludo.setText(bundle.getString("NOMBRE"));
        
        Button btnAtras = (Button)findViewById(R.id.btnAtras);
        
        btnAtras.setOnClickListener(new OnClickListener() {
            
            public void onClick(View v) {
                // TODO Auto-generated method stub
                finish();
                
            }
        });
    }
    
    
    
}

6. Para comprar que todo está bien realizado pulse sobre el Play para inicializar la compilación en el emulador.

Para aprender más:

Intent

Un intent es el elemento básico de comunicación entre los distintos componentes Android que hemos descrito anteriormente. Se pueden entender como los mensajes o peticiones que son enviados entre los distintos componentes de una aplicación o entre distintas aplicaciones. Mediante un intent se puede mostrar una actividad desde cualquier otra, iniciar un servicio, enviar un mensaje broadcast, iniciar otra aplicación, etc.

FIN

Hola Mundo en Android

Introducción:

Ya con todo lo que sabemos podemos crear nuestro primer proyecto en Android, en este tutorial vamos a hacer la aplicación más sencilla posible, un hola mundo.

En este tutorial aprenderás a:

• Añadir elementos a un layout
• Mostrar un texto por pantalla

Más adelante en otros tutoriales iremos modificando el proyecto para añadirle nuevas funcionalidades y poder ir avanzando en el aprendizaje de la programación en Android.

Espero que le guste y le sea sencillo de seguir, si detecta un error o para cualquier duda no dude en comentar.

¡ Saludos!

Enlaces de interés:

Código Fuente

Puede descargar si lo desea el código fuente de este proyecto.

Vídeo Hola Mundo
En este vídeo se explica de otra forma la creación de un proyecto además de crear un Hola Mundo de una manera un poco diferente, si desea ampliar conocimientos le recomiendo que lo vea.

Pasos a seguir:

1. Cree un nuevo proyecto y espere a que se cargue el editor gráfico.

Nota: Si tiene problemas a la hora de crear el proyecto diríjase a el siguiente tutorial .

2. Si observa directamente se crea un elemento llamado TextView de forma predeterminada, para aprender de una forma más clara elimine este componente, simplemente pulse sobre él con el  ratón y pulse el botón Supr.

3. En la parte de la izquierda se encuentra una barra con todos los componentes que podemos añadir, arrastre el componente TextView hacia la pantalla de edición y suéltelo, por ejemplo, en la parte central de la pantalla.

4. En la parte derecha se encuentra la barra de propiedades, con el TextView seleccionado cambie el id que se encuentra en la barra de propiedades, por ejemplo, cámbielo a @+id/txtHolaMundo.

5. Una vez echo todos los pasos anteriores, vaya al explorador de archivo que se encuentra en la parte izquierda y navegue hasta la clase de la actividad, en mi caso se llama HolaMundoActivity.

6. Una vez dentro de la clase, creamos el campo que va a guardar el identificado del componente que ha añadido, para ello dentro de la clase escriba:

private TextView txtHolaMundo;

7. Ahora dentro del método onCreate le establecemos al campo creado el identificador escribiendo la siguiente línea:

txtHolaMundo = (TextView) findViewById(R.id.txtHolaMundo);

8. Y establecemos el texto que se va a mostrar en el TextView una vez que iniciemos la aplicación.

txtHolaMundo.setText("Hola Mundo");

9. Emule la aplicación y compruebe como se muestra el texto, para emular la aplicación pulse sobre el botón play que se encuentra en la parte superior, una vez pulsado se empezará a cargar la máquina virtual de Android.

10. Una vez lanzada la aplicación puede ver como se muestra el texto, le recomiendo que pruebe a cambiar el texto que se muestra y observe cómo cambia cada vez que lanza la aplicación en el emulador.

FIN