Implement customized TimePicker in Android using SnapTimePicker

Last Updated : 12 Feb, 2025

Android TimePicker is a user interface control for selecting the time in either 24-hour format or AM/PM mode. It is used to ensure that users pick a valid time for the day in the application. The default TimePicker can be customized by using the SnapTimePicker in Android.

Features of SnapTimePicker

Some key features provided by SnapTimePicker are mentioned below:

Selectable time range support.
Text and color customization.
IOS Time Picker like with Material Design style.

Step by Step Implementation

Step 1: Add necessary dependencies

Add the support Library in build.gradle.kts file and add dependency in the dependencies section.

implementation ("com.akexorcist:snap-time-picker:1.0.3")

Step 2: Update string.xml file

Add the following code in string.xml file in values directory. In this file add all string used in the app. These string can be referenced from app or some other resource files(such as XML layout).

string.xml:

<resources>
    <string name="app_name">Demo</string>
    
    <!--add the following below to your existing resource file-->
    
    <string name="title">Please select the time</string>
    <string name="selected_time_prefix">Your selected time is</string>

    <!-- %1$s:%2$s will add the string in HH:MM format 
    for more understanding follow the link at the end -->
    <string name="selected_time_format">%1$s:%2$s</string>

    <!-- >> means >> for more understanding follow 
    the link at the end -->
    <string name="time_prefix">>></string>

    <!-- << means << for more understanding follow 
    the link at the end -->
    <string name="time_suffix"><<</string>
</resources>

Step 3: Working with activity_main.xml file

Add the following code in activity_main.xml file. In this file add the Buttons to select the time and the TextView to display the selected time.

activity_main.xml:

<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"
    android:background="@color/white"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="@string/selected_time_prefix"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/selectedTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="-"
        android:textSize="48sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />


    <Button
        android:id="@+id/defaultTimePicker"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Default Time Picker"
        android:textAllCaps="false"
        app:layout_constraintBottom_toTopOf="@+id/customTimePicker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/selectedTime"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/customTimePicker"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Custom Time Picker"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/defaultTimePicker" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Step 4: Working with MainActivity.kt

Add the following code in MainActivity.kt file. In this file add onClickListener() method to the buttons so that whenever user click on them a TimePicker dialog will be created.

MainActivity.kt:

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.akexorcist.snaptimepicker.SnapTimePickerDialog

class MainActivity : AppCompatActivity() {
    private lateinit var defaultTimePicker: Button
    private lateinit var customTimePicker: Button
    private lateinit var selectedTime: TextView

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


        defaultTimePicker = findViewById(R.id.defaultTimePicker)
        customTimePicker = findViewById(R.id.customTimePicker)
        selectedTime = findViewById(R.id.selectedTime)

        defaultTimePicker.setOnClickListener {
            // Default TimePicker
            SnapTimePickerDialog.Builder().apply {
                setTitle(R.string.title)
                setTitleColor(android.R.color.white)
            }.build().apply {
                setListener {
                    // when the user select time onTimePicked
                    // function get invoked automatically which
                    // sets the time in textViewTime.
                        hour, minute ->
                    onTimePicked(hour, minute)
                }
            }.show(
                supportFragmentManager,
                SnapTimePickerDialog.TAG
            )
        }

        customTimePicker.setOnClickListener {
            // Custom TimePicker
            SnapTimePickerDialog.Builder().apply {
                setTitle(R.string.title)
                setPrefix(R.string.time_prefix)
                setSuffix(R.string.time_suffix)
                setThemeColor(R.color.colorAccent)
                setTitleColor(android.R.color.black)
            }.build().apply {
                setListener {
                    // when the user select time onTimePicked
                    // function get invoked automatically which
                    // sets the time in textViewTime.
                        hour, minute ->
                    onTimePicked(hour, minute)
                }
            }.show(
                supportFragmentManager,
                SnapTimePickerDialog.TAG
            )
        }
    }

    private fun onTimePicked(selectedHour: Int, selectedMinute: Int) {
        // Pads the string to the specified length
        // at the beginning with the specified
        // character or space.
        val hour = selectedHour.toString()
            .padStart(2, '0')
        val minute = selectedMinute.toString()
            .padStart(2, '0')
        selectedTime.text = getString(R.string.selected_time_format, hour, minute)
    }
}