Membuat TimePickerDialog di android dengan kotlin

Hallo sahabat CAN Creative, kembali lagi dengan android tutorial yang kekinian. Nah, kali ini kita akan membuat sebuah alat pilih untuk memilih jam dan menit. Di android sendiri, sudah menyediakan alat pilih dari pilih tanggal hingga pilih jam dan menit dengan dialog. Alat pilih ini menjadikan pengguna dapat memilih jam dan menit sesuai dengan ketentuan dan valid data. Langsung saja kita buat TimePickerDialog, pertama buat projek ataupun bisa menggunakan projek yang sudah pernah di buat. Selanjutnya buka main_activity.xml dan tambahkan kode seperti di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

   <TextView
       android:textColor="#000"
       android:textSize="16dp"
       android:id="@+id/main_tv_jam"
       android:layout_centerInParent="true"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Pilih Jam"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <Button
       android:id="@+id/main_btn_pilih"
       android:layout_marginTop="10dp"
       android:layout_centerHorizontal="true"
       android:layout_below="@+id/main_tv_jam"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Pilih"
       android:textAllCaps="false"/>

</RelativeLayout>

Di halaman ini, kita membuat satu TextView untuk menampilkan hasil dari waktu yang dipilih dan sebuah Button untuk memberikan aksi menampilkan TimePickerDialog. Selanjutnya kita membuka MainActivity.class dan inisialisasi Calendar dan buat method untuk menampilkan Dialognya, bisa lihat kode dibawah ini.

val myCalender = Calendar.getInstance()

fun pilihWaktu() {

   val timeSetListener = TimePickerDialog.OnTimeSetListener { timePicker, hour, minute ->
       myCalender.set(Calendar.HOUR_OF_DAY, hour)
       myCalender.set(Calendar.MINUTE, minute)

       val waktu = SimpleDateFormat(" HH:mm").format(myCalender.time)
      
       val tvWaktu = findViewById<TextView>(R.id.main_tv_jam)
       tvWaktu.text = waktu

   }

   TimePickerDialog(
       this,
       timeSetListener,
       myCalender.get(Calendar.HOUR_OF_DAY),
       myCalender.get(Calendar.MINUTE),
       true
   ).show()

}

Method pilihWaktu(), kita membuat listener dari TimePickerDialog dan menampilkannya di TextView . Selanjutnya kita tambahkan kode di dalam onCreate() untuk menambahkan aksi untuk Button dan memanggil method pilihWaktu(). Bisa lihat kode dibawah ini.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val btnPilih = findViewById<Button>(R.id.main_btn_pilih)
   btnPilih.setOnClickListener {
       pilihWaktu()
   }
  
}

Kode lengkap MainActivity bisa dipraktikkan dibawah ini ya sahabat.

import android.app.TimePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import java.text.SimpleDateFormat
import java.util.*

class MainActivity : AppCompatActivity() {

   val myCalender = Calendar.getInstance()

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val btnPilih = findViewById<Button>(R.id.main_btn_pilih)
       btnPilih.setOnClickListener {
           pilihWaktu()
       }

   }

   fun pilihWaktu() {

       val timeSetListener = TimePickerDialog.OnTimeSetListener { timePicker, hour, minute ->
           myCalender.set(Calendar.HOUR_OF_DAY, hour)
           myCalender.set(Calendar.MINUTE, minute)

           val waktu = SimpleDateFormat(" HH:mm").format(myCalender.time)

           val tvWaktu = findViewById<TextView>(R.id.main_tv_jam)
           tvWaktu.text = waktu

       }

       TimePickerDialog(
           this,
           timeSetListener,
           myCalender.get(Calendar.HOUR_OF_DAY),
           myCalender.get(Calendar.MINUTE),
           true
       ).show()

   }

}

Setelah itu jalankan aplikasinya. Dan hasilnya akan seperti dibawah ini.

Selamat mencoba, semoga sefruit tutorial ini berguna untuk sahabat CAN Creative yang berminat menekuni bidang IT khususnya menjadi developer. Anda juga dapat mengetahui promo menarik seputar penawaran website, aplikasi, digital marketing ataupun SEO melalui website kami can.co.id. Kami juga aktif di media sosial instagram @cancreative, Line @cancreative.

Referensi : https://developer.android.com/reference/android/app/TimePickerDialog
Referensi : https://developer.android.com/guide/topics/ui/controls/pickers
Source Code di ada di Github : https://github.com/ramcona/timepikerdialogexample