Merge pull request #2 from binayshaw7777/develop

Added Shape Customization
binayshaw7777 · Sep 16, 2023 · b7a13d1 · b7a13d1
2 parents 7eb6f3d + b34580e
commit b7a13d1
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 52 deletions.
diff --git a/app/src/main/java/com/binayshaw7777/kotstep/MainActivity.kt b/app/src/main/java/com/binayshaw7777/kotstep/MainActivity.kt
@@ -26,6 +26,7 @@ import androidx.compose.material.icons.filled.AddCircle
 import androidx.compose.material.icons.filled.Build
 import androidx.compose.material.icons.filled.Face
 import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.outlined.KeyboardArrowDown
 import androidx.compose.material.icons.outlined.KeyboardArrowRight
@@ -54,6 +55,8 @@ import com.binayshaw7777.kotstep.ui.horizontal.HorizontalSequencedStepper
 import com.binayshaw7777.kotstep.ui.theme.KotStepTheme
 import com.binayshaw7777.kotstep.ui.vertical.VerticalIconStepper
 import com.binayshaw7777.kotstep.ui.vertical.VerticalSequencedStepper
+import com.binayshaw7777.kotstep.utils.StepperItemShape
+import com.binayshaw7777.kotstep.utils.StepperItemShape.Companion.getShapeFromEnum
 import com.binayshaw7777.kotstep.utils.StepperTypes
 
 class MainActivity : ComponentActivity() {
@@ -82,10 +85,16 @@ fun MainPreview() {
 
         var expanded by remember { mutableStateOf(false) }
 
+        var expandedShapeMenu by remember { mutableStateOf(false) }
+
         var currentStepperType by remember {
             mutableStateOf(StepperTypes.HORIZONTAL_SEQUENCED_STEPPER)
         }
 
+        var currentStepperItemShape by remember {
+            mutableStateOf(StepperItemShape.CIRCLE_SHAPE)
+        }
+
         var stepItemSize by remember {
             mutableStateOf(35)
         }
@@ -103,56 +112,89 @@ fun MainPreview() {
             verticalArrangement = Arrangement.SpaceBetween,
         ) {
 
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .wrapContentSize(Alignment.TopStart)
+            Row(
+                modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween
             ) {
-                IconButton(onClick = { expanded = true }) {
-                    Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
+                Box {
+                    IconButton(onClick = { expanded = true }) {
+                        Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
+                    }
+                    DropdownMenu(
+                        expanded = expanded,
+                        onDismissRequest = { expanded = false }
+                    ) {
+                        DropdownMenuItem(
+                            text = { Text("Horizontal Sequenced Stepper") },
+                            onClick = {
+                                currentStepperType = StepperTypes.HORIZONTAL_SEQUENCED_STEPPER
+                            },
+                            leadingIcon = {
+                                Icon(
+                                    Icons.Outlined.KeyboardArrowRight,
+                                    contentDescription = null
+                                )
+                            })
+                        DropdownMenuItem(
+                            text = { Text("Vertical Sequenced Stepper") },
+                            onClick = {
+                                currentStepperType = StepperTypes.VERTICAL_SEQUENCED_STEPPER
+                            },
+                            leadingIcon = {
+                                Icon(
+                                    Icons.Outlined.KeyboardArrowDown,
+                                    contentDescription = null
+                                )
+                            })
+                        DropdownMenuItem(
+                            text = { Text("Horizontal Icon Stepper") },
+                            onClick = { currentStepperType = StepperTypes.HORIZONTAL_ICON_STEPPER },
+                            leadingIcon = {
+                                Icon(
+                                    Icons.Outlined.KeyboardArrowRight,
+                                    contentDescription = null
+                                )
+                            })
+                        DropdownMenuItem(
+                            text = { Text("Vertical Icon Stepper") },
+                            onClick = { currentStepperType = StepperTypes.VERTICAL_ICON_STEPPER },
+                            leadingIcon = {
+                                Icon(
+                                    Icons.Outlined.KeyboardArrowDown,
+                                    contentDescription = null
+                                )
+                            })
+                    }
                 }
-                DropdownMenu(
-                    expanded = expanded,
-                    onDismissRequest = { expanded = false }
-                ) {
-                    DropdownMenuItem(
-                        text = { Text("Horizontal Sequenced Stepper") },
-                        onClick = {
-                            currentStepperType = StepperTypes.HORIZONTAL_SEQUENCED_STEPPER
-                        },
-                        leadingIcon = {
-                            Icon(
-                                Icons.Outlined.KeyboardArrowRight,
-                                contentDescription = null
-                            )
-                        })
-                    DropdownMenuItem(
-                        text = { Text("Vertical Sequenced Stepper") },
-                        onClick = { currentStepperType = StepperTypes.VERTICAL_SEQUENCED_STEPPER },
-                        leadingIcon = {
-                            Icon(
-                                Icons.Outlined.KeyboardArrowDown,
-                                contentDescription = null
-                            )
-                        })
-                    DropdownMenuItem(
-                        text = { Text("Horizontal Icon Stepper") },
-                        onClick = { currentStepperType = StepperTypes.HORIZONTAL_ICON_STEPPER },
-                        leadingIcon = {
-                            Icon(
-                                Icons.Outlined.KeyboardArrowRight,
-                                contentDescription = null
-                            )
-                        })
-                    DropdownMenuItem(
-                        text = { Text("Vertical Icon Stepper") },
-                        onClick = { currentStepperType = StepperTypes.VERTICAL_ICON_STEPPER },
-                        leadingIcon = {
-                            Icon(
-                                Icons.Outlined.KeyboardArrowDown,
-                                contentDescription = null
-                            )
-                        })
+
+                Box {
+                    IconButton(onClick = { expandedShapeMenu = true }) {
+                        Icon(Icons.Default.Menu, contentDescription = "Localized description")
+                    }
+                    DropdownMenu(
+                        expanded = expandedShapeMenu,
+                        onDismissRequest = { expandedShapeMenu = false }
+                    ) {
+                        DropdownMenuItem(
+                            text = { Text("RectangleShape") },
+                            onClick = { currentStepperItemShape = StepperItemShape.RECTANGLE_SHAPE }
+                        )
+                        DropdownMenuItem(
+                            text = { Text("CircleShape") },
+                            onClick = { currentStepperItemShape = StepperItemShape.CIRCLE_SHAPE }
+                        )
+                        DropdownMenuItem(
+                            text = { Text("CutCornerShape") },
+                            onClick = {
+                                currentStepperItemShape = StepperItemShape.CUT_CORNER_SHAPE
+                            }
+                        )
+                        DropdownMenuItem(
+                            text = { Text("RoundedCornerShape") },
+                            onClick = {
+                                currentStepperItemShape = StepperItemShape.ROUNDED_CORNER_SHAPE
+                            }
+                        )
+                    }
                 }
             }
 
@@ -162,6 +204,7 @@ fun MainPreview() {
                         totalSteps = totalSteps,
                         currentStep = currentStep,
                         stepSize = stepItemSize.dp,
+                        stepShape = getShapeFromEnum(currentStepperItemShape),
                         lineThickness = lineThickness.dp,
                         completedColor = MaterialTheme.colorScheme.primary,
                         incompleteColor = Color.Gray,
@@ -176,6 +219,7 @@ fun MainPreview() {
                         totalSteps = totalSteps,
                         currentStep = currentStep,
                         stepSize = stepItemSize.dp,
+                        stepShape = getShapeFromEnum(currentStepperItemShape),
                         lineThickness = lineThickness.dp,
                         completedColor = MaterialTheme.colorScheme.primary,
                         incompleteColor = Color.Gray,
@@ -190,6 +234,7 @@ fun MainPreview() {
                         totalSteps = totalSteps,
                         currentStep = currentStep,
                         stepSize = stepItemSize.dp,
+                        stepShape = getShapeFromEnum(currentStepperItemShape),
                         lineThickness = lineThickness.dp,
                         completedColor = MaterialTheme.colorScheme.primary,
                         incompleteColor = Color.Gray,
@@ -216,6 +261,7 @@ fun MainPreview() {
                         totalSteps = totalSteps,
                         currentStep = currentStep,
                         stepSize = stepItemSize.dp,
+                        stepShape = getShapeFromEnum(currentStepperItemShape),
                         lineThickness = lineThickness.dp,
                         completedColor = MaterialTheme.colorScheme.primary,
                         incompleteColor = Color.Gray,

diff --git a/app/src/main/java/com/binayshaw7777/kotstep/utils/StepperItemShape.kt b/app/src/main/java/com/binayshaw7777/kotstep/utils/StepperItemShape.kt
@@ -0,0 +1,36 @@
+package com.binayshaw7777.kotstep.utils
+
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.CutCornerShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+
+enum class StepperItemShape {
+    RECTANGLE_SHAPE,
+    CIRCLE_SHAPE,
+    ROUNDED_CORNER_SHAPE,
+    CUT_CORNER_SHAPE;
+
+    companion object {
+        fun getShapeFromEnum(shape: StepperItemShape): Shape {
+            return when (shape) {
+                RECTANGLE_SHAPE -> {
+                    RectangleShape
+                }
+
+                CIRCLE_SHAPE -> {
+                    CircleShape
+                }
+
+                ROUNDED_CORNER_SHAPE -> {
+                    RoundedCornerShape(20)
+                }
+
+                CUT_CORNER_SHAPE -> {
+                    CutCornerShape(20)
+                }
+            }
+        }
+    }
+}
diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/components/HorizontalIconStep.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/components/HorizontalIconStep.kt
@@ -17,6 +17,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -56,6 +57,7 @@ fun HorizontalIconStep(
     isCompleted: Boolean,
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
+    stepShape: Shape,
     incompleteColor: Color = Color.Gray,
     completedColor: Color = Color.Blue,
     checkMarkColor: Color = Color.White,
@@ -100,7 +102,7 @@ fun HorizontalIconStep(
                     bottom.linkTo(parent.bottom)
                     start.linkTo(parent.start)
                 },
-            shape = CircleShape,
+            shape = stepShape,
             border = borderStrokeColor,
             color = itemColor,
         ) {

diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/components/HorizontalStep.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/components/HorizontalStep.kt
@@ -17,6 +17,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -55,6 +56,7 @@ fun HorizontalStep(
     isCompleted: Boolean,
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
+    stepShape: Shape,
     incompleteColor: Color = Color.Gray,
     completedColor: Color = Color.Blue,
     checkMarkColor: Color = Color.White,
@@ -97,7 +99,7 @@ fun HorizontalStep(
                     bottom.linkTo(parent.bottom)
                     start.linkTo(parent.start)
                 },
-            shape = CircleShape,
+            shape = stepShape,
             border = borderStrokeColor,
             color = itemColor,
         ) {

diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/components/VerticalIconStep.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/components/VerticalIconStep.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -60,6 +61,7 @@ fun VerticalIconStep(
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
     stepIcon: ImageVector,
+    stepShape: Shape,
     incompleteColor: Color = Color.Gray,
     completedColor: Color = Color.Blue,
     checkMarkColor: Color = Color.White,
@@ -133,7 +135,7 @@ fun VerticalIconStep(
                     end.linkTo(parent.end)
                     start.linkTo(parent.start)
                 },
-            shape = CircleShape,
+            shape = stepShape,
             border = borderStrokeColor,
             color = itemColor,
         ) {

diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/components/VerticalStep.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/components/VerticalStep.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -60,6 +61,7 @@ fun VerticalStep(
     isCompleted: Boolean,
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
+    stepShape: Shape,
     incompleteColor: Color = Color.Gray,
     completedColor: Color = Color.Blue,
     checkMarkColor: Color = Color.White,
@@ -133,7 +135,7 @@ fun VerticalStep(
 //                    bottom.linkTo(parent.bottom)
                     start.linkTo(parent.start)
                 },
-            shape = CircleShape,
+            shape = stepShape,
             border = borderStrokeColor,
             color = itemColor,
         ) {

diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/ui/horizontal/HorizontalIconStepper.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/ui/horizontal/HorizontalIconStepper.kt
@@ -1,10 +1,12 @@
 package com.binayshaw7777.kotstep.ui.horizontal
 
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -39,6 +41,7 @@ fun HorizontalIconStepper(
     currentStep: Int = 1,
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
+    stepShape: Shape = CircleShape,
     completedColor: Color = Color.Blue,
     incompleteColor: Color = Color.Gray,
     checkMarkColor: Color = Color.White,
@@ -69,6 +72,7 @@ fun HorizontalIconStepper(
                 stepTitle = descriptionList[stepAtIt - 1],
                 lineThickness = lineThickness,
                 stepSize = stepSize,
+                stepShape = stepShape,
                 isCurrent = stepAtIt == currentStep,
                 isVisited = stepAtIt < currentStep,
                 isCompleted = stepAtIt == totalSteps,

diff --git a/kotstep/src/main/java/com/binayshaw7777/kotstep/ui/horizontal/HorizontalSequencedStepper.kt b/kotstep/src/main/java/com/binayshaw7777/kotstep/ui/horizontal/HorizontalSequencedStepper.kt
@@ -1,10 +1,12 @@
 package com.binayshaw7777.kotstep.ui.horizontal
 
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.binayshaw7777.kotstep.components.HorizontalStep
@@ -35,6 +37,7 @@ fun HorizontalSequencedStepper(
     currentStep: Int = 1,
     lineThickness: Dp = 1.dp,
     stepSize: Dp = 28.dp,
+    stepShape: Shape = CircleShape,
     completedColor: Color = Color.Blue,
     incompleteColor: Color = Color.Gray,
     checkMarkColor: Color = Color.White,
@@ -64,6 +67,7 @@ fun HorizontalSequencedStepper(
                 stepTitle = descriptionList[stepAtIt - 1],
                 lineThickness = lineThickness,
                 stepSize = stepSize,
+                stepShape = stepShape,
                 isCurrent = stepAtIt == currentStep,
                 isVisited = stepAtIt < currentStep,
                 isCompleted = stepAtIt == totalSteps,