Improved horizontal display of quantitypicker

Author: burak.ozturk1

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityAddIcon.kt

@@ -2,11 +2,10 @@ package com.trendyol.uicomponents.quantitypicker
 
 import androidx.compose.animation.Animatable
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -16,7 +15,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -64,15 +63,8 @@ internal fun QuantityAddIcon(
             setTargetBackgroundColor.invoke(quantityData.getBackgroundColor(icons))
         }
     }
-
-    Icon(
-        painter = painterResource(id = icons.addIconResId),
-        tint = iconTintColor,
-        contentDescription = null,
+    Box(
         modifier = Modifier
-            .clip(CircleShape)
-            .background(animatedBackgroundColor.value)
-            .padding(8.dp)
             .clickable(
                 indication = null,
                 interactionSource = MutableInteractionSource(),
@@ -84,6 +76,16 @@ internal fun QuantityAddIcon(
                     }
                     onAddClick?.invoke()
                 }
-            )
-    )
+            )) {
+        Icon(
+            painter = painterResource(id = icons.addIconResId),
+            tint = iconTintColor,
+            contentDescription = null,
+            modifier = Modifier
+                .drawBehind {
+                    drawCircle(color = animatedBackgroundColor.value)
+                }
+                .padding(8.dp)
+        )
+    }
 }

libraries/quantity-picker-compose/src/main/java/com/trendyol/uicomponents/quantitypicker/QuantityPicker.kt

@@ -3,6 +3,7 @@ package com.trendyol.uicomponents.quantitypicker
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
@@ -139,28 +140,27 @@ internal fun HorizontalQuantityPicker(
                 color = quantityShape.backgroundColor,
                 shape = quantityShape.shape
             ),
-        verticalAlignment = Alignment.CenterVertically
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceEvenly
     ) {
 
         AnimatedVisibility(visible = quantityData.currentQuantity > 0 || showLoading) {
-            Row(
-                modifier = Modifier.padding(top = 2.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                QuantitySubtractIcon(
-                    icons = icons,
-                    quantityData = quantityData,
-                    onSubtractClick = onSubtractClick,
-                    currentQuantity = quantityData.currentQuantity
-                )
-                QuantityText(
-                    quantityData = quantityData,
-                    shape = quantityTextShape,
-                    style = textStyle,
-                    showLoading = showLoading,
-                    progressColor = progressColor,
-                )
-            }
+            QuantitySubtractIcon(
+                icons = icons,
+                quantityData = quantityData,
+                onSubtractClick = onSubtractClick,
+                currentQuantity = quantityData.currentQuantity
+            )
+        }
+
+        AnimatedVisibility(visible = quantityData.currentQuantity > 0 || showLoading) {
+            QuantityText(
+                quantityData = quantityData,
+                shape = quantityTextShape,
+                style = textStyle,
+                showLoading = showLoading,
+                progressColor = progressColor,
+            )
         }
         QuantityAddIcon(
             icons = icons,

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/QuantityPickerScreen.kt

@@ -4,18 +4,27 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Card
+import androidx.compose.material.Divider
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.trendyol.uicomponents.quantitypicker.QuantityIcons
+import com.trendyol.uicomponents.quantitypicker.QuantityPicker
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerDefaults
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerViewData
@@ -29,9 +38,13 @@ import kotlinx.coroutines.launch
 @Composable
 fun QuantityPickerScreen() {
     UIComponentsTheme {
-        Column {
+        Column(
+            modifier = Modifier.verticalScroll(rememberScrollState())
+        ) {
             ProductSliderSection()
             SingleProductSection()
+            ProductWeightOptionsSection()
+            ProductDetailSection()
         }
     }
 }
@@ -167,3 +180,82 @@ private fun ProductSliderSection() {
         }
     }
 }
+
+@Composable
+private fun ProductDetailSection() {
+    Card(
+        modifier = Modifier.padding(16.dp)
+    ) {
+        Column(
+            modifier = Modifier.padding(12.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(text = "Product Detail")
+            Divider()
+            QuantityPicker(
+                modifier = Modifier
+                    .height(42.dp)
+                    .width(150.dp),
+                quantityData = QuantityPickerViewData(currentQuantity = 2),
+                direction = QuantityPickerDirection.HORIZONTAL
+            )
+        }
+    }
+}
+
+@Composable
+private fun ProductWeightOptionsSection() {
+    val coroutineScope = rememberCoroutineScope()
+    val products = remember {
+        mutableStateListOf(
+            ProductCardData("0", "500 gr"),
+            ProductCardData("1", "1 kg"),
+            ProductCardData("2", "2 kg")
+        )
+    }
+
+    val onProductClick: (ProductCardData, Int) -> Unit = remember(products) {
+        { product: ProductCardData, quantity: Int ->
+            val newQuantity = product.quantityData.currentQuantity + quantity
+            coroutineScope.launch {
+                val index = products.indexOf(product)
+                products[index] = product.copy(isLoading = true)
+                coroutineScope.launch {
+                    delay(500)
+                    products[index] = product.copy(
+                        isLoading = false,
+                        quantityData = product.quantityData.copy(
+                            currentQuantity = newQuantity
+                        )
+                    )
+                }
+            }
+        }
+    }
+
+    Card(modifier = Modifier.padding(16.dp)) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            products.forEach { product ->
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(8.dp),
+                    horizontalArrangement = Arrangement.Absolute.SpaceBetween
+                ) {
+                    Text(text = product.title)
+                    QuantityPicker(
+                        icons = QuantityIcons.default.copy(addIconBackgroundColor = QuantityPickerDefaults.defaultColor),
+                        showLoading = product.isLoading,
+                        quantityData = product.quantityData,
+                        direction = QuantityPickerDirection.HORIZONTAL,
+                        onAddClick = { onProductClick(product, 1) },
+                        onSubtractClick = { onProductClick(product, -1) }
+                    )
+                }
+            }
+        }
+    }
+}

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ui/productcard/ProductCard.kt

@@ -15,6 +15,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.trendyol.uicomponents.quantitypicker.QuantityIcons
 import com.trendyol.uicomponents.quantitypicker.QuantityPicker
+import com.trendyol.uicomponents.quantitypicker.QuantityPickerDefaults
 import com.trendyol.uicomponents.quantitypicker.QuantityPickerDirection
 import com.trendyol.uicomponents.sample.compose.R
 import com.trendyol.uicomponents.samplecompose.ui.theme.Typography
@@ -54,8 +55,10 @@ fun ProductCard(
             val pickerAlignment = if (direction == QuantityPickerDirection.VERTICAL)
                 Alignment.TopEnd else Alignment.TopStart
             QuantityPicker(
-                icons = quantityPickerIcons,
                 modifier = modifier.align(pickerAlignment),
+                icons = quantityPickerIcons.copy(
+                    addIconBackgroundColor = QuantityPickerDefaults.defaultColor
+                ),
                 direction = direction,
                 quantityData = productData.quantityData,
                 showLoading = productData.isLoading,