Selector de tiempo en Android

TimePicker Dialog se utiliza en muchas aplicaciones en las que tenemos que reservar citas en función de una hora específica. Este widget se ve en las aplicaciones donde tenemos que seleccionar franjas horarias concretas. En este artículo, veremos cómo usar TimePicker Dialog en Android. 

Nota : este artículo de Android cubre los lenguajes Java y Kotlin . 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: trabajar con el archivo activity_main.xml

Vaya a aplicación > res > diseño > actividad_principal.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idRLContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating
        a text for our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idTVSelectedTime"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Time Picker Dialog in Android"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a text view-->
    <TextView
        android:id="@+id/idTVSelectedTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idBtnPickTime"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Time"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a 
        button for date picker-->
    <Button
        android:id="@+id/idBtnPickTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:text="Pick Time"
        android:textAllCaps="false" />
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity 

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
import android.app.TimePickerDialog
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import java.util.*
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating a variable.
    lateinit var pickTimeBtn: Button
    lateinit var selectedTimeTV: TextView
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // on below line we are initializing our variables.
        pickTimeBtn = findViewById(R.id.idBtnPickTime)
        selectedTimeTV = findViewById(R.id.idTVSelectedTime)
  
        // on below line we are adding click 
        // listener for our button
        pickTimeBtn.setOnClickListener {
            // on below line we are getting 
            // the instance of our calendar.
            val c = Calendar.getInstance()
  
            // on below line we are getting our hour, minute.
            val hour = c.get(Calendar.HOUR_OF_DAY)
            val minute = c.get(Calendar.MINUTE)
  
            // on below line we are initializing 
            // our Time Picker Dialog
            val timePickerDialog = TimePickerDialog(
                this,
                { view, hourOfDay, minute ->
                    // on below line we are setting selected 
                    // time in our text view.
                    selectedTimeTV.setText("$hourOfDay:$minute")
                },
                hour,
                minute,
                false
            )
            // at last we are calling show to 
            // display our time picker dialog.
            timePickerDialog.show()
        }
    }
}

package com.gtappdevelopers.kotlingfgproject;
  
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.TimePicker;
import androidx.appcompat.app.AppCompatActivity;
import java.util.Calendar;
  
public class MainActivity extends AppCompatActivity {
  
    // on below line we are creating variables.
    private Button pickTimeBtn;
    private TextView selectedTimeTV;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // on below line we are initializing our variables.
        pickTimeBtn = findViewById(R.id.idBtnPickTime);
        selectedTimeTV = findViewById(R.id.idTVSelectedTime);
  
        // on below line we are adding click 
        // listener for our pick date button
        pickTimeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are getting the 
                // instance of our calendar.
                final Calendar c = Calendar.getInstance();
  
                // on below line we are getting our hour, minute.
                int hour = c.get(Calendar.HOUR_OF_DAY);
                int minute = c.get(Calendar.MINUTE);
  
                // on below line we are initializing our Time Picker Dialog
                TimePickerDialog timePickerDialog = new TimePickerDialog(MainActivity.this,
                        new TimePickerDialog.OnTimeSetListener() {
                            @Override
                            public void onTimeSet(TimePicker view, int hourOfDay,
                                                  int minute) {
                                // on below line we are setting selected time
                                // in our text view.
                                selectedTimeTV.setText(hourOfDay + ":" + minute);
                            }
                        }, hour, minute, false);
                // at last we are calling show to 
                // display our time picker dialog.
                timePickerDialog.show();
            }
        });
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: