{"id":20691680,"url":"https://github.com/droppers/timerangepicker","last_synced_at":"2025-04-06T04:10:11.051Z","repository":{"id":46145951,"uuid":"322617387","full_name":"Droppers/TimeRangePicker","owner":"Droppers","description":"A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.","archived":false,"fork":false,"pushed_at":"2022-11-13T13:27:17.000Z","size":5986,"stargazers_count":308,"open_issues_count":6,"forks_count":41,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-30T02:09:49.331Z","etag":null,"topics":["android","java","kotlin","picker","range","slider","time-picker","time-range"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Droppers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-18T14:26:56.000Z","updated_at":"2025-03-26T07:23:56.000Z","dependencies_parsed_at":"2022-08-24T14:37:29.485Z","dependency_job_id":null,"html_url":"https://github.com/Droppers/TimeRangePicker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FTimeRangePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FTimeRangePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FTimeRangePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FTimeRangePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Droppers","download_url":"https://codeload.github.com/Droppers/TimeRangePicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430869,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","java","kotlin","picker","range","slider","time-picker","time-range"],"created_at":"2024-11-16T23:17:33.161Z","updated_at":"2025-04-06T04:10:10.900Z","avatar_url":"https://github.com/Droppers.png","language":"Kotlin","readme":"\u003ch1 align=\"center\"\u003e⏰ TimeRangePicker\u003c/h1\u003e\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./art/example-animated.gif\" width=\"250px\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.\n\u003c/p\u003e\n\n\u003ch6 align=\"center\"\u003e\n  \u003cimg src=\"https://maven-badges.herokuapp.com/maven-central/nl.joery.timerangepicker/timerangepicker/badge.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src= \"https://joery.nl/static/vector/logo.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;By \u003ca href=\"https://joery.nl\"\u003eJoery Droppers\u003c/a\u003e\n\u003c/h6\u003e\n\n## Screenshots\n\u003cimg src=\"./art/example-2.png\" width=\"200\" /\u003e \u003cimg src=\"./art/example-3.png\" width=\"200\" /\u003e\n\n## Playground app\n\u003ca href=\"https://play.google.com/store/apps/details?id=nl.joery.demo.timerangepicker\"\u003e\n\u003cimg src=\"./art/playground-demo.png\" width=\"350\" valign=\"middle\"\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg\" width=\"200\" valign=\"middle\"\u003e\u003c/a\u003e \n\u003cbr\u003e\u003cbr\u003e\nDownload the playground app from Google Play, with this app you can try out all features and even generate XML with your selected configuration.\n\n## Getting started\nThis library is available on Maven Central, add the following dependency to your \u003cb\u003ebuild.gradle\u003c/b\u003e:\n```gradle\nimplementation 'nl.joery.timerangepicker:timerangepicker:1.0.0'\n```\nDefine `TimeRangePicker` in your XML layout with custom attributes. See the [Configuration](#configuration) section for more information.\n```xml\n\u003cnl.joery.timerangepicker.TimeRangePicker\n    android:id=\"@+id/picker\"\n    android:layout_width=\"300dp\"\n    android:layout_height=\"wrap_content\"\n    app:trp_thumbIconEnd=\"@drawable/ic_alarm\"\n    app:trp_thumbIconStart=\"@drawable/ic_moon\"\n    app:trp_endTime=\"6:30\"\n    app:trp_startTime=\"22:00\" /\u003e\n```\n\nGet notified when the time or duration changes:\n```kotlin\npicker.setOnTimeChangeListener(object : TimeRangePicker.OnTimeChangeListener {\n    override fun onStartTimeChange(startTime: TimeRangePicker.Time) {\n        Log.d(\"TimeRangePicker\", \"Start time: \" + startTime)\n    }\n\n    override fun onEndTimeChange(endTime: TimeRangePicker.Time) {\n        Log.d(\"TimeRangePicker\", \"End time: \" + endTime.hour)\n    }\n\n    override fun onDurationChange(duration: TimeRangePicker.TimeDuration) {\n        Log.d(\"TimeRangePicker\", \"Duration: \" + duration.hour)\n    }\n})\n```\n\n## Managing picker programmatically\n### Managing time\nExamples of how to set and retrieve start time programmatically, identical properties are available for the end time.\n\n```kotlin\n// Set new time with 'Time' object to 12:00\npicker.startTime = TimeRangePicker.Time(12, 0)\n// Set new time by minutes\npicker.startTimeMinutes = 320\n```\n\n\u003cb\u003eTime\u003c/b\u003e\nWhen retrieving the start or end time, the library will provide a `TimeRangePicker.Time` object.\n- Use `time.hour`, `time.minute` or `time.totalMinutes` to retrieve literal time.\n- Use `time.calendar` to retrieve a `java.util.Calendar` object.\n- Use `time.localTime` to retrieve a `java.time.LocalTime` object. (Available since API 26)\n\n### Managing duration\nWhen retrieving the duration between the start and end time, the library will provide a `TimeRangePicker.Duration` object.\n- Use `duration.hour`, `duration.minute` or `duration.durationMinutes` to retrieve literal duration.\n- Use `duration.classicDuration` to retrieve a `javax.xml.datatype.Duration` object. (Available since API 8)\n- Use `duration.duration` to retrieve a `java.time.Duration` object. (Available since API 26)\n\n### Listening for starting and stopping of dragging\nThis listener is called whenever a user starts or stops dragging. It will also provide which thumb the user was dragging: \u003ci\u003estart, end, or both thumbs\u003c/i\u003e. You can return false in the `ònDragStart` method to prevent the user from dragging a thumb.\n\n```kotlin\npicker.setOnDragChangeListener(object : TimeRangePicker.OnDragChangeListener {\n    override fun onDragStart(thumb: TimeRangePicker.Thumb): Boolean {\n        // Do something on start dragging\n        return true // Return false to disallow the user from dragging a handle.\n    }\n\n    override fun onDragStop(thumb: TimeRangePicker.Thumb) {\n        // Do something on stop dragging\n    }\n})\n```\n\n## Configuration\nThe attributes listed below can be used to configure the look and feel of the picker. Note that all of these values can also be set programmatically using the properties.\n### Time\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_startTime\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the start time by providing a time with format \u003ci\u003eh:mm\u003c/i\u003e.\u003c/td\u003e\n        \u003ctd\u003e0:00\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_startTimeMinutes\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the start time by providing minutes between 0 and 1440 (24 hours).\u003c/td\u003e\n        \u003ctd\u003e0\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_endTime\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the end time by providing a time with format \u003ci\u003eh:mm\u003c/i\u003e.\u003c/td\u003e\n        \u003ctd\u003e8:00\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_endTimeMinutes\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the end time by providing minutes between 0 and 1440 (24 hours).\u003c/td\u003e\n        \u003ctd\u003e480\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_minDuration\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the minimum selectable duration by providing a duration with format \u003ci\u003eh:mm\u003c/i\u003e.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_maxDuration\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the maximum selectable duration by providing a duration with format \u003ci\u003eh:mm\u003c/i\u003e.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_maxDurationMinutes\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the maximum selectable duration by providing minutes between 0 and 1440 (24 hours).\u003c/td\u003e\n        \u003ctd\u003e480\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_minDurationMinutes\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the minimum selectable duration by providing minutes between 0 and 1440 (24 hours).\u003c/td\u003e\n        \u003ctd\u003e0\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_stepTimeMinutes\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eDetermines at what interval the time should be rounded. Setting it to a less accurate number (e.g. 10 minutes) makes it easier for a user to select his desired time.\u003c/td\u003e\n        \u003ctd\u003e10\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Slider\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderWidth\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe width of the slider wheel.\u003c/td\u003e\n        \u003ctd\u003e8dp\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe background color of the slider wheel.\u003c/td\u003e\n        \u003ctd\u003e#E1E1E1\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderRangeColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color of the active part of the slider wheel.\u003c/td\u003e\n        \u003ctd\u003e?android:colorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderRangeGradientStart\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003eSet the starting gradient color of the active part of the slider wheel.\u003cbr\u003e\u003cbr\u003ePlease note that both \u003ci\u003etrp_sliderRangeGradientStart\u003c/i\u003e and \u003ci\u003etrp_sliderRangeGradientEnd\u003c/i\u003e need to be configured.\u003cbr\u003e\u003cbr\u003e\u003cb\u003eTip:\u003c/b\u003e Set the \u003ci\u003ethumbColor\u003c/i\u003e to transparent to mimic the Apple iOS slider.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderRangeGradientStart\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003eOptional for gradient: set the middle gradient color of the active part of the slider wheel.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_sliderRangeGradientEnd\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003eSet the ending gradient color of the active part of the slider wheel.\u003cbr\u003e\u003cbr\u003ePlease note that both \u003ci\u003etrp_sliderRangeGradientStart\u003c/i\u003e and \u003ci\u003etrp_sliderRangeGradientEnd\u003c/i\u003e need to be configured.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Thumb\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbIconStart\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the start thumb icon.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbIconEnd\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the end thumb icon.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe size of both the starting and ending thumb.\u003c/td\u003e\n        \u003ctd\u003e28dp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbSizeActiveGrow\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe amount of growth of the size when a thumb is being dragged.\u003c/td\u003e\n        \u003ctd\u003e1.2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe background color of the thumbs.\u003c/td\u003e\n        \u003ctd\u003e?android:colorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbIconColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color (tint) of the icons inside the thumbs.\u003c/td\u003e\n        \u003ctd\u003ewhite\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_thumbIconSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe size of the thumb icons.\u003c/td\u003e\n        \u003ctd\u003e24dp\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Clock\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockVisible\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eWhether the clock face in the middle should be visible.\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockFace\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThere a two different clock faces (appearance of the inner clock) you can use, both mimicking the Clock apps:\u003cbr\u003e\n            \u003cb\u003eAPPLE\u003c/b\u003e\u003cbr\u003e\n             \u003cimg src=\"./art/face-apple.png\" width=\"200\"\u003e\u003cbr\u003e\n            \u003cb\u003eSAMSUNG\u003c/b\u003e\u003cbr\u003e\n             \u003cimg src=\"./art/face-samsung.png\" width=\"200\"\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eAPPLE\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockLabelSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe text size of the hour labels in the clock (1, 2, 3, etc.). This value is recommended to be set as scale-independent pixels (sp).\u003c/td\u003e\n        \u003ctd\u003e16sp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockLabelColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the text color of the hour labels in the clock.\u003c/td\u003e\n        \u003ctd\u003e?android:textColorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockIndicatorColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSet the color of the small time indicator lines in the clock.\u003c/td\u003e\n        \u003ctd\u003e?android:textColorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003etrp_clockRenderer\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            Set the clock renderer through passing the full class name (with packages).             \n            \u003cbr/\u003e \n            Note that, you should add \u003cb\u003e@Keep\u003c/b\u003e annotation to your custom renderer class.\n            \u003cbr/\u003e\n            The renderer class should have a public constructor with one parameter: TimeRangePicker.\n            \u003cbr/\u003e\n            Then renderer will be created through calling that constructor.\n        \u003c/td\u003e\n        \u003ctd\u003enl.joery.timerangepicker.DefaultClockRenderer\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Credits\n- Samsung's and Apple's Clock app have been used for inspiration, as they both implement this picker differently.\n\n## License\n```\nMIT License\n\nCopyright (c) 2021 Joery Droppers (https://github.com/Droppers)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this Software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroppers%2Ftimerangepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdroppers%2Ftimerangepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroppers%2Ftimerangepicker/lists"}