https://github.com/mindinventory/androidcircularslider

Create Highly Customizable Circular Slider made with Jetpack compose
https://github.com/mindinventory/androidcircularslider

android android-library androidcircularslider circularslider jetpack-compose jetpack-compose-library kotlin slider

Last synced: about 1 month ago
JSON representation

Create Highly Customizable Circular Slider made with Jetpack compose

• Host: GitHub
• URL: https://github.com/mindinventory/androidcircularslider
• Owner: Mindinventory
• License: mit
• Created: 2022-08-30T08:38:05.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T13:05:21.000Z (almost 2 years ago)
• Last Synced: 2023-04-25T12:40:49.444Z (over 1 year ago)
• Topics: android, android-library, androidcircularslider, circularslider, jetpack-compose, jetpack-compose-library, kotlin, slider
• Language: Kotlin
• Homepage: https://www.mindinventory.com/android-application-development.php
• Size: 5.5 MB
• Stars: 55
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### Android Circular Slider  [![](https://jitpack.io/v/Mindinventory/AndroidCircularSlider.svg)](https://jitpack.io/#Mindinventory/AndroidCircularSlider) ![](https://img.shields.io/github/languages/top/Mindinventory/AndroidCircularSlider)

Create Highly Customizable Circular Slider made with Jetpack compose

### Preview

![image](https://github.com/Mindinventory/AndroidCircularSlider/blob/master/art/circularSliderDemo.gif)

### Features

- Great look and feel with lots of customization

- Customisable circular slider

- Customisable simple thumb

- Simple to Implement

### Attributes

| Attribute | Description                               |

| ------ |-------------------------------------------|

| ```maxNum``` | To provide maximum number for the slider  |

| ```radiusCircle``` | Radius of the circular slider             |

| ```percentageFontSize``` | Font size of the percentage text          |

| ```percentageColor``` | Color of the percentage text              |

| ```progressWidth``` | Width of the Progress                     |

| ```animDuration``` | To set duration for the sliding animation |

| ```animDelay``` | To set delay for the sliding animation    |

| ```strokeCap``` | To set strokes of the ends                |

| ```thumbRadius``` | To set the radius of the thumb            |

| ```tickColor``` | To set the color of the minute-like clock arms | 

| ```tickhighlightedColor``` | To set the color of the hour-like clock arms | 

| ```dialColor``` | Dial color                                |

| ```progressColor``` | Color of the progress bar                 |

| ```startThumbCircleColor``` | Initial thumb color                       |

| ```thumbColor``` | Thumb color                               |

| ```trackColor``` | Track color                               |

| ```trackOpacity``` | Opacity of the track                      |

| ```trackWidth``` | Width of the track                        |

| ```isDisabled``` | Flag to set enabled/disabled circular slider |

| ```staticProgress``` | Static progress in case if isDisabled is true |

| ```onTouchEnabled``` | To enable thumb movement based on touch event |

| ```onDragEnabled``` | To enable thumb movement on drag movement |

### :thinking: How to use it?

1. Add this in your root build.gradle at the end of repositories:

```

allprojects {

          repositories {

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

          }

}

```

2. Add the dependency in your app's build.gradle file:

```

dependencies {

    implementation 'com.github.Mindinventory:AndroidCircularSlider:X.X.X'

}

```

3. Use this code inside your composable:

```

fun CircularProgressBar(

    maxNum: Int = 50,

    radiusCircle: Dp = 150.dp,

    percentageFontSize: TextUnit = 28.sp,

    percentageColor: Color = DeepBlue,

    progressWidth: Float = 28f,

    animDuration: Int = 1000,

    animDelay: Int = 0,

    strokeCap: StrokeCap = StrokeCap.Round,

    thumbRadius: Float = 40f,

    tickColor: Color = SkyBlue,

    tickhighlightedColor: Color = TextWhite,

    dialColor: Color = DullPurple,

    progressColor: Brush = Brush.linearGradient(colors = listOf(SkyBlue, Color.White)),

    startThumbCircleColor: List = listOf(SkyBlue, SkyBlue),

    thumbColor: List = listOf(Color.White, Color.White),

    trackColor: Color = Color.Black,

    trackOpacity: Float = 0.10f,

    trackWidth: Float = 20f,

    isDisabled: Boolean = false,

    staticProgress: Float = 0f,

)

```

# LICENSE!

AndroidCircularSlider is [MIT-licensed](/LICENSE).

# Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.