miércoles, 14 de diciembre de 2011

Android - Crear Dialog Custom

He tenido la necesidad de crearme un dialog con una imagen, y tras consultar la ayuda de android para desarrolladores usando la web de http://developer.android.com, concretamente este articulo, que encontré buscando en google (sin demasiada dificultad), pero os lo pongo por aquí creo que algo mejor explicao.

Lo primero declaramos un entero en la actividad que lanze al dialog:
private static final int DIALOG_MINIJUEGOS_RESULT = 0;

creamos un .xml que será el layout del dialog, puede ser lo que queráis, en este caso es una imagen y un textview, pero podríais usar cualquier tipo de layout.
 <?xml version="1.0" encoding="utf-8"?>

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

    android:id="@+id/llDialog"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/ivDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="5dp" />

    <TextView
        android:id="@+id/tvDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp"
        android:textColor="#FFF" />

    <Button
        android:id="@+id/bDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Cerrar" />
</LinearLayout>

Ahora hay 2 opciones, en la actividad que querais lanzar el dialog, sobreescribir el metodo:
onCreateDialog(int id, Bundle bundle)

o el método:
onCreateDialog(int id)

Al primero le puedes pasar un bundle con información extra para el dialog, en este caso se usa el primero, al que le pasamos la informacion a mostrar en el dialog haciendo uso del mencionado bundle.
@Override
protected Dialog onCreateDialog(int id, Bundle bundle) {
 Dialog dialog = null;
 switch (id) {
  case DIALOG_MINIJUEGOS_RESULT:
   // obtiene datos
   String textoDialog = bundle.getString("textoDialog");
   int idIvDialog = bundle.getInt("idIvDialog");
   // crea dialog
   dialog = new Dialog(this);
   dialog.setContentView(R.layout.dialogimg);
   dialog.setTitle("Resultado Minijuego");
   // pone elementos
   TextView tvDialog = (TextView) dialog.findViewById(R.id.tvDialog);
   tvDialog.setText(textoDialog);
   ImageView ivDialog = (ImageView) dialog.findViewById(R.id.ivDialog);
   ivDialog.setImageResource(idIvDialog);
   // ivDialog.setImageResource(R.drawable.bonoff);
   Button bDialog = (Button) dialog.findViewById(R.id.bDialog);
   bDialog.setOnClickListener(this);
   break;
  }
  return dialog;
 }

Por ultimo lanzais el dialog donde lo necesiteis usando:
//creamos el bundle
Bundle dialogBundle = new Bundle();

//le añadimos la informacion que queramos
dialogBundle.putString("textoDialog", textoDialog);
dialogBundle.putInt("idIvDialog", idIvDialog);

//lanzamos el dialog
showDialog(DIALOG_MINIJUEGOS_RESULT, dialogBundle);

si usarais la opción sin bundle sería igual pero kitando el segundo parámetro, y obviamente no es necesario crear el bundle ni nada de eso.

Por último para cerrar el dialog se usa el botón bDialog que hemos añadido al dialog, y en el onclick() de nuestra actividad metemos un case nuevo con ese botón de la siguiente forma:
case R.id.bDialog:

 dismissDialog(DIALOG_MINIJUEGOS_RESULT);
 break;


Usamos el metodo dismissDialog() pasandole el mismo en entero que le pasamos cuando lanzamos el dialog.
Y esto es todo para crear un dialog custom, se pueden hacer más cosas pero lo básico es esto, si solo necesitáis mostrar texto y algún botón, no teneis que meteros en este jaleo, simplemente consultad este articulo de android.

Un saludo!

2 comentarios:

  1. Hola, gracias por todo, me ha servido de mucha ayuda, pero tengo la siguiente duda, necesito que al pulsar el boton del Dialog guarde la información de un EditText en una variable, pero no lo consigo, lo he hecho asi, pero falla:

    case DIALOG_JPIP_KDU_IMAGE:
    dialog = new Dialog(this);
    dialog.setContentView(R.layout.custom_dialog);
    Button bDialog = (Button)
    dialog.findViewById(R.id.button1);
    bDialog.setOnClickListener(new
    OnClickListener(){
    public void onClick(View v){
    EditText editText = (EditText)
    findViewById(R.id.editText1);
    imageName = editText.getText();
    dismissDialog(DIALOG_JPIP_KDU_IMAGE);
    }
    });

    break;

    El fallo salta al hacer el editText.getText(), si comento esa linea se cierra el Dialog y todo perfecto.

    Saludos

    ResponderEliminar
    Respuestas
    1. Prueba a obtener el EditText fuera del onclickListener, puede que no se obtenga bien y al hacer el getText() no sabe de donde pillarlo.

      Un saludo

      Eliminar

Ponte un nombre aunque sea falso, que Anó-nimo queda mu feo :(