Tip Android #24: notificaciones Toast personalizadas

08/06/2013
android tip

Las notificaciones Toast son las más simples de Android y consisten una pequeña ventana emergente que por defecto sólo muestra un texto y que está presente en pantalla durante un periodo predeterminado, desapareciendo sola y sin ninguna interacción por parte del usuario (no hay botón para cerrar o cancelar). De hecho, son tan simples que se pueden mostrar con una sóla línea de código.

En este tip vamos a ver cómo mostrar cualquier layout como Toast, layout del que controlaremos todos sus aspectos como cualquier otro. Téngase en cuenta que lo que caracteriza a un Toast es que, tal y como se ha comentado, éste se muestra siempre en pantalla durante un tiempo determinado y no requiere interacción del usuario, por lo que no deberemos poner botones para cerrarlo ni campos para la entrada de datos por parte del usuario. Para este tipo de ventanas emergentes lo mejor es usar Dialog (hay un tip al respecto 😉 ). Nota: el código de este tip está basado en el código de Muspy for Android

Vamos a usar un proyecto de ejemplo con una simple Activity que mostrará una notificación Toast por defecto y otra personalizada. El layout es el siguiente:

<?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:gravity="center"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="@string/simple" 
        android:onClick="mostrarSimple"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="@string/personalizado" 
        android:onClick="mostrarPersonalizado"/>

</LinearLayout>

Para el toast personalizado, se usará el siguiente layout (custom_toast.xml) al que daremos «forma» con un drawable(toast_drawable.xml).

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lytLayout"
    android:background="@drawable/toast_drawable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dip"  
    android:gravity="center"> 
   
    <TextView
        android:id="@+id/toastMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="15dip"
        android:paddingRight="15dip"
        android:drawableLeft="@drawable/ok"
        android:drawablePadding="5dp"
        android:textSize="17sp"
        android:textColor="@android:color/white"/>

</LinearLayout>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke
        android:width="4dp"
        android:color="@color/toastborder" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="4dp" />

    <solid android:color="@color/toastbackground" />

</shape>

Ahora ya tenemos todo lo que necesitamos, veamos la Activity con las acciones de los botones implementadas. El código es realmente sencillo.

package com.danielme.tipsandroid.customtoast;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.danieme.tipsandroid.customtoast.R;

/**
 * 
 * @author danielme.com
 *
 */
public class MainActivity extends Activity
{

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
	
	public void mostrarSimple(View button)
	{
		Toast.makeText(this, R.string.mensaje, Toast.LENGTH_SHORT).show();
	}
	
	public void mostrarPersonalizado(View button)
	{
		Toast toast = new Toast(this);
		//usamos cualquier layout como Toast
		View toast_layout = getLayoutInflater().inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.lytLayout));
		toast.setView(toast_layout);
		
		//se podría definir el texto en el layout si es invariable pero lo hacemos programáticamente como ejemplo
		//tenemos acceso a cualquier widget del layout del Toast
		TextView textView = (TextView) toast_layout.findViewById(R.id.toastMessage);
                textView.setText(R.string.mensaje);
		toast.setDuration(Toast.LENGTH_SHORT);		
		toast.show();
	}
}

El resultado en Jelly Bean es el siguiente: