Mensajes emergentes en Android - Parte 1

En este post veremos el primero y más simple de los mensajes emergentes en Android. La plataforma Android nos proporciona mecanismos para crear de forma simple efectos muy integrados con la apariencia general del sistema.

Los mensajes que vamos a crear se denominan Toast y vamos a ver mensajes Toast de cuatro tipos:

Mensaje de sólo texto	Mensaje con icono
Mensaje con icono y texto	Mensaje con icono y texto con XML

Veamos cómo se crearía cada uno de ellos. Cabe destacar que este código debe ejecutarse dentro del código de una clase Activity.

Mensaje de sólo texto

Toast toast = Toast.makeText(getApplicationContext(), "Mensaje Toast con sólo texto", Toast.LENGTH_SHORT);
toast.show();

Mensaje con icono

Toast toast = new Toast(getApplicationContext());
ImageView view = new ImageView(getApplicationContext());
view.setImageResource(android.R.drawable.ic_menu_info_details);
toast.setView(view);
toast.setDuration(Toast.LENGTH_SHORT);
toast.show();

Mensaje con icono y texto

Toast toast = Toast.makeText(getApplicationContext(), "Mensaje Toast con texto e icono", Toast.LENGTH_SHORT);
View textView = toast.getView();
LinearLayout lay = new LinearLayout(getApplicationContext());
lay.setOrientation(LinearLayout.HORIZONTAL);
ImageView view = new ImageView(getApplicationContext());
view.setImageResource(android.R.drawable.ic_menu_info_details);
lay.addView(view);
lay.addView(textView);
toast.setView(lay);
toast.show();

Mensaje con icono y texto con XML

LayoutInflater inflater = getLayoutInflater();
View layoutView = inflater.inflate(layout, null);        
Toast toast = new Toast(getApplicationContext());
toast.setDuration(Toast.LENGTH_SHORT);
toast.setView(layoutView);
toast.show();

El código XML del Toast sería:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@layout/border"
    android:gravity="center">
        <ImageView 
              android:src="@android:drawable/ic_menu_info_details"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:layout_marginRight="10dp"/>
 <TextView 
             android:text="@string/text_icon_msg"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:textColor="#FFFFFF"
             android:gravity="center_vertical"/>
</LinearLayout>

Como puede verse, la propiedad android:background del elemento LinearLayout apunta a un layout llamado border. Este es una forma de hacer que la ventana tenga los bordes redondeados. Debemos crear un fichero XML llamado border.xml dentro de la carpeta res/layout con el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#444444"/>    
    <stroke 
        android:width="4dp" 
        android:color="#999999" />
    <padding 
        android:left="7dp" 
        android:top="7dp"
        android:right="7dp" 
        android:bottom="7dp" />
    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp" 
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/> 
</shape> 

Ahora veamos el código de la clase activity al completo:

package org.ffbeltran;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class EjemploToast extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Button button;
        button = (Button) findViewById(R.id.text_only_button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                textOnlyToast(getString(R.string.text_only_msg), Toast.LENGTH_SHORT);
            }
        });
        
        button = (Button) findViewById(R.id.icon_only_button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                iconOnlyToast(android.R.drawable.ic_menu_info_details, Toast.LENGTH_SHORT);
            }
        });
        
        button = (Button) findViewById(R.id.text_icon_button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                textIconToast(R.layout.text_icon_toast, Toast.LENGTH_LONG);
//                textIconToast(getString(R.string.text_icon_msg), 
//                        android.R.drawable.ic_menu_info_details, Toast.LENGTH_SHORT);
            }
        });
    }
    
    private void textOnlyToast(String message, int duration) {
        Toast toast = Toast.makeText(getApplicationContext(), message, duration);
        toast.show();
    }
    
    private void iconOnlyToast(int icon, int duration) {
        Toast toast = new Toast(getApplicationContext());
        ImageView view = new ImageView(getApplicationContext());
        view.setImageResource(icon);
        toast.setView(view);
        toast.setDuration(duration);
        toast.show();
    }
    
    private void textIconToast(String message, int icon, int duration) {
        Toast toast = Toast.makeText(getApplicationContext(), message, duration);
        View textView = toast.getView();
        LinearLayout lay = new LinearLayout(getApplicationContext());
        lay.setOrientation(LinearLayout.HORIZONTAL);
        ImageView view = new ImageView(getApplicationContext());
        view.setImageResource(icon);
        lay.addView(view);
        lay.addView(textView);
        toast.setView(lay);
        toast.show();
    }
    
    private void textIconToast(int layout, int duration) {
        LayoutInflater inflater = getLayoutInflater();
        View layoutView = inflater.inflate(layout, null);        
        Toast toast = new Toast(getApplicationContext());
        toast.setDuration(duration);
        toast.setView(layoutView);
        toast.show();
    }
}

Éste es el código del layout principal:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal">
 <TextView  
     android:gravity="center"
  android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:text="@string/app_name"
     android:textSize="25sp"
     android:textStyle="bold"
        android:layout_marginTop="25dip"
     android:layout_marginBottom="25dip"/>
 <Button
     android:id="@id/text_only_button"
     android:layout_gravity="center"
     android:layout_width="200dip"
     android:layout_height="wrap_content"
     android:text="@string/text_only_button"/>
   <Button
     android:id="@id/icon_only_button"
     android:layout_gravity="center"
     android:layout_width="200dip"
     android:layout_height="wrap_content"
     android:text="@string/icon_only_button"/>
 <Button
     android:id="@id/text_icon_button"
     android:layout_gravity="center"
     android:layout_width="200dip"
     android:layout_height="wrap_content"
     android:text="@string/text_icon_button"/>
</LinearLayout>

Y éste el código de res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">EjemploToast</string>
    
    <string name="text_only_button">Sólo texto</string>
    <string name="icon_only_button">Sólo icono</string>
    <string name="text_icon_button">Texto e icono</string>
    
    <string name="text_only_msg">Mensaje Toast con sólo texto</string>
    <string name="text_icon_msg">Mensaje Toast con texto e icono</string>
</resources>

Por último, puedes cargar el código fuente aquí:

• http://sites.google.com/site/tutorialexception/proyectos/EjemploToast.zip

Presentación de Subversion

A continuación podéis ver la presentación de Subversion + TortoiseSVN que realicé esta semana. espero que os se a de utilidad.

Presentación de Subversion