Classic Material Time Picker

Classic Material TimePicker

Simple, customisable TimePicker created in the "old" Android API 16 style.

Restyled with Material 2.0 guidelines and powered by RecyclerView.

Classic Material TimePicker	"Old" Android Api 16 TimePicker

High Resolution Demo:

https://giant.gfycat.com/LastingImpassionedGelada.webm

Setup

This library is being distributed via JitPack

AndroidX libraries are required.

Step 1:
Add Jitpack repository in root build.gradle at the end of repositories:

allprojects {
  repositories {
   maven { url 'https://jitpack.io' }
  }
}

Step 2:
Add dependency in app project:

dependencies {
  implementation 'com.github.michaldrabik:classicmaterialtimepicker:1.0.0'
}

Usage

See Sample App for full example.

Create and show time picker's CmtpDialogFragment:

val timePicker = CmtpDialogFragment.newInstance()
timePicker.show(supportFragmentManager, "TimePickerTag")

Set initial time with setInitialTime12() or setInitialTime24() method:

val timePicker = CmtpDialogFragment.newInstance()

// Set initial time and initialise time picker in 12-hour time format.
timePicker.setInitialTime12(5, 15, PM)

// Set initial time and initialise time picker in 24-hour time format.
timePicker.setInitialTime24(23, 30)

timePicker.show(supportFragmentManager, "TimePickerTag")

Selected time can be retrieved with one of the listeners:

val timePicker = CmtpDialogFragment.newInstance()

// Set 12-hour time format listener.
// Use this listener if time picker was initialised in 12-hour format.
timePicker.setOnTime12PickedListener { time12 ->
  // Do something with picked time.
})

// Set 24-hour time format listener.
// Use this listener if time picker was initialised in 24-hour format.
timePicker.setOnTime24PickedListener { time24 ->
  // Do something with picked time.
})

timePicker.show(supportFragmentManager, "TimePickerTag")

CmtpDialogFragment is being used as a host for CmtpTimePickerView view.

You can use this view by itself or host it in a different Android component (like Bottom Sheet)

Customization

Each element of the time picker can be customized:

Dialog background

Override following style in your app with your own background drawable:

<style name="CmtpDialogFrameStyle" parent="CmtpDialogTheme">
  <item name="android:windowBackground">@drawable/your_background_drawable</item>
</style>

Dialog positive/negative button text

Provide custom texts while creating DialogFragment's instance:

val timePicker = CmtpDialogFragment.newInstance("Pick Time", "Hide")
timePicker.show(supportFragmentManager, "TimePickerTag")

Dialog positive button style

Override following style in your app with your own text style:

<style name="CmtpDialogPositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
  <item name="android:textColor">#FF0000</item>
  <!-- other properties -->
</style>

Dialog negative button style

Override following style in your app with your own text style:

<style name="CmtpDialogNegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
  <item name="android:textColor">#FF0000</item>
  <!-- other properties -->
</style>

Custom text frame drawable, text color and size

Override following style in your app with your own text style:

<style name="CmtpViewTheme">
  <item name="cmtpTextFrameDrawable">@drawable/custom_text_frame</item>
  <item name="cmtpTextColor">#000000</item>
  <item name="cmtpTextSize">20sp</item>
</style>

GitHub