Updated on 2026-08-14

app/src/main/java/com/tangem/tap/features/details/ui/appsettings/AppSettingsScreen.kt

@@ -11,8 +11,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Switch
-import androidx.compose.material.SwitchDefaults
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
@@ -31,6 +29,7 @@ import androidx.compose.ui.unit.sp
 import com.tangem.tap.common.compose.TangemTypography
 import com.tangem.tap.features.details.redux.PrivacySetting
 import com.tangem.tap.features.details.ui.common.SettingsScreensScaffold
+import com.tangem.tap.features.details.ui.common.TangemSwitch
 import com.tangem.wallet.R
 
 @Composable
@@ -125,7 +124,7 @@ fun AppSettingsElement(
                 color = colorResource(id = R.color.text_secondary),
             )
         }
-        Switch(
+        TangemSwitch(
             checked = checked,
             onCheckedChange = {
                 onCheckedChange(
@@ -135,14 +134,8 @@ fun AppSettingsElement(
                     onDialogStateChange = onDialogStateChange,
                 )
             },
-            colors = SwitchDefaults.colors(
-                checkedThumbColor = colorResource(id = R.color.control_key),
-                uncheckedThumbColor = colorResource(id = R.color.control_key),
-                checkedTrackColor = colorResource(id = R.color.control_checked),
-                uncheckedTrackColor = colorResource(id = R.color.icon_informative),
-            ),
             modifier = modifier
-                .padding(start = 20.dp, end = 20.dp),
+                .padding(20.dp),
         )
     }
 }

app/src/main/java/com/tangem/tap/features/details/ui/common/TangemSwitch.kt

@@ -1,87 +1,116 @@
 package com.tangem.tap.features.details.ui.common
 
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.indication
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Card
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.Fill
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.tangem.wallet.R
 
 @Composable
 fun TangemSwitch(
-    checked: Boolean,
-    onCheckedChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
-    width: Dp = 48.dp,
-    height: Dp = 24.dp,
-    checkedTrackColor: Color = colorResource(id = R.color.control_checked),
-    uncheckedTrackColor: Color = colorResource(id = R.color.icon_informative),
-    selectorColor: Color = colorResource(id = R.color.background_secondary),
-    gapBetweenThumbAndTrackEdge: Dp = 3.dp,
+    enabledColor: Color = colorResource(id = R.color.control_checked),
+    disabledColor: Color = colorResource(id = R.color.icon_informative),
+    size: Dp = 48.dp,
+    checked: Boolean = false,
+    onCheckedChange: (Boolean) -> Unit,
 ) {
-    val thumbRadius = (height / 2) - gapBetweenThumbAndTrackEdge
-    val animatePosition = animateFloatAsState(
-        targetValue = if (checked)
-            with(LocalDensity.current) { (width - thumbRadius - gapBetweenThumbAndTrackEdge).toPx() }
-        else
-            with(LocalDensity.current) { (thumbRadius + gapBetweenThumbAndTrackEdge).toPx() },
-    )
-
-    Canvas(
-        modifier = modifier
-            .size(width = width, height = height)
-            .pointerInput(Unit) {
-                detectTapGestures(
-                    onTap = {
-                        onCheckedChange(checked)
-                    },
-                )
-            },
+    val transition = updateTransition(checked, label = "SwitchState")
+    val color by transition.animateColor(
+        transitionSpec = {
+            tween(200, easing = FastOutLinearInEasing)
+        },
+        label = "",
     ) {
-        drawRoundRect(
-            color = if (checked) checkedTrackColor else uncheckedTrackColor,
-            cornerRadius = CornerRadius(x = 35.dp.toPx(), y = 35.dp.toPx()),
-            style = Fill,
-        )
-
-        drawCircle(
-            color = selectorColor,
-            radius = thumbRadius.toPx(),
-            center = Offset(
-                x = animatePosition.value,
-                y = size.height / 2,
-            ),
-        )
+        when (it) {
+            true -> enabledColor
+            false -> disabledColor
+        }
+    }
+    val interactionSource = remember { MutableInteractionSource() }
+    val clickable = Modifier.clickable(
+        interactionSource = interactionSource,
+        indication = null,
+    ) {
+        if (!checked) {
+            onCheckedChange(true)
+        } else {
+            onCheckedChange(false)
+        }
     }
 
-    Spacer(modifier = Modifier.height(18.dp))
-}
-
-@Preview
-@Composable
-fun TangemSwitchPreview() {
-    Column(
-        modifier = Modifier.fillMaxSize(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally,
+    Box(
+        modifier = Modifier
+            .then(clickable)
+            .indication(
+                interactionSource = MutableInteractionSource(),
+                indication = rememberRipple(
+                    bounded = true,
+                    radius = 100.dp,
+                    color = Color.Transparent,
+                ),
+            ),
     ) {
-        TangemSwitch(true, {})
+        BoxWithConstraints(
+            modifier = modifier
+                .width(size)
+                .height(size / 2)
+                .indication(MutableInteractionSource(), null)
+                .background(color = color, shape = RoundedCornerShape(100)),
+            contentAlignment = Alignment.CenterStart,
+        ) {
+            val roundCardSize = this.maxWidth / 2
+            val xOffset by transition.animateDp(
+                transitionSpec = {
+                    tween(150, easing = LinearOutSlowInEasing)
+                },
+                label = "xOffset",
+            ) { state ->
+                when (state) {
+                    false -> 0.dp
+                    true -> this.maxWidth - roundCardSize
+                }
+            }
+
+            Card(
+                modifier = Modifier
+                    .size(this.maxWidth / 2)
+                    .offset(x = xOffset, y = 0.dp)
+                    .padding(3.dp),
+                shape = RoundedCornerShape(100),
+                backgroundColor = Color.White,
+                border = BorderStroke(
+                    if (!checked) 0.5.dp else 0.dp,
+                    color = Color.LightGray,
+                ),
+            ) {
+            }
+        }
     }
 }

app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsViewModel.kt

@@ -28,6 +28,7 @@ class DetailsViewModel(private val store: Store<AppState>) {
                 SettingsElement.PrivacyPolicy -> {
                     if (state.privacyPolicyUrl != null) it else null
                 }
+                SettingsElement.AppSettings -> null // TODO: until we implement settings from this screen
                 else -> it
             }
         }