Merge pull request #9 from KvColorPalette/feature/make-editable-value-in-pickers

Feature/make editable value in pickers

Author: kavi707

README.md

@@ -26,13 +26,13 @@ Add the following dependency to your `build.gradle` / `build.gradle.kts` file:
 For Groovy - `build.gradle`:
 ````
 dependencies {
-    implementation 'com.github.KvColorPalette:KvColorPicker-Android:2.0.0'
+    implementation 'com.github.KvColorPalette:KvColorPicker-Android:2.1.0'
 }
 ````
 For Kotlin DSL - `build.gradle.kts`:
 ````
 dependencies {
-    implementation("com.github.KvColorPalette:KvColorPicker-Android:2.0.0")
+    implementation("com.github.KvColorPalette:KvColorPicker-Android:2.1.0")
 }
 ````
 

gradle/version-catalog/libs.versions.toml

@@ -1,7 +1,6 @@
 [versions]
 minSdkVersion = "26"
 compilerSdkVersion = "35"
-targetSdkVersion = "35"
 jvmVersion = "21"
 
 agp = "8.7.3"
@@ -12,13 +11,12 @@ junit = "4.13.2"
 junitVersion = "1.2.1"
 espressoCore = "3.6.1"
 lifecycleRuntimeKtx = "2.8.7"
-activityCompose = "1.10.0"
-composeBom = "2025.01.00"
+activityCompose = "1.10.1"
+composeBom = "2025.02.00"
 appcompat = "1.7.0"
 material = "1.12.0"
-composeMaterial = "1.7.6"
-composeNavigation = "2.8.5"
-kvColorPalette = "2.1.0"
+composeMaterial = "1.7.8"
+kvColorPalette = "2.1.1"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -36,7 +34,6 @@ androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-compose-material = { group = "androidx.compose.material", name = "material", version.ref = "composeMaterial"}
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
-androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" }
 
 kv-color-palette = { group = "com.github.KvColorPalette", name = "KvColorPalette-Android", version.ref = "kvColorPalette" }
 

kv-color-picker/gradle.properties

@@ -1,3 +1,3 @@
 kvColorPaletteGroupId=com.github.KvColorPalette
 kvColorPickerArtifactId=KvColorPicker-Android
-kvColorPickerVersion=2.0.0
+kvColorPickerVersion=2.1.0

kv-color-picker/src/main/kotlin/com/kavi/droid/color/picker/extension/Extension.kt

@@ -13,12 +13,15 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -32,6 +35,8 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -40,7 +45,6 @@ import com.kavi.droid.color.palette.KvColorPalette
 import com.kavi.droid.color.palette.model.KvColor
 import com.kavi.droid.color.palette.util.ColorUtil
 import com.kavi.droid.color.picker.R
-import com.kavi.droid.color.picker.extension.toColorRangeInt
 
 /**
  * A composable function that creates a slider for adjusting a float value associated with a color.
@@ -53,6 +57,9 @@ import com.kavi.droid.color.picker.extension.toColorRangeInt
  */
 @Composable
 internal fun ColorSlider(colorLabel: String, colorValueState: MutableState<Float>, color: Color) {
+
+    val sliderValue = remember { mutableStateOf(TextFieldValue("0")) }
+
     /**
      * Displays a slider for adjusting the given [colorValueState] associated with the provided [colorLabel].
      * The slider's active track color is set to [color].
@@ -69,22 +76,61 @@ internal fun ColorSlider(colorLabel: String, colorValueState: MutableState<Float
         )
         Slider(
             value = colorValueState.value,
-            onValueChange = colorValueState.component2(),
+            onValueChange = { newValue ->
+                colorValueState.value = newValue
+                sliderValue.value = TextFieldValue(toColorRange(colorValueState.value).toString())
+            },
             colors = SliderDefaults.colors(
                 thumbColor = MaterialTheme.colorScheme.primary,
                 activeTrackColor = color
             ),
             modifier = Modifier.weight(.8f)
         )
-        Text(
-            text = colorValueState.value.toColorRangeInt().toString(),
+        Box (
             modifier = Modifier
-                .width(25.dp)
-                .weight(.1f),
-            textAlign = TextAlign.End,
-            style = MaterialTheme.typography.bodySmall,
-            color = Color.Black
-        )
+                .width(80.dp)
+                .weight(.2f)
+                .border(1.dp, MaterialTheme.colorScheme.primary, RoundedCornerShape(20))
+        ) {
+            BasicTextField(
+                value = sliderValue.value,
+                onValueChange = {
+                    if (it.text != "" && it.text.toInt() > 255)
+                        sliderValue.value = TextFieldValue("255")
+                    else
+                        sliderValue.value = it
+
+                    colorValueState.value = sliderRange(sliderValue.value.text)
+                },
+                modifier = Modifier
+                    .width(80.dp)
+                    .padding(5.dp),
+                textStyle = TextStyle(fontSize = 12.sp, color = Color.Black, textAlign = TextAlign.Center),
+                maxLines = 1,
+                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
+            )
+        }
+
+    }
+}
+
+/**
+ * Converts a float value in the range [0, 1] to an integer color component in the range [0, 255].
+ *
+ * @return The integer representation of the color component.
+ */
+private fun toColorRange(value: Float): Int = (value * 255 + 0.5f).toInt()
+
+/**
+ * Converts a string value in the range [0, 255] to a float value of slider in tha range of [0, 1]
+ *
+ * @return The float representation of the slider component
+ */
+private fun sliderRange(value: String): Float {
+    return if (value == "") {
+        0f
+    } else {
+        (value.toFloat() / 255)
     }
 }
 
@@ -126,16 +172,16 @@ internal fun AlphaSlider(alphaValueState: MutableState<Float>, color: Color) {
             text = DecimalFormat("#.##").format(alphaValueState.value).toString(),
             modifier = Modifier
                 .width(25.dp)
-                .weight(.1f),
-            textAlign = TextAlign.End,
+                .weight(.2f),
+            textAlign = TextAlign.Center,
             style = MaterialTheme.typography.bodySmall,
             color = Color.Black
         )
     }
 }
 
 /**
- * A composable function that creates a slider for adjusting a float value associated with a color alpha valuw.
+ * A composable function that creates a slider for adjusting a float value associated with a color alpha value.
  *
  * @param label: String: The label to display alongside the slider.
  * @param valueState: MutableState<Float>: The mutable state holding the current value of the slider.