lunes, 9 de junio de 2014

Android: Notificaciones



¡Hola a todos! En este este tutorial os mostraré cómo utilizar los diferentes tipos de notificaciones que ofrece Android.

He clasificado las diferentes notificaciones en 4 tipos diferentes:

1 - Notificación Simple.
2 - Notificación Expansible (big view).
3 - Notificación con Barra de Progreso (progress bar).
4 - Notificación Personalizada (custom).



Iré mostrando las diferentes notificaciones paso a paso.

1) Notificación Simple

String titulo = "el titulo";
String texto = "la descripcion";
Class laClase = AnotherActivity.class ;
int numVeces = 3; // por ejemplo
int id = 0;

NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this)
   .setSmallIcon(android.R.drawable.ic_menu_view)   // escogemos un icono
   .setContentTitle( titulo )   // escogemos un título para la notificación
   .setContentText( texto )  // escribimos un texto más concreto de la notificación
   .setNumber( numVeces )  // indica el nº de notificaciones recibidas del mismo tipo
   .setAutoCancel(true);  // establece que desaparezca cuando se pulse

// mBuilder.addAction(android.R.drawable.ic_delete, "DEL", pending); // 4.1 +

Intent intent = new Intent(this, laClase);
PendingIntent pending = PendingIntent.getActivity(this, 0, intent, 0);
mBuilder.setContentIntent(pending);

NotificationManager mNotifManager = (NotificationManager) this.getSystemService(Context.NOTIFICATION_SERVICE);


mNotifManager.notify(id, mBuilder.build() );

Con el método "addAction" que vemos arriba comentado (ya que solo funciona en versiones de Android superiores o iguales a la versión 4.1.x) conseguimos añadir botones ("acciones") a nuestra notificación.


Las líneas que hay justo debajo del comentario del "addAction", nos van a permitir lanzar una activity mediante un intent y usando un "Pending" cuando pulsemos sobre la notificación.

Y con las 2 últimas líneas lo que hacemos es crear un manager que será el encargado de lanzar la notificación.

Este es el proceso básico a la hora de lanzar una notificación. El resto de formas se hace de manera similar.

2) Notificación Expansible (big view)

Lo único diferente que tenemos que añadir al código anterior es este trozo:

NotificationCompat.InboxStyle inboxStyle = new NotificationCompat.InboxStyle();
// aparecerán como una lista en la notificación cuando la expandamos
String[] events = new String[]{"Pedro","Juan","Alfonso","Manolo"};

inboxStyle.setBigContentTitle("Big Notifications details:");

for (int i=0; i < events.length; i++) {
        inboxStyle.addLine(events[i]);
}


mBuilder.setStyle(inboxStyle);

Dicho trozo de código debe ir antes de ejecutar la notificación.

3) Notificación con Barra de Progreso (progress bar)

Para utilizar una notificación con una barra progresiva como la que solemos ver cuando nos descargamos una app o algún otro archivo desde nuestro smartphone debemos partir de la notificación simple que vimos en el apartado 1.

Antes de nada hay que destacar que para poder realizar la acción del "progress bar" es necesario que se ejecute en una hebra a parte.

Para ello al código debemos añadir lo siguiente justo después de crear el manager:

new Thread(
new Runnable() {
@Override
public void run() {
      int incr;
            
      for (incr = 0; incr <= 100; incr+=5) 
      {             
                    // Sets the progress indicator to a max value, the
                    // current completion percentage, and "determinate"
                    // state
                    mBuilder.setProgress(100, incr, false);
                    
                    // Displays the progress bar for the first time.
                    mNotifManager.notify(ID, mBuilder.build());
                        
                   // Sleeps the thread, simulating an operation
                           // that takes time
                           try {
                               // Sleep for 1 second
                               Thread.sleep(1000);
                           } 
                                   catch (InterruptedException e) 
                           {
                                Log.d("HEBRA", "sleep failure");
                           }
      } // end's for
            
      // cambiamos la "progress bar" a modo infinito
      mBuilder.setProgress(0, 0, true);
      mNotifManager.notify(ID, mBuilder.build());
            
      try {
                                   // Sleep for 3 seconds to see the bar
                                   Thread.sleep(3000);
                              } catch (InterruptedException e) 
                              {
                                   Log.d("HEBRA_2", "sleep failure");
                              }
            
      // When the loop is finished, updates the notification ...
      mBuilder.setContentText("Download complete")
      // ... and removes the progress bar
      .setProgress(0,0,false);
            
      mNotifManager.notify(ID, mBuilder.build());
}
}

// Starts the thread by calling the run() method in its Runnable

).start();

Se lanza una hebra que ejecuta previamente un bucle for. Dicho bucle va desde 0 hasta 100 con un incremento de 5 en 5. Si traducimos esto a la "progress bar" tenemos que la longitud de la barra será de 100 (100 - 0), y cuando se vaya "cargando" veremos cómo va creciendo gracias al incremento de 5 en 5.

4) Notificación Personalizada. XML (custom)

Esta notificación es una de las más interesantes para mí, ya que podemos crear desde cero el aspecto de nuestras propias notificaciones.

Como usamos XML tenemos que definir primero el aspecto de nuestra notificación. Así que el primer paso sería crearnos un layout con lo que queramos que aparezca.

Este es el XML que he definido yo mismo: notification_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="64dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="18dp"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView_descrip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignLeft="@+id/textView_title"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />


</RelativeLayout>

Tenemos que tener en cuenta 2 tipos de medidas cuando trabajemos con este tipo de notificaciones.

Por lo general, las notificaciones tienen una altura de 64 dp, y de hasta 256 dp cuando están expandidas (en el caso de notificaciones expansibles). Debemos tener esto muy en cuenta pues si no, no veríamos correctamente la notificación.

Una vez que tengamos definido la vista en XML, tenemos que inflar dicho XML y asignarlo a nuestro "Builder" y lanzarlo con el "NotificationManager" (lo que hemos venido haciendo):

// inflamos el XML
RemoteViews remView = new RemoteViews (this.getPackageName(), R.layout.notification_layout);

// con estas 3 líneas modificamos el contenido del XML que hemos inflado
remView.setTextViewText(R.id.textView_title, "el texto"); // cambiamos el texto
remView.setTextViewText(R.id.textView_descrip, "descrip"); // cambiamos el texto

remView.setTextColor(R.id.textView_descrip, Color.RED); // cambiamos el color

NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this)
.setSmallIcon(R.drawable.ic_launcher)
.setContent(remView)  // añadimos la vista al builder

.setAutoCancel(true);

Y posteriormente se lanzaría con el "NotificationManager" como ya hemos visto anteriormente.

Para que veáis los resultados os muestro a continuación un par de imágenes con las notificaciones que hemos realizo. La ejecución es en un Nexus5 con el Android 4.4.


De arriba a abajo tenemos: 
- Notificación Personalizada con XML (custom)
- Notificación con "Progress Bar"
- Notificación "Big View"
- Notificación Simple


Aquí os dejo de dónde he sacado la información para hacerlo:
Android Developers
Vogella

Nos vemos!!

2 comentarios:

  1. Tengo una duda donde se instancia mBuilder y mNotifyManager?

    ResponderEliminar
    Respuestas
    1. En tu activity, y ya después cuando quieras llamas a "mNotifManager.notify(id, mBuilder.build() );" para que se ejecute.

      Eliminar