Skip to content

anhaki/PickTime-Compose

BranchesTags

Repository files navigation

⏰ 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! 🚀

API 21+ Jetpack Compose License: Apache 2.0

📦 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.4")

🚩 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

About

Smooth android jetpack compose time wheel picker library

Topics

android kotlin animation android-library jetpack time-picker compose wheelpicker android-libraries jetpack-compose wheel-picker jetpackcompose android-jetpack-compose jetpack-compose-library wheel-time-picker

Resources

Readme

License

Apache-2.0 license
Activity

Stars

24 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases 7

1.1.4 Latest
Jul 2, 2025
+ 6 releases

Packages

No packages published

Languages