Implement customized TimePicker in Android using SnapTimePicker

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.
customized-time-picker

Some features of SnapTimePicker are:

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

Approach

  • Step 1: Add the support Library in build.gradle file and add dependency in the dependencies section.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    implementation 'com.akexorcist:snap-time-picker:1.0.0'      

    chevron_right

    
    

  • Step 2: 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 refrenced from app or some other resource files(such as XML layout).

    string.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

       
    <resources>
        <string name="app_name">GFG | SnapTimePicker</string>
        <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>       

    chevron_right

    
    

  • Step 3: 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

       
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
      
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:orientation="vertical"
            android:padding="30dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
      
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Your selected time is"
                android:textSize="16sp"/>
      
            <TextView
                android:id="@+id/selectedTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"/>
        </LinearLayout>
      
        <Button
            android:id="@+id/defaultTimePicker"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginStart="104dp"
            android:layout_marginBottom="112dp"
            android:text="Default Time Picker"
            android:textAllCaps="false"
            app:layout_constraintBottom_toTopOf="@+id/customTimePicker"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent" />
      
        <Button
            android:id="@+id/customTimePicker"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginStart="104dp"
            android:layout_marginBottom="212dp"
            android:text="Custom Time Picker"
            android:textAllCaps="false"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    chevron_right

    
    

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

    MainActivity.kt

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package com.madhav.maheshwari.snaptimepicker
      
    import android.os.Bundle
    import androidx.appcompat.app.AppCompatActivity
    import com.akexorcist.snaptimepicker.SnapTimePickerDialog
    import kotlinx.android.synthetic.main.activity_main.*
      
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
      
            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 = String.format(
                getString(
                    R.string.selected_time_format,
                    hour, minute
                )
            )
        }
    }

    chevron_right

    
    

    • Output: Run on Emulator

      Advantages:

      The advantages of using SnapTimePicker over simple TimePicker are:

      • SnapTimePicker can be customized according to the requirements.
      • It is very easy to use.
      • It gives IOS feel of an app.



      My Personal Notes arrow_drop_up

      Recommended Posts:

        Article Tags :

        2


        Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.