add another border progress sample

Author: SmartToolFactory

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter6_graphics/Tutorial6_13BorderProgressTimer.kt

@@ -1,5 +1,6 @@
 package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
 
+import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
@@ -13,15 +14,22 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Button
+import androidx.compose.material.Slider
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CarRental
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -35,6 +43,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import kotlin.math.roundToInt
 
 @Preview
@@ -46,6 +55,11 @@ fun Tutorial6_13Screen() {
 @Composable
 private fun TutorialContent() {
 
+ BorderProgressSample1()
+// BorderProgressSample2()
+}
+
+private fun BorderProgressSample1() {
  val startDurationInSeconds = 20
  var currentTime by remember {
  mutableStateOf(startDurationInSeconds)
@@ -256,4 +270,91 @@ private fun TutorialContent() {
  )
 
  }
+}
+
+@Preview
+@Composable
+fun BorderProgressSample2() {
+
+ val pathMeasure by remember { mutableStateOf(PathMeasure()) }
+
+ val path = remember {
+ Path()
+ }
+
+ val pathWithProgress by remember {
+ mutableStateOf(Path())
+ }
+
+ val animatable = remember {
+ Animatable(0f)
+ }
+
+ val isFilled by remember {
+ derivedStateOf { animatable.value == 100f }
+ }
+
+ val coroutineScope = rememberCoroutineScope()
+
+ Column(
+ modifier = Modifier.fillMaxSize().padding(16.dp)
+ ) {
+
+// Text("Progress: ${animatable.value.toInt()}")
+ Slider(
+ value = animatable.value,
+ onValueChange = {
+ coroutineScope.launch {
+ animatable.animateTo(it)
+ }
+ },
+ valueRange = 0f..100f
+ )
+
+ Icon(
+ modifier = Modifier.size(128.dp)
+ .drawBehind {
+
+ if (path.isEmpty) {
+ path.addRoundRect(
+ RoundRect(
+ Rect(offset = Offset.Zero, size),
+ cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx())
+ )
+ )
+
+ pathMeasure.setPath(path, forceClosed = false)
+ }
+
+ pathWithProgress.reset()
+
+ pathMeasure.setPath(path, forceClosed = false)
+ pathMeasure.getSegment(
+ startDistance = 0f,
+ stopDistance = pathMeasure.length * animatable.value / 100f,
+ pathWithProgress,
+ startWithMoveTo = true
+ )
+
+ drawPath(
+ path = path,
+ style = Stroke(
+ 4.dp.toPx()
+ ),
+ color = Color.Black
+ )
+
+ drawPath(
+ path = pathWithProgress,
+ style = Stroke(
+ 4.dp.toPx()
+ ),
+ color = Color.Blue
+ )
+ },
+ tint = if (isFilled) Color.Blue else Color.Black,
+ imageVector = Icons.Default.CarRental,
+ contentDescription = null
+ )
+ }
 }