Skip to content

Commit 3909100

Browse files
akashmiakashmi
authored
Merge pull request #5 from Mindinventory/develop
- Added support for the drag & click both events to change slider position.
2 parents 3f488bf + ee0a674 commit 3909100

File tree

7 files changed

+87
-45
lines changed

7 files changed

+87
-45
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
/.idea/workspace.xml
88
/.idea/navEditor.xml
99
/.idea/assetWizardSettings.xml
10+
/.idea
1011
.DS_Store
1112
/build
1213
/captures

‎README.md‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,30 @@ Create Highly Customizable Circular Slider made with Jetpack compose
1313
- Simple to Implement
1414

1515
### Attributes
16-
| Attribute | Description |
17-
| ------ | ------ |
18-
| ```maxNum``` | To provide maximum number for the slider |
19-
| ```radiusCircle``` | Radius of the circular slider |
20-
| ```percentageFontSize``` | Font size of the percentage text |
21-
| ```percentageColor``` | Color of the percentage text |
22-
| ```progressWidth``` | Width of the Progress |
16+
| Attribute | Description |
17+
| ------ |-------------------------------------------|
18+
| ```maxNum``` | To provide maximum number for the slider |
19+
| ```radiusCircle``` | Radius of the circular slider |
20+
| ```percentageFontSize``` | Font size of the percentage text |
21+
| ```percentageColor``` | Color of the percentage text |
22+
| ```progressWidth``` | Width of the Progress |
2323
| ```animDuration``` | To set duration for the sliding animation |
24-
| ```animDelay``` | To set delay for the sliding animation |
25-
| ```strokeCap``` | To set strokes of the ends |
26-
| ```thumbRadius``` | To set the radius of the thumb |
24+
| ```animDelay``` | To set delay for the sliding animation |
25+
| ```strokeCap``` | To set strokes of the ends |
26+
| ```thumbRadius``` | To set the radius of the thumb |
2727
| ```tickColor``` | To set the color of the minute-like clock arms |
2828
| ```tickhighlightedColor``` | To set the color of the hour-like clock arms |
29-
| ```dialColor``` | Dial color |
30-
| ```progressColor``` | Color of the progress bar |
31-
| ```startThumbCircleColor``` | Initial thumb color |
32-
| ```thumbColor``` | Thumb color |
33-
| ```trackColor``` | Track color |
34-
| ```trackOpacity``` | Opacity of the track |
35-
| ```trackWidth``` | Width of the track |
29+
| ```dialColor``` | Dial color |
30+
| ```progressColor``` | Color of the progress bar |
31+
| ```startThumbCircleColor``` | Initial thumb color |
32+
| ```thumbColor``` | Thumb color |
33+
| ```trackColor``` | Track color |
34+
| ```trackOpacity``` | Opacity of the track |
35+
| ```trackWidth``` | Width of the track |
3636
| ```isDisabled``` | Flag to set enabled/disabled circular slider |
3737
| ```staticProgress``` | Static progress in case if isDisabled is true |
38+
| ```onTouchEnabled``` | To enable thumb movement based on touch event |
39+
| ```onDragEnabled``` | To enable thumb movement on drag movement |
3840

3941

4042
### :thinking: How to use it?

‎app/build.gradle‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ plugins {
44
}
55

66
android {
7-
compileSdk 32
7+
compileSdk 33
88

99
defaultConfig {
1010
applicationId "com.github.Mindinventory.circularslider"
1111
minSdk 21
12-
targetSdk 32
13-
versionCode 1
14-
versionName "1.0"
12+
targetSdk 33
13+
versionCode 2
14+
versionName "1.1"
1515

1616
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
1717
vectorDrawables {
@@ -47,15 +47,15 @@ android {
4747

4848
dependencies {
4949

50-
implementation 'androidx.core:core-ktx:1.7.0'
50+
implementation 'androidx.core:core-ktx:1.9.0'
5151
implementation "androidx.compose.ui:ui:$compose_version"
5252
implementation "androidx.compose.material:material:$compose_version"
5353
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
54-
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
55-
implementation 'androidx.activity:activity-compose:1.3.1'
54+
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
55+
implementation 'androidx.activity:activity-compose:1.6.1'
5656
testImplementation 'junit:junit:4.13.2'
57-
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
58-
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
57+
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
58+
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
5959
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
6060
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
6161
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

‎app/src/main/java/com/github/Mindinventory/circularslider/MiProjectPlanning.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,8 @@ fun MiProjectPlanning() {
127127
},
128128
currentUpdatedValue = "${currentItem.roundToInt()}/$maxNumber",
129129
maxNum = maxNumber,
130-
130+
onTouchEnabled = true,
131+
onDragEnabled = true
131132
)
132133
}
133134
}

‎build.gradle‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
buildscript {
22
ext {
3-
compose_version = '1.1.0-beta01'
3+
compose_version = '1.3.1'
44
}
55
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
66
plugins {
77
id 'com.android.application' version '7.2.1' apply false
88
id 'com.android.library' version '7.2.1' apply false
9-
id 'org.jetbrains.kotlin.android' version '1.5.31' apply false
9+
id 'org.jetbrains.kotlin.android' version '1.7.10' apply false
1010
}
1111

1212
task clean(type: Delete) {

‎circularSlider/build.gradle‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ plugins {
44
}
55

66
android {
7-
compileSdk 32
7+
compileSdk 33
88

99
defaultConfig {
1010
minSdk 21
11-
targetSdk 32
11+
targetSdk 33
1212

1313
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
1414
consumerProguardFiles "consumer-rules.pro"
@@ -39,15 +39,15 @@ android {
3939

4040
dependencies {
4141

42-
implementation 'androidx.core:core-ktx:1.7.0'
42+
implementation 'androidx.core:core-ktx:1.9.0'
4343
implementation "androidx.compose.ui:ui:$compose_version"
4444
implementation "androidx.compose.material:material:$compose_version"
4545
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
46-
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
47-
implementation 'androidx.activity:activity-compose:1.3.1'
46+
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
47+
implementation 'androidx.activity:activity-compose:1.6.1'
4848
testImplementation 'junit:junit:4.13.2'
49-
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
50-
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
49+
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
50+
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
5151
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
5252
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
5353
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

‎circularSlider/src/main/java/com/github/Mindinventory/circularslider/CircularProgress.kt‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import androidx.compose.animation.core.tween
66
import androidx.compose.foundation.Canvas
77
import androidx.compose.foundation.clickable
88
import androidx.compose.foundation.gestures.detectDragGestures
9+
import androidx.compose.foundation.gestures.detectTapGestures
910
import androidx.compose.foundation.layout.Box
1011
import androidx.compose.foundation.layout.size
1112
import androidx.compose.foundation.shape.CircleShape
@@ -18,15 +19,17 @@ import androidx.compose.ui.draw.rotate
1819
import androidx.compose.ui.geometry.Offset
1920
import androidx.compose.ui.graphics.*
2021
import androidx.compose.ui.graphics.drawscope.Stroke
21-
import androidx.compose.ui.input.pointer.consumeAllChanges
2222
import androidx.compose.ui.input.pointer.pointerInput
2323
import androidx.compose.ui.text.font.FontWeight
2424
import androidx.compose.ui.unit.Dp
2525
import androidx.compose.ui.unit.TextUnit
2626
import androidx.compose.ui.unit.dp
2727
import androidx.compose.ui.unit.sp
2828
import com.github.Mindinventory.circularslider.clock_arms.models.ClockLineType
29-
import com.github.Mindinventory.circularslider.ui.*
29+
import com.github.Mindinventory.circularslider.ui.DeepBlue
30+
import com.github.Mindinventory.circularslider.ui.DullPurple
31+
import com.github.Mindinventory.circularslider.ui.SkyBlue
32+
import com.github.Mindinventory.circularslider.ui.TextWhite
3033
import kotlin.math.*
3134

3235
/**
@@ -77,7 +80,9 @@ fun CircularProgressBar(
7780
isDisabled: Boolean = false,
7881
staticProgress: Float = 0f,
7982
currentProgressToBeReturned: (Float) -> Unit, //Float type value to be returned..to it's parent composable using State hoisting - we're passing currentPercentage to the parent composable
80-
currentUpdatedValue: String = ""
83+
currentUpdatedValue: String = "",
84+
onTouchEnabled: Boolean = true,
85+
onDragEnabled: Boolean = true,
8186
) {
8287
var radius by remember {
8388
mutableStateOf(0f)
@@ -111,7 +116,8 @@ fun CircularProgressBar(
111116

112117
var currentValue by remember { mutableStateOf(0f) }
113118
LaunchedEffect(key1 = animatedAngle) {
114-
currentValue = if (angle < 1.5) 0f else ((animatedAngle + 3f) * maxNum / 360) // + 3f to show 100% in the slider
119+
currentValue =
120+
if (angle < 1.5) 0f else ((animatedAngle + 3f) * maxNum / 360) // + 3f to show 100% in the slider
115121
}
116122

117123
var currentPercentage by remember { mutableStateOf(0f) }
@@ -137,10 +143,42 @@ fun CircularProgressBar(
137143
modifier = Modifier
138144
.size(radiusCircle * 2f)
139145
.pointerInput(Unit) {
140-
detectDragGestures { change, dragAmount ->
141-
handleCenter += dragAmount
142-
angle = getRotationAngle(handleCenter, shapeCenter)
143-
change.consumeAllChanges()
146+
if (onDragEnabled && !onTouchEnabled) {
147+
detectDragGestures { change, dragAmount ->
148+
handleCenter += dragAmount
149+
angle = getRotationAngle(handleCenter, shapeCenter)
150+
change.consume()
151+
}
152+
}
153+
if (onTouchEnabled && !onDragEnabled) {
154+
155+
detectTapGestures(
156+
onTap = { offset ->
157+
handleCenter = Offset.Zero + offset
158+
angle = getRotationAngle(handleCenter, shapeCenter)
159+
},
160+
)
161+
}
162+
}
163+
.pointerInput(Unit) {
164+
if (onTouchEnabled && onDragEnabled) {
165+
166+
detectTapGestures(
167+
onTap = { offset ->
168+
handleCenter = Offset.Zero + offset
169+
angle = getRotationAngle(handleCenter, shapeCenter)
170+
}
171+
)
172+
}
173+
}
174+
.pointerInput(Unit) {
175+
if (onTouchEnabled && onDragEnabled) {
176+
177+
detectDragGestures { change, dragAmount ->
178+
handleCenter += dragAmount
179+
angle = getRotationAngle(handleCenter, shapeCenter)
180+
change.consume()
181+
}
144182
}
145183
}
146184
) {
@@ -297,7 +335,7 @@ fun CircularProgressBar(
297335
)
298336
}
299337
Text(
300-
text = if (currentUpdatedValue == "") "${currentPercentage.roundToInt()} %" else currentUpdatedValue ?: "-",
338+
text = if (currentUpdatedValue == "") "${currentPercentage.roundToInt()} %" else currentUpdatedValue,
301339
color = percentageColor,
302340
fontSize = percentageFontSize,
303341
fontWeight = FontWeight.Bold,

0 commit comments

Comments
 (0)