Diálogo Selector de tiempo en Android

Android TimePicker es un control de interfaz de usuario para seleccionar la hora en formato de 24 horas o en modo AM/PM. Se utiliza para garantizar que los usuarios elijan la hora válida para el día en nuestra aplicación. La interfaz del selector de tiempo existe básicamente en dos modos, uno está bajo el diseño XML y el otro es un diálogo. En esta discusión, se demostró cómo implementar TimePicker Dialog en Android. Consulte TimePicker en Kotlin para TimePicker en el diseño XML. Eche un vistazo a la siguiente imagen para obtener una descripción general de la discusión.

Pasos para implementar Time Picker Dialog en la aplicación de Android

Paso 1: crear un proyecto de actividad vacío

Cree un proyecto de Android Studio de actividad vacío y seleccione Kotlin como lenguaje de programación. android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?

Paso 2: trabajar con el archivo activity_main.xml

El diseño principal de la aplicación contiene un botón y TextView para obtener una vista previa de la hora seleccionada. Para implementar el mismo diseño, invoque el siguiente código dentro del archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <Button
        android:id="@+id/pick_time_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="128dp"
        android:text="PICK TIME"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <TextView
        android:id="@+id/preview_picked_time_textView"
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Preview picked time here"
        app:layout_constraintEnd_toEndOf="@+id/pick_time_button"
        app:layout_constraintStart_toStartOf="@+id/pick_time_button"
        app:layout_constraintTop_toBottomOf="@+id/pick_time_button" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Antes de comenzar a implementar el cuadro de diálogo TimePicker, es importante comprender la anatomía del cuadro de diálogo.

Paso 3: trabajar con el archivo MainActivity.kt

En el archivo MainActivity.kt, la instancia de TimePickerDialog que toma 5 parámetros.

TimePickerDialog(Contexto, TimePickerDialogListener, DefaultHourOfDialog(Int), DefaultMinuteOfDialog(Int), is24HourView(boolean))

Para implementar TimePicker Dialog, invoque el siguiente código.

import android.app.TimePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.TimePicker
  
class MainActivity : AppCompatActivity() {
  
    lateinit var previewSelectedTimeTextView: TextView
  
    // listener which is triggered when the
      // time is picked from the time picker dialog
    private val timePickerDialogListener: TimePickerDialog.OnTimeSetListener =
        object : TimePickerDialog.OnTimeSetListener {
            override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
  
                // logic to properly handle 
                  // the picked timings by user
                val formattedTime: String = when {
                    hourOfDay == 0 -> {
                        if (minute < 10) {
                            "${hourOfDay + 12}:0${minute} am"
                        } else {
                            "${hourOfDay + 12}:${minute} am"
                        }
                    }
                    hourOfDay > 12 -> {
                        if (minute < 10) {
                            "${hourOfDay - 12}:0${minute} pm"
                        } else {
                            "${hourOfDay - 12}:${minute} pm"
                        }
                    }
                    hourOfDay == 12 -> {
                        if (minute < 10) {
                            "${hourOfDay}:0${minute} pm"
                        } else {
                            "${hourOfDay}:${minute} pm"
                        }
                    }
                    else -> {
                        if (minute < 10) {
                            "${hourOfDay}:${minute} am"
                        } else {
                            "${hourOfDay}:${minute} am"
                        }
                    }
                }
  
                previewSelectedTimeTextView.text = formattedTime
            }
        }
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // instance of the UI elements
        val buttonPickTime: Button = findViewById<Button>(R.id.pick_time_button)
        previewSelectedTimeTextView = findViewById<TextView>(R.id.preview_picked_time_textView)
  
        // handle the pick time button to
          // open the TimePickerDialog
        buttonPickTime.setOnClickListener {
            val timePicker: TimePickerDialog = TimePickerDialog(
                // pass the Context
                this,
                // listener to perform task
                  // when time is picked
                timePickerDialogListener,
                // default hour when the time picker
                  // dialog is opened
                12,
                // default minute when the time picker
                  // dialog is opened
                10,
                // 24 hours time picker is 
                  // false (varies according to the region)
                false
            )
  
            // then after building the timepicker 
              // dialog show the dialog to user
            timePicker.show()
        }
    }
}

Producción: