Replace bubble calculation with position label text field

Author: LZRS

datacapture/src/main/java/com/google/android/fhir/datacapture/views/compose/SliderItem.kt

@@ -16,80 +16,48 @@
 
 package com.google.android.fhir.datacapture.views.compose
 
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsDraggedAsState
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.text.font.FontWeight
 import kotlin.math.roundToInt
 
 @Composable
 fun SliderItem(
-  startPosition: Float,
+  position: Float,
   steps: Int,
   valueRange: ClosedFloatingPointRange<Float>,
   enabled: Boolean,
   onPositionChanged: (Float) -> Unit,
 ) {
-  var sliderPosition by remember(startPosition) { mutableFloatStateOf(startPosition) }
-  val interactionSource =
-    remember(startPosition, steps, valueRange, enabled) { MutableInteractionSource() }
-  val isDragged by interactionSource.collectIsDraggedAsState()
-
-  Box {
-    if (isDragged) {
-      Surface(
-        modifier =
-          Modifier.layout { measurable, constraints ->
-            val placeable = measurable.measure(constraints)
-            val sliderWidth = constraints.maxWidth
-            val sliderValueNormalized =
-              (sliderPosition - valueRange.start) / (valueRange.endInclusive - valueRange.start)
-            val textX =
-              (sliderWidth * sliderValueNormalized - placeable.width / 2).coerceIn(
-                0f,
-                (sliderWidth - placeable.width).toFloat(),
-              )
-            val bottomPadding = 16.dp.toPx().roundToInt()
-            layout(placeable.width, placeable.height - bottomPadding) {
-              placeable.placeRelative(textX.roundToInt(), -bottomPadding)
-            }
-          },
-        shape = MaterialTheme.shapes.small,
-        color = MaterialTheme.colorScheme.primary,
-      ) {
-        Text(
-          text = sliderPosition.roundToInt().toString(),
-          color = MaterialTheme.colorScheme.onPrimary,
-          modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
-        )
-      }
-    }
+  var sliderPosition by remember(position) { mutableFloatStateOf(position) }
 
+  Column {
     Slider(
       value = sliderPosition,
       onValueChange = { sliderPosition = it },
       onValueChangeFinished = { onPositionChanged(sliderPosition) },
       steps = steps,
       valueRange = valueRange,
-      interactionSource = interactionSource,
-      modifier = Modifier.padding(top = 16.dp).fillMaxWidth().testTag(SLIDER_TAG),
+      modifier = Modifier.fillMaxWidth().testTag(SLIDER_TAG),
       enabled = enabled,
     )
+    Spacer(modifier = Modifier)
+    Text(
+      text = sliderPosition.roundToInt().toString(),
+      style = MaterialTheme.typography.displaySmall,
+      fontWeight = FontWeight.ExtraLight,
+    )
   }
 }
 

datacapture/src/main/java/com/google/android/fhir/datacapture/views/factories/SliderViewHolderFactory.kt

@@ -20,10 +20,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import com.google.android.fhir.datacapture.R
@@ -83,7 +81,7 @@ internal object SliderViewHolderFactory : QuestionnaireItemComposeViewHolderFact
           Header(questionnaireViewItem, showRequiredOrOptionalText = true)
           questionnaireViewItem.questionnaireItem.itemMedia?.let { MediaItem(it) }
           SliderItem(
-            startPosition = questionnaireViewItemAnswerValue,
+            position = questionnaireViewItemAnswerValue,
             steps = steps,
             valueRange = minValue..maxValue,
             enabled = !readOnly,