El timepicker es una herramienta dentro del desarrollo de aplicaciones que nos sirve para crear sistemas de reservas o recordatorios. Este componente les permite a los usuarios seleccionar una hora específica, mejorando así la experiencia y precisión en la entrada de datos.
En este artículo queremos mostrarte cómo funciona y cómo configurarlo en Android con Kotlin en unos cuantos minutos.
¿Qué es un time picker?
El time picker es un elemento gráfico que hace posible que los usuarios p uedan seleccionar una hora de manera visual, ya sea en formato de 12 o 24 horas. Este suele mostrar un reloj o un selector de horas y minutos y nos facilita la vida al evitar la entrada manual de la hora, minimizando errores.
En las aplicaciones Android desarrolladas con Kotlin el time picker funciona como un diálogo flotante que muestra un reloj en el que puedes elegir horas y minutos.
¿Cómo configurar un time picker en Android?
- Configura el layout con un campo de texto: Lo primero que necesitarás será un EditText en tu diseño para que este permita al usuario activar el time picker cuando haga click en él. Veamos cómo configurar tu código XML para el layout:
<EditText
android:id="@+id/etTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:clickable="false"
android:focusable="false"
android:hint="¿A qué hora?" />- Configura el listener en
MainActivity: dentro del archivo MainActivity debes hacer la asignación del listener al campo de texto que se activará cuando el usuario haga click en él. Esto hará el llamado a una función que se creará más tarde, llamada showTime PickerDialog():
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
etTime.setOnClickListener { showTimePickerDialog() }
}- Crea el fragmento Time PickerFragment: una vez completado el paso anterior, debes crear una clase Time PickerFragment que extenderá de DialogFragment y que implementará Time PickerDialog.OntimeSetListener. Será esta clase la que se encargue de mostrar el time picker y gestionará la hora seleccionada por el usuario:
class TimePickerFragment(val listener: (String) -> Unit) : DialogFragment(), TimePickerDialog.OnTimeSetListener {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val c = Calendar.getInstance()
val hour = c.get(Calendar.HOUR_OF_DAY)
val minute = c.get(Calendar.MINUTE)
val picker = TimePickerDialog(activity as Context, this, hour, minute, true)
return picker
}
override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
listener("$hourOfDay:$minute")
}
}En esta clase, onCreateDialog crea el diálogo del time picker y lo inicializa con la hora y minuto actuales. Luego, el método onTimeSet se llama automáticamente cuando el usuario selecciona una hora, devolviendo la hora en formato de HH:mm.
- Llama al time picker desde
MainActivity: Ahora debes completar la función ShowTime PickerDialog() en MainActivity para que esta llame el fragmento Time PickerFragment y reciba la hora seleccionada:
private fun showTimePickerDialog() {
val timePicker = TimePickerFragment { onTimeSelected(it) }
timePicker.show(supportFragmentManager, "timePicker")
}
private fun onTimeSelected(time: String) {
etTime.setText("Reserva para las $time")
}La función onTimeSelected recibe la hora en formato String y la muestra en el campo de texto, proporcionando una experiencia visual intuitiva para el usuario.
Personalizar el color del time picker
Si deseas darle un toque único y muy tuyo al time picker, puedes personalizar los colores. Para esto, agrega un estilo en styles.xml y úsalo en el time picker.
<style name="PickerTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:colorAccent">#FFA726</item>
</style>Luego, usa el estilo en la creación del timepicker dentro de TimePickerFragment.
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val c = Calendar.getInstance()
val hour = c.get(Calendar.HOUR_OF_DAY)
val minute = c.get(Calendar.MINUTE)
val picker = TimePickerDialog(activity as Context, R.style.PickerTheme, this, hour, minute, true)
return picker
}Y listo, así de simple configuras y creas un time picker.
Si deseas seguir aprendiendo sobre esta y otras temáticas relacionadas con el desarrollo de aplicaciones, únete a nuestro bootcamp en desarrollo web. En Keepcoding tenemos los mejores profesionales listos para instruirte en todo lo que necesites y puedas conseguir trabajo fácilmente. ¡Da el paso que necesitas para conseguir tus metas y escríbenos ahora!
