Agrega selectores a tu app

Android proporciona controles para que el usuario elija una hora o fecha como diálogos listos para usar. Estos selectores proporcionan controles para seleccionar cada parte de la hora (hora, minuto, a.m./p.m.) o fecha (mes, día, año).

Un ejemplo de selector de hora de material.io
Figura 1: Selección de hora en un selector de calendario para dispositivos móviles

El uso de estos selectores ayuda a garantizar que tus usuarios puedan elegir una hora o una fecha válidas, con el formato correcto y ajustadas a su configuración regional.

Un ejemplo de un selector de fechas modal de material.io
Figura 2: Selector de fecha modal.

Te recomendamos que uses DialogFragment para alojar cada selector de fecha y hora. DialogFragment administra el ciclo de vida del diálogo y te permite mostrar selectores en diferentes configuraciones de diseño, por ejemplo, en un diálogo básico en teléfonos celulares o como parte incorporada del diseño en pantallas grandes.

Crea un selector de hora

Para mostrar un TimePickerDialog con DialogFragment, define una clase de fragmento que extienda DialogFragment y muestra un TimePickerDialog del método onCreateDialog() del fragmento.

Cómo extender DialogFragment para un selector de hora

Si deseas definir un DialogFragment para un TimePickerDialog, haz lo siguiente:

  • Define el método onCreateDialog() para mostrar una instancia de TimePickerDialog.
  • Implementa la interfaz TimePickerDialog.OnTimeSetListener para recibir una devolución de llamada cuando el usuario configure la hora.

Por ejemplo:

Kotlin

class TimePickerFragment : DialogFragment(), TimePickerDialog.OnTimeSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current time as the default values for the picker.
        val c = Calendar.getInstance()
        val hour = c.get(Calendar.HOUR_OF_DAY)
        val minute = c.get(Calendar.MINUTE)

        // Create a new instance of TimePickerDialog and return it.
        return TimePickerDialog(activity, this, hour, minute, DateFormat.is24HourFormat(activity))
    }

    override fun onTimeSet(view: TimePicker, hourOfDay: Int, minute: Int) {
        // Do something with the time the user picks.
    }
}

Java

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker.
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it.
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time the user picks.
    }
}

Consulta la clase TimePickerDialog para obtener información sobre los argumentos del constructor.

Ahora, solo necesitas un evento que agregue una instancia de este fragmento a tu actividad.

Mostrar el selector de hora

Después de definir un DialogFragment como el del ejemplo anterior, puedes mostrar el selector de hora creando una instancia de DialogFragment y llamando al método show().

Por ejemplo, aquí hay un botón que, cuando se presiona, llama a un método para mostrar el diálogo:

<Button
    android:id="@+id/pickTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick time" />

Cuando el usuario presiona este botón, el sistema llama al siguiente método:

Kotlin

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker")
}

Java

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker");
}

Este método llama a show() en una instancia nueva del DialogFragment definido en el ejemplo anterior. El método show() requiere una instancia de FragmentManager y un nombre de etiqueta único para el fragmento.

Crea un selector de fecha

Crear un DatePickerDialog es como crear un TimePickerDialog. La diferencia está en el diálogo que creas para el fragmento.

Para mostrar un DatePickerDialog usando DialogFragment, define una clase de fragmento que extienda DialogFragment y muestre un DatePickerDialog del método onCreateDialog() del fragmento.

Cómo extender DialogFragment para un selector de fecha

Si deseas definir un DialogFragment para un DatePickerDialog, haz lo siguiente:

  • Define el método onCreateDialog() para mostrar una instancia de DatePickerDialog.
  • Implementa la interfaz DatePickerDialog.OnDateSetListener para recibir una devolución de llamada cuando el usuario configure la fecha.

Por ejemplo:

Kotlin

class DatePickerFragment : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current date as the default date in the picker.
        val c = Calendar.getInstance()
        val year = c.get(Calendar.YEAR)
        val month = c.get(Calendar.MONTH)
        val day = c.get(Calendar.DAY_OF_MONTH)

        // Create a new instance of DatePickerDialog and return it.
        return DatePickerDialog(requireContext(), this, year, month, day)

    }

    override fun onDateSet(view: DatePicker, year: Int, month: Int, day: Int) {
        // Do something with the date the user picks.
    }
}

Java

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker.
        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);

        // Create a new instance of DatePickerDialog and return it.
        return new DatePickerDialog(requireContext(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date the user picks.
    }
}

Consulta la clase DatePickerDialog para obtener información sobre los argumentos del constructor.

Solo necesitas un evento que agregue una instancia de este fragmento a tu actividad.

Mostrar el selector de fecha

Después de definir un DialogFragment como en el ejemplo anterior, puedes mostrar el selector de fecha creando una instancia de DialogFragment y llamando a show().

Por ejemplo, aquí hay un botón que, cuando se presiona, llama a un método para mostrar el diálogo:

<Button
    android:id="@+id/pickDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick date"/>

Cuando el usuario presiona este botón, el sistema llama al siguiente método:

Kotlin

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment()
    newFragment.show(supportFragmentManager, "datePicker")
}

Java

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment();
    newFragment.show(supportFragmentManager, "datePicker");
}

Este método llama a show() en una instancia nueva del DialogFragment definido en el ejemplo anterior. El método show() requiere una instancia de FragmentManager y un nombre de etiqueta único para el fragmento.

Cómo usar selectores con la función Autocompletar

En 2017, Android presentó Autofill Framework, que permite a los usuarios guardar datos que se pueden usar para completar formularios en diferentes apps. Los selectores pueden ser útiles en situaciones de autocompletado, ya que proporcionan una IU que permite a los usuarios cambiar el valor de un campo que almacena datos de fecha y hora. Por ejemplo, en un formulario de tarjeta de crédito, un selector de fecha permite a los usuarios ingresar o cambiar la fecha de vencimiento de su tarjeta de crédito.

Como los selectores son diálogos, no se muestran en una actividad junto con otros campos. Para mostrar los datos del selector cuando este no esté visible, puedes usar otra vista, como un EditText, que puede mostrar el valor cuando no esté visible.

De forma nativa, un objeto EditText espera autocompletar datos de tipo AUTOFILL_TYPE_TEXT. Por el contrario, los servicios de autocompletado guardan los datos como AUTOFILL_TYPE_DATE para crear una representación adecuada de ellos. Para resolver la incoherencia en los tipos, te recomendamos que crees una vista personalizada que herede contenido de EditText e implemente los métodos necesarios para procesar correctamente los valores del tipo AUTOFILL_TYPE_DATE.

Sigue estos pasos para crear una subclase de EditText que pueda procesar valores de tipo AUTOFILL_TYPE_DATE:

  1. Crea una clase que se herede de EditText.
  2. Implementa el método getAutofillType(), que muestra AUTOFILL_TYPE_DATE.
  3. Implementa el método getAutofillValue(), que muestra un objeto AutofillValue que representa la fecha en milisegundos. Para crear el objeto que se muestra, usa el método forDate() para generar un objeto AutofillValue.
  4. Implementa el método autofill(). Este método proporciona la lógica para controlar el parámetro AutofillValue, que es del tipo AUTOFILL_TYPE_DATE. Para controlar el parámetro, crea una representación de cadena adecuada, como mm/yyyy. Usa la representación de string para configurar la propiedad text de tu vista.
  5. Implementa la funcionalidad que muestra un selector cuando el usuario desea editar la fecha en la subclase personalizada de EditText. La vista actualiza la propiedad text con una representación de string del valor que el usuario selecciona en el selector.

Para ver un ejemplo de una subclase de EditText que procesa los valores de AUTOFILL_TYPE_DATE, consulta la muestra de Autofill Framework en Java o Kotlin.

Si deseas obtener más información para probar la compatibilidad con Autocompletar para tus vistas personalizadas, consulta Autofill Framework.