Android Time Picker Kotlin Tutorial

Another cool component is the Android Time Picker for developers who want to input a time such as hour and minute. It does not hurt you a lot if you want to learn how to use this widget as well. The time picker dialog will be using a Calendar instance similar to Android date picker dialog, be sure you also check my cool tutorial about date picker dialog here.

What the app will look like?

The app will look like this after you finish this tutorial:

So we’re gonna learn to create two types of time picker here. The first one on the left picture is a Material time picker dialog which is a clock type picker and the other one is a spinner type of time picker. Plus there is a 24-hour view of time picker also.

What will you learn?

  • Creating a simple Android Time Picker dialog app extending TimePickerDialog class using Kotlin.
  • Learn about how to use Calendar instance

Note: In this post, I used Android Studio 3.5.3, make sure you use the latest Android Studio, or if you already install it, be sure to check the latest update. The Kotlin version that I used is Kotlin 1.3.61.

Getting Started on your Android time picker

Open your Android Studio and choose to Start a new Android Studio Project. Then set the Application Name SimpleTimePicker and select Kotlin as the language. Give the Activity Name MainActivity and wait until the Android Studio finishes preparing your project.

Open activity_main.xml inside res/layout directory and replace the code given below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="20dp"
   android:gravity="center">

   <TextView
       android:id="@+id/tvTime"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginRight="20dp"
       android:textSize="20sp"
       android:textColor="#000"
       android:text="00:00" />

   <Button
       android:id="@+id/btSelectTime"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Select Time"/>

</LinearLayout>

When you run your app it will display like the picture below:

Create a new Kotlin class named TimePickerHelper.kt beside MainActivity.kt here:

After that, write this code given below inside TimePickerHelper.kt:

package com.thesimplycoder.simpletimepicker

import android.app.TimePickerDialog
import android.app.TimePickerDialog.OnTimeSetListener
import android.content.Context
import java.util.*

class TimePickerHelper(
   context: Context,
   is24HourView: Boolean,
   isSpinnerType: Boolean = false
) {

   private var dialog: TimePickerDialog
   private var callback: Callback? = null

   private val listener = OnTimeSetListener { timePicker, hourOfDay, minute ->
       callback?.onTimeSelected(hourOfDay, minute)
   }

   init {
       val style = if (isSpinnerType) R.style.SpinnerTimePickerDialog else 0

       val cal = Calendar.getInstance()

       dialog = TimePickerDialog(context, style, listener,
           cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE), is24HourView)
   }

   fun showDialog(hourOfDay: Int, minute: Int, callback: Callback?) {
       this.callback = callback
       dialog.updateTime(hourOfDay, minute)
       dialog.show()
   }

   interface Callback {
       fun onTimeSelected(hourOfDay: Int, minute: Int)
   }
}

This class has some functions to simplify our works like:

  • showDialog() function is for showing the picker dialog.
  • onTimeSelected() callback function will be triggered after a user select a specific time (hour and minute) from the dialog.
  • isSpinnerType parameter is my custom parameter for this class to give it condition whether you want to use Spinner type picker or material clock picker.
  • is24HourView is a parameter to show the 12-hour or 24-hour clock.

Open file styles.xml inside res/values directory. The XML code is given below:

<resources>

   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>

   <style name="SpinnerTimePickerDialog" parent="@android:style/Theme.Holo.Light.Dialog">
       <item name="android:windowIsTranslucent">true</item>
       <item name="android:windowBackground">@android:color/transparent</item>
       <item name="android:windowContentOverlay">@null</item>
       <item name="android:windowNoTitle">true</item>
       <item name="android:windowIsFloating">true</item>
       <item name="android:backgroundDimEnabled">true</item>
       <item name="android:calendarViewShown">false</item>
       <item name="android:timePickerMode">spinner</item>
   </style>

</resources>

The spinner type android time picker must use a custom style like the code above while the material type doesn’t need a specific custom style.

Then, open MainActivity.kt file and put this code given below:

package com.thesimplycoder.simpletimepicker

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

   lateinit var timePicker: TimePickerHelper

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

       timePicker = TimePickerHelper(this, false, false)

       btSelectTime.setOnClickListener {
           showTimePickerDialog()
       }
   }

   private fun showTimePickerDialog() {
       val cal = Calendar.getInstance()
       val h = cal.get(Calendar.HOUR_OF_DAY)
       val m = cal.get(Calendar.MINUTE)

       timePicker.showDialog(h, m, object : TimePickerHelper.Callback {

           override fun onTimeSelected(hourOfDay: Int, minute: Int) {
               val hourStr = if (hourOfDay < 10) "0${hourOfDay}" else "${hourOfDay}"
               val minuteStr = if (minute < 10) "0${minute}" else "${minute}"
               tvTime.text = "${hourOfDay}:${minuteStr}"
           }
       })
   }
}

Running your Android time picker app

Cool! Try to run your app and select the date by pressing the “Select Time” button.

The left picture is a 12-hour view picker while the right picture is a 24-hour view. It is simply changing the is24HourView value between true or false.

If you want to change it to a Spinner type, just add additional parameters on TimePickerHelper.kt like this:

timePicker = TimePickerHelper(this, false, true)

The clock will display as a spinner type like this:

Where to go next?

You can download this full code here. Be sure to check my other post here about creating a simple Date Picker application similar to this post and how to create a custom navigation drawer application. I hope you like my post, comment and share it with love!

You may also like...

Join the discussion...

This site uses Akismet to reduce spam. Learn how your comment data is processed.