SquareWithProgressBar in jetpack compose Android

import androidx.compose.foundation.Canvas import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Clear import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.CornerRadius import androidx.compose.ui.geometry.Offset import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.YourApp.ui.theme.YourAppTheme @OptIn(ExperimentalMaterial3Api::class) @Composable fun SquareWithProgressBar(primaryColor: Color) { var progress by remember { mutableStateOf(0.5f) } var text by remember { mutableStateOf("50%") } Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Box( modifier = Modifier .size(200.dp) .background(Color.Gray.copy(alpha = 0.2f)) ) { Canvas( modifier = Modifier .fillMaxSize() ) { val barWidth = size.width - 8.dp.toPx() // Adjusted for 4dp thickness on each side val barHeight = size.height - 8.dp.toPx() // Adjusted for 4dp thickness on each side val barTop = 4.dp.toPx() // Start from the top corner val barEnd = barWidth * progress drawRoundRect( color = primaryColor, // Use the primary color passed as a parameter size = Size(barEnd, barHeight), topLeft = Offset(4.dp.toPx(), barTop), cornerRadius = CornerRadius(8.dp.toPx(), 8.dp.toPx()) ) } Text( text = text, style = MaterialTheme.typography.headlineSmall, color = Color.Black, modifier = Modifier.align(Alignment.Center) ) } Spacer(modifier = Modifier.height(16.dp)) OutlinedTextField( value = text, onValueChange = { text = it try { val percentage = it.removeSuffix("%").toFloat() / 100f progress = percentage.coerceIn(0f, 1f) } catch (e: NumberFormatException) { progress = 0f } }, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.Number ), singleLine = true, leadingIcon = { IconButton( onClick = { text = "" }, content = { Icon(imageVector = Icons.Default.Clear, contentDescription = null) } ) }, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = primaryColor, // Use the primary color for border unfocusedBorderColor = primaryColor, // Use the primary color for border cursorColor = primaryColor // Use the primary color for cursor ), modifier = Modifier .width(100.dp) .padding(2.dp) ) } } @Preview @Composable fun SquareWithProgressBarPreview() { YourAppTheme { Surface { SquareWithProgressBar(MaterialTheme.colorScheme.primary) } } }