⏰ PickTime - Jetpack Compose Time Wheel Picker

PickTime is a highly customizable and smooth time wheel picker library for Jetpack Compose.
It updates the value on every scroll and provides a super fluid user experience! 🚀

---

📦 Installation

1. Add JitPack to settings.gradle.kts:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        // add this line of code 👇
        maven { url = uri("https://jitpack.io") }
    }
}

2. Add the dependency to build.gradle.kts:

implementation("com.github.anhaki:PickTime-Compose:1.1.2")

---

🚩 Usage

Usage of the wheel pickers (Code and Preview)

Code	Preview
PickHourMinute( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, )
PickHourMinute( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, timeFormat = TimeFormat.HOUR_12, )
PickHourMinuteSecond( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, initialSecond = second, onSecondChange = { second = it }, )
PickDate( initialDay = day, onDayChange = { day = it }, initialMonth = month, onMonthChange = { month = it }, initialYear = year, onYearChange = { year = it }, )
PickDate( initialDay = day, onDayChange = { day = it }, initialMonth = month, onMonthChange = { month = it }, initialYear = year, onYearChange = { year = it }, monthList = listOf( "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" )

---

✨ Features

• Easy to Use
  Quickly implement hour, minute, second, and date pickers with just a few lines of code.

• Highly Customizable

  • Fully customize text color, size, font family, and font weight using PickTimeTextStyle.
  • Adjust spacing between elements with verticalSpace and horizontalSpace.
  • Customize focus indicators with PickTimeFocusIndicator.
  • Switch between 24-hour and 12-hour formats using timeFormat (TimeFormat.HOUR_12 / TimeFormat.HOUR_24).
  • Enable or disable looping (infinite scrolling) with the isLooping parameter.

• Modern and Responsive Design

  • Easily style the picker for infinite possibility, including custom container backgrounds and focus indicator shapes.

• Flexible for Different Use Cases

  • Pick only hour and minute (PickHourMinute).
  • Pick hour, minute, and second (PickHourMinuteSecond).
  • Pick a full date (PickDate) with optional (monthList) that can be used if different language is needed and (yearRange) for custom year range.

---

🛠️ Example of use

Example of use of the wheel pickers (Code and Preview)

Code	Preview
var hour by remember { mutableIntStateOf(0) } var minute by remember { mutableIntStateOf(0) } PickHourMinute( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFF29778E), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFF29778E), fontSize = 18.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), verticalSpace = 10.dp, horizontalSpace = 15.dp, containerColor = Color.White, isLooping = true, extraRow = 1, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = false, background = Color(0xFFCCEDF9), shape = RoundedCornerShape(12.dp), border = BorderStroke(2.dp, Color(0xFF87CDE6)), ) )
var hour by remember { mutableIntStateOf(0) } var minute by remember { mutableIntStateOf(0) } PickHourMinute( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFF5F5BAC), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFFAEABE3), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), verticalSpace = 10.dp, horizontalSpace = 15.dp, containerColor = Color.White, isLooping = false, extraRow = 2, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = true, background = Color(0xFFE1D8FF), shape = RectangleShape, border = BorderStroke(0.dp, Color(0xFF87CDE6)), ) )
var hour by remember { mutableIntStateOf(0) } var minute by remember { mutableIntStateOf(0) } PickHourMinute( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFFFF0303), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFFF9DBBB), fontSize = 18.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), timeFormat = TimeFormat.HOUR_12, verticalSpace = 5.dp, horizontalSpace = 5.dp, containerColor = Color(0xFF4E6E81), isLooping = true, extraRow = 2, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = true, background = Color(0xFFF9DBBB), shape = RectangleShape, border = BorderStroke(0.dp, Color(0xFFF9DBBB)), ) )
var hour by remember { mutableIntStateOf(0) } var minute by remember { mutableIntStateOf(0) } var second by remember { mutableIntStateOf(0) } PickHourMinuteSecond( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, initialSecond = second, onSecondChange = { second = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFF5A504B), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFFBDB9B7), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), verticalSpace = 10.dp, horizontalSpace = 15.dp, containerColor = Color.White, isLooping = true, extraRow = 1, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = false, background = Color(0xFFFFF2E9), shape = RoundedCornerShape(100.dp), border = BorderStroke(2.dp, Color(0xFFCE9468)), ) )
var hour by remember { mutableIntStateOf(0) } var minute by remember { mutableIntStateOf(0) } var second by remember { mutableIntStateOf(0) } PickHourMinuteSecond( initialHour = hour, onHourChange = { hour = it }, initialMinute = minute, onMinuteChange = { minute = it }, initialSecond = second, onSecondChange = { second = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFFFFDDAB), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFFBFBD85), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), verticalSpace = 10.dp, horizontalSpace = 20.dp, containerColor = Color(0xFF5F8B4C), isLooping = false, extraRow = 2, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = false, background = Color(0xFF945034), shape = RoundedCornerShape(100.dp), border = BorderStroke(2.dp, Color(0xFF945034)), ) )
var day by remember { mutableIntStateOf(28) } var month by remember { mutableIntStateOf(1) } var year by remember { mutableIntStateOf(2025) } PickDate( initialDay = day, onDayChange = { day = it }, initialMonth = month, onMonthChange = { month = it }, initialYear = year, onYearChange = { year = it }, selectedTextStyle = PickTimeTextStyle( color = Color(0xFF4B8673), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFF4B8673), fontSize = 18.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, ), verticalSpace = 10.dp, horizontalSpace = 15.dp, containerColor = Color(0xFFFFFFFF), isLooping = true, extraRow = 1, focusIndicator = PickTimeFocusIndicator( enabled = false, ) )
var day by remember { mutableIntStateOf(28) } var month by remember { mutableIntStateOf(1) } var year by remember { mutableIntStateOf(2025) } PickDate( initialDay = day, onDayChange = { day = it }, initialMonth = month, onMonthChange = { month = it }, initialYear = year, onYearChange = { year = it }, monthList = listOf( "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ), yearRange = (2021..2030), selectedTextStyle = PickTimeTextStyle( color = Color(0xFFFFFFFF), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), unselectedTextStyle = PickTimeTextStyle( color = Color(0xFF8B8C92), fontSize = 26.sp, fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, ), verticalSpace = 10.dp, horizontalSpace = 10.dp, containerColor = Color(0xFF171925), isLooping = false, extraRow = 1, focusIndicator = PickTimeFocusIndicator( enabled = true, widthFull = false, background = Color(0xFFF21D8E), shape = RoundedCornerShape(15.dp), border = BorderStroke(0.dp, Color(0xFFF21D8E)), ) )

---

📄 License

This project is licensed under the Apache License 2.0.

---

Made with ❤️ by anhaki