make button ripple effect circular

UrAvgCode · Feb 16, 2025 · 9d59d40 · 9d59d40
1 parent a70af7e
commit 9d59d40
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/app/src/main/java/com/uravgcode/chooser/composables/buttons/AnimatedButton.kt b/app/src/main/java/com/uravgcode/chooser/composables/buttons/AnimatedButton.kt
@@ -22,7 +22,6 @@ import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -50,12 +49,12 @@ fun AnimatedButton(
             modifier = Modifier
                 .align(alignment)
                 .padding(24.dp)
-                .size(56.dp)
         ) {
             BaseButton(
                 onClick = onClick,
                 onLongClick = onLongClick,
                 content = content,
+                radius = 56.dp
             )
         }
     }

diff --git a/app/src/main/java/com/uravgcode/chooser/composables/buttons/BaseButton.kt b/app/src/main/java/com/uravgcode/chooser/composables/buttons/BaseButton.kt
@@ -17,10 +17,14 @@ package com.uravgcode.chooser.composables.buttons
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Surface
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -29,17 +33,20 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Dp
 
 
 @Composable
 @OptIn(ExperimentalFoundationApi::class)
 fun BaseButton(
     onClick: () -> Unit,
     onLongClick: (() -> Unit)? = null,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
+    radius: Dp
 ) {
     val haptic = LocalHapticFeedback.current
-    Surface(shape = CircleShape,
+    Surface(
+        shape = CircleShape,
         color = Color(0xFF2B2B2B),
         contentColor = Color.White,
         modifier = Modifier
@@ -53,8 +60,11 @@ fun BaseButton(
                         haptic.performHapticFeedback(HapticFeedbackType.LongPress)
                         it()
                     }
-                }, onLongClickLabel = "Settings"
+                },
+                interactionSource = remember { MutableInteractionSource() },
+                indication = ripple(radius = radius / 2)
             )
+            .size(radius)
     ) {
         Box(
             contentAlignment = Alignment.Center,