Académique Documents
Professionnel Documents
Culture Documents
Como ya has de
suponer, los dilogos
son elementos en la
interfaz de Android
que se sobreponen a
las actividades para
exigir la
con rmacin de una
accin o el ingreso
de datos.
Obtn
Tambin puedes crear un layout personalizado para el login del
Contenido
usuario al aplicativo. Exclusivo
Aprende a
programar apps
Android con tips y
recursos que solo
comparto con
lossuscriptores de
mi boletn privado
Correo
Qu buscas?
Search
Lo Ms Popular
O incluso si deseas crear formularios para la edicin o insercin Consumir Un
de datos: Servicio Web
REST Desde
Android
Android Push
Noti cations
Con Firebase
Cloud
Messaging
Google Maps
Android Api
v2: Gua De
Mapas
Poblar
RecyclerView
Con Cursor
En Android
Cmo
Obtener La
Ubicacin De
Tus Usuarios
En Android?
Como ves, existen varios tipos de propsito para los dilogos.
Base De
As que el objetivo de este artculo es explicar cmo usar cada
Datos SQLite
uno de las categoras existentes de modo que toda situacin
En Android
quede aclarada.
Con Mltiples Tablas
Comenzaremos con el uso de la clase DialogFragment para
Admob En
instanciar los dilogos. Aunque Dialog es la clase que genera
Android:
la interfaz, DialogFragment es quien permite controlar los
Aadir
eventos de forma uida. Por ello no se recomienda crear objetos
Anuncios A
de clase base.
Una App Mvil
ContentProvider Con
Mltiples Tablas En
Android
/**
* Crea un dilogo de alerta sencillo
* @return Nuevo dilogo
*/
public AlertDialog createSimpleDialog() {
AlertDialog.Builder builder = new AlertDialog
builder.setTitle("Titulo")
.setMessage("El Mensaje para el usuario"
.setPositiveButton("OK",
new DialogInterface.OnClickListener
@Override
public void onClick(DialogInterface
listener.onPossitiveButtonClick
}
})
.setNegativeButton("CANCELAR",
new DialogInterface.OnClickListener
@Override
public void onClick(DialogInterface
listener.onNegativeButtonClick
}
});
return builder.create();
}
/**
* Crea un Dilogo con una lista de seleccin simple
*
* @return La instancia del dilogo
*/
public AlertDialog createSingleListDialog() {
AlertDialog.Builder builder = new AlertDialog
items[0] = "Naranja";
items[1] = "Mango";
items[2] = "Banano";
builder.setTitle("Dilogo De Lista")
.setItems(items, new DialogInterface
@Override
public void onClick(DialogInterface
Toast.makeText(
getActivity(),
"Seleccionaste:"
Toast.LENGTH_SHORT
.show();
}
});
return builder.create();
}
/**
* Crea un dilogo con una lista de radios
*
* @return Dilogo
*/
public AlertDialog createRadioListDialog() {
AlertDialog.Builder builder = new AlertDialog
items[0] = "Soltero/a";
items[1] = "Casado/a";
items[2] = "Divorciado/a";
builder.setTitle("Estado Civil")
.setSingleChoiceItems(items, 0, new
@Override
public void onClick(DialogInterface
Toast.makeText(
getActivity(),
"Seleccionaste: "
Toast.LENGTH_SHORT
.show();
}
});
return builder.create();
}
/**
* Crea un dilogo con una lista de checkboxes
* de seleccin multiple
*
* @return Dilogo
*/
public AlertDialog createMultipleListDialog()
AlertDialog.Builder builder = new AlertDialog
builder.setTitle("Intereses")
.setMultiChoiceItems(items, null,
@Override
public void onClick(DialogInterface
if (isChecked) {
// Guardar indice seleccionado
itemsSeleccionados.add
Toast.makeText(
getActivity(),
"Checks seleccionados:("
Toast.LENGTH_SHORT
.show();
} else if (itemsSeleccionados
// Remover indice sin seleccin
itemsSeleccionados.remove
}
}
});
return builder.create();
}
Por ejemplo
El siguiente layout muestra un formulario comn donde se pide
el inicio de sesin de nuestro usuario o la creacin de una
cuenta. Como ves, el contenido tiene distribucin vertical de los
campos y botones coloridos en distintas posiciones.
dialog_signin.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="match_parent"
android:background="@android:color/white"
android:padding="@dimen/dialog_body">
<TextView
android:id="@+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:paddingBottom="@dimen/padding_between"
android:paddingTop="@dimen/padding_between"
android:text="@string/info_text"
android:textAppearance="?android:attr/textAppearanceSmall"
<Button
android:id="@+id/crear_boton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/info_text"
android:layout_centerHorizontal="true"
android:paddingBottom="@dimen/button_padding"
android:paddingTop="@dimen/button_padding"
android:text="@string/crear_boton"
android:textColor="@android:color/white"
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/crear_boton"
android:layout_marginBottom="@dimen/padding_between"
android:layout_marginTop="@dimen/padding_between"
android:background="#C8C9CB" />
<EditText
android:id="@+id/nombre_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/divider"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/normal_padding"
android:background="@drawable/edit_text_border"
android:ems="10"
android:hint="@string/nombre_input"
android:inputType="textPersonName"
android:padding="@dimen/edit_text_padding"
android:textAppearance="?android:attr/textAppearanceSmall"
<EditText
android:id="@+id/contrasena_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/nombre_input"
android:layout_centerHorizontal="true"
android:layout_marginBottom="@dimen/padding_between"
android:layout_marginTop="@dimen/normal_padding"
android:background="@drawable/edit_text_border"
android:ems="10"
android:hint="@string/contrasena_input"
android:inputType="textPassword"
android:padding="@dimen/edit_text_padding"
android:textAppearance="?android:attr/textAppearanceSmall"
<CheckBox
android:id="@+id/recordar_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/contrasena_input"
android:layout_alignStart="@+id/contrasena_input"
android:layout_below="@+id/contrasena_input"
android:checked="false"
android:text="@string/recordar_check"
<TextView
android:id="@+id/olvidar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/contrasena_input"
android:layout_alignRight="@+id/contrasena_input"
android:layout_below="@+id/recordar_check"
android:paddingTop="@dimen/padding_between"
android:text="@string/olvidar_text"
android:textAppearance="?android:attr/textAppearanceSmall"
<Button
android:id="@+id/entrar_boton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="@dimen/button_padding"
android:paddingTop="@dimen/button_padding"
android:text="@string/entrar_boton"
android:textColor="@android:color/white"
</RelativeLayout>
/**
* Crea un dilogo con personalizado para comportarse
* como formulario de login
*
* @return Dilogo
*/
public AlertDialog createLoginDialogo() {
AlertDialog.Builder builder = new AlertDialog
View v = inflater.inflate(R.layout.dialog_signin
builder.setView(v);
signup.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
// Crear Cuenta...
dismiss();
}
}
);
signin.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
// Loguear...
dismiss();
}
}
);
return builder.create();
}
import android.support.v4.app.DialogFragment;
Por ejemplo
import android.app.Activity;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
/**
* Fragmento con dilogo bsico
*/
public class SimpleDialog extends DialogFragment
public SimpleDialog() {
}
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState
return createSimpleDialog();
}
/**
* Crea un dilogo de alerta sencillo
* @return Nuevo dilogo
*/
public AlertDialog createSimpleDialog() {
AlertDialog.Builder builder = new AlertDialog
builder.setTitle("Titulo")
.setMessage("El Mensaje para el usuario"
.setPositiveButton("OK",
new DialogInterface.OnClickListener
@Override
public void onClick
// Acciones
}
})
.setNegativeButton("CANCELAR"
new DialogInterface.OnClickListener
@Override
public void onClick
// Acciones
}
});
return builder.create();
}
}
// En algn lugar de tu actividad
new SimpleDialog().show(getSupportFragmentManager
// Interfaz de comunicacin
OnSimpleDialogListener listener;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
listener = (OnSimpleDialogListener) activity
} catch (ClassCastException e) {
throw new ClassCastException(
activity.toString() +
" no implement OnSimpleDialogListener"
}
}
Paso #4: Invocar los mtodos de la interfaz en las secciones del
dilogo donde deseamos implicar a la actividad.
.setPositiveButton("OK",
new DialogInterface.OnClickListener()
@Override
public void onClick(DialogInterface
listener.onPossitiveButtonClick
}
})
.setNegativeButton("CANCELAR",
new DialogInterface.OnClickListener()
@Override
public void onClick(DialogInterface
listener.onNegativeButtonClick
}
});
//...
}
@Override
public void onPossitiveButtonClick() {
// Acciones
}
@Override
public void onNegativeButtonClick() {
// Acciones
}
import android.app.Activity;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
/**
* Fragmento con dilogo de lista simple
*/
public class SimpleListDialog extends DialogFragment
OnSetTitleListener listener;
public SimpleListDialog() {
}
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState
return createSingleListDialog();
}
/**
* Crea un Dilogo con una lista de seleccin simple
*
* @return La instancia del dilogo
*/
public AlertDialog createSingleListDialog
AlertDialog.Builder builder = new AlertDialog
items[0] = "Naranja";
items[1] = "Mango";
items[2] = "Banano";
return builder.create();
}
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
listener = (OnSetTitleListener) activity
} catch (ClassCastException e) {
throw new ClassCastException(
activity.toString() +
" no implement OnSetTitleListener"
}
}
Al igual que como hemos hecho hasta ahora con los dems
dilogos, creamos un DialogFragment para que actu como
envoltura. Para
ello se retorna en una instancia de
DatePickerDialog en el mtodo onCreateDialog() .
DateDialog.java
import android.annotation.TargetApi;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import java.util.Calendar;
/**
* Fragmento con un dilogo de eleccin de fechas
*/
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class DateDialog extends DialogFragment
@Override
public Dialog onCreateDialog(Bundle savedInstanceState
// Obtener fecha actual
final Calendar c = Calendar.getInstance
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH
@Override
public void onDateSet(DatePicker view, int year
Toast.makeText(
this,
"Fecha: " + year + "-" + monthOfYear
Toast.LENGTH_LONG)
.show();
}
Crear Dilogo Con Un TimePicker En Su
Interior
TimeDialog.java
import android.annotation.TargetApi;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.text.format.DateFormat;
import java.util.Calendar;
/**
* Fragmento con un dilogo de eleccin de tiempos
*/
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class TimeDialog extends DialogFragment
@Override
public Dialog onCreateDialog(Bundle savedInstanceState
// Iniciar con el tiempo actual
final Calendar c = Calendar.getInstance
int hour = c.get(Calendar.HOUR_OF_DAY
int minute = c.get(Calendar.MINUTE);
@Override
public void onTimeSet(TimePicker view, int hourOfDay
Toast.makeText(
this,
"Tiempo: " + hourOfDay + ":" + minute
Toast.LENGTH_LONG)
.show();
}
fullscreen_dialog.xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin"
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingTop="@dimen/edit_text_padding"
android:text="@string/cliente_label"
android:textAppearance="?android:attr/textAppearanceSmall"
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/textView"
android:entries="@array/clientes"
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/spinner"
android:paddingTop="@dimen/edit_text_padding"
android:text="@string/producto_label"
android:textAppearance="?android:attr/textAppearanceSmall"
<Spinner
android:id="@+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/textView2"
android:entries="@array/productos"
<TextView
android:id="@+id/fecha_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/spinner2"
android:paddingTop="@dimen/edit_text_padding"
android:text="@string/fecha_label"
android:textAppearance="?android:attr/textAppearanceSmall"
<View
android:id="@+id/centro"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="@null" />
<TextView
android:id="@+id/prioridad_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/fecha_text"
android:paddingTop="@dimen/edit_text_padding"
android:text="@string/prioridad_label"
android:textAppearance="?android:attr/textAppearanceSmall"
<Spinner
android:id="@+id/spinner5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/prioridad_text"
android:entries="@array/prioridades"
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/spinner5"
android:paddingTop="@dimen/edit_text_padding"
android:text="@string/notas_label"
android:textAppearance="?android:attr/textAppearanceSmall"
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/textView5"
android:hint="@string/notas_hint"
android:textAppearance="?android:attr/textAppearanceSmall"
<TextView
android:id="@+id/fecha_text"
style="@android:style/Widget.DeviceDefault
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/fecha_label"
android:layout_marginRight="@dimen/normal_padding"
android:layout_toLeftOf="@+id/hora_text"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
<TextView
android:id="@+id/hora_text"
style="@android:style/Widget.DeviceDefault
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/fecha_label"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
</RelativeLayout>
</ScrollView>
FullScreenDialog.java
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.herprogramacion.dialogpers.R;
import java.text.SimpleDateFormat;
import java.util.Calendar;
public class FullScreenDialog extends DialogFragment
@Override
public void onCreate(Bundle savedInstanceState
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
if (actionBar != null) {
// Habilitar el Up Button
actionBar.setDisplayHomeAsUpEnabled
// Cambiar icono del Up Button
actionBar.setHomeAsUpIndicator(R.
}
}
@Override
public View onCreateView(LayoutInflater inflater
Bundle savedInstanceState
View view = inflater.inflate(R.layout
iniciarHora(view);// Setear hora inicial
iniciarFecha(view);// Setear fecha inicial
return view;
}
textTiempo.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v
new TimeDialog().show
}
}
);
}
textFecha.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v
new DateDialog().show
}
}
);
}
@Override
public void onCreateOptionsMenu(Menu menu
inflater.inflate(R.menu.fullscreen_dialog
}
@Override
public boolean onOptionsItemSelected(MenuItem
int id = item.getItemId();
switch (id) {
case android.R.id.home:
// procesarDescartar()
break;
case R.id.action_save:
// procesarGuardar()
break;
}
return super.onOptionsItemSelected(item
}
/**
* Actualiza la fecha del view {@code fecha_text}
* @param year Nuevo Ao
* @param monthOfYear Nuevo Mes
* @param dayOfMonth Nuevo da
*/
public void setDateView(int year, int monthOfYear
Calendar c = Calendar.getInstance();
c.set(year, monthOfYear, dayOfMonth);
SimpleDateFormat format = new SimpleDateFormat
textFecha.setText(format.format(c.getTime
}
/**
* Actualiza la hora del view {@code hora_text}
* @param hourOfDay Nueva Hora
* @param minute Nuevos Minutos
*/
public void setTimeView(int hourOfDay, int
Calendar c = Calendar.getInstance();
c.set(Calendar.HOUR, hourOfDay);
c.set(Calendar.MINUTE, minute);
SimpleDateFormat format = new SimpleDateFormat
textTiempo.setText(format.format(c.getTime
}
}
DetailActivity.java
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.support.v7.app.AppCompatActivity
import android.widget.DatePicker;
import android.widget.TimePicker;
import com.herprogramacion.dialogpers.R;
import com.herprogramacion.dialogpers.dialogos
public class DetailActivity extends AppCompatActivity
DatePickerDialog.OnDateSetListener,
TimePickerDialog.OnTimeSetListener {
@Override
protected void onCreate(Bundle savedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail
if (savedInstanceState == null) {
crearFullScreenDialog();
}
}
@Override
public void onDateSet(DatePicker view, int
@Override
public void onTimeSet(TimePicker view, int
FullScreenDialog fragment = (FullScreenDialog
if (fragment != null) {
fragment.setTimeView(hourOfDay, minute
}
}
}
fullscreen_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<item android:id="@+id/action_save" android:title
android:orderInCategory="1" app:showAsAction
</menu>
// Dentro de un DialogFragment...
@Override
public void onDismiss(DialogInterface dialog)
// Tus acciones
}
Por otro lado el dilogo puede ser cancelado sin aplicar los
cambios a travs de cancel() . Para procesar su
comportamiento puedes usar onCancel() , el cual es invocado
si el usuario presiona el Back Button, si es presionado el botn
negativo o si se presiona por fuera del dilogo.
// Dentro de un DialogFragment...
@Override
public void onCancel(DialogInterface dialog)
// Tus acciones
}
Conclusiones
Icono de la aplicacin
Artculos Relacionados
Tabs En La Action Tutorial Sobre La Tutorial
Bar Con Swipe Action Bar En RecyclerView Con
Views En Android Android Studio Cursor En Android
Comentarios Comunidad
1 Login
nete a la discusin...
Daniel Cabanillas Purihuaman hace 18 das
Hola James, una pregunta, como se puede mostrar un
ProgressDialog Sobre un DiaalogFragment?
Estoy usando un DialogFragment como formulario y un
ProgressDialog que se muestra al guardar los datos del
dialog, pero el ProgressDialog siempre se muestra por
debajo del DialogFragment.
Saludos.
1 Reply Share
Saludos Jacsel...!!!
Reply Share
gracias
Reply Share
Gracias.
Reply Share
Leo HR hace un ao
Hola James, saludos, disculpa ... como podra mostrar un
progressBar Circular indeterminado como un Dialog.
Podras ayudarme? de antemano gracias :)
Reply Share
Leo HR hace un ao
Hola James saludos, disculpa...
German hace un ao
Una Consulta James , como puedo hacer para cargar una
lista en un AlertDialog haciendo una peticion get hacia
una url que me trae un json , con Volley, que me
recomendas ??
Reply Share
Alberto hace un ao
Hola James
Antes de nada, muchas gracias por estos tutoriales, me
estn sirviendo de mucho
un saludo
muchas gracias
Reply Share
Reply Share
Fipal hace un ao
Hola gracias por tus tutoriales, podras ayudarme con un
problema pasa quq cuando ejecuto el FullScreen desde
un button oat no me aparece el actionbar y realmente no
se si se debe agregar algo mas a lo que explicas en el
tutorial.
Gracias
Reply Share
Gracias.
Reply Share
Reply Share
Reply Share