migrated to custom checkbox and radiobutton

app/src/main/java/com/vanced/manager/ui/components/animation/SpringAnimation.kt

@@ -0,0 +1,26 @@
+package com.vanced.manager.ui.components.animation
+
+import android.annotation.SuppressLint
+import androidx.compose.animation.core.Transition
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.keyframes
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@SuppressLint("UnusedTransitionTargetStateParameter")
+@Composable
+fun <T> Transition<T>.springAnimation(
+    initialValue: Dp,
+    label: String
+) = animateDp(
+    transitionSpec = {
+        keyframes {
+            durationMillis = 250
+            initialValue - 8.dp at 50
+            initialValue + 8.dp at 150
+            initialValue at 250
+        }
+    },
+    label = label
+) { initialValue }

app/src/main/java/com/vanced/manager/ui/components/checkbox/ManagerCheckbox.kt

@@ -1,8 +1,6 @@
 package com.vanced.manager.ui.components.checkbox
 
 import android.annotation.SuppressLint
-import androidx.compose.animation.core.animateDp
-import androidx.compose.animation.core.keyframes
 import androidx.compose.animation.core.updateTransition
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
@@ -13,7 +11,8 @@ import androidx.compose.material.icons.rounded.Done
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.Dp
+import com.vanced.manager.ui.components.animation.springAnimation
 import com.vanced.manager.ui.components.card.ManagerCard
 import com.vanced.manager.ui.components.color.contentColorForColor
 import com.vanced.manager.ui.components.color.managerAccentColor
@@ -23,33 +22,15 @@ import com.vanced.manager.ui.components.color.managerThemedCardColor
 @SuppressLint("UnusedTransitionTargetStateParameter")
 @Composable
 fun ManagerCheckbox(
+    size: Dp,
     isChecked: Boolean,
     onCheckedChange: (isChecked: Boolean) -> Unit
 ) {
     val accentColor = managerAccentColor()
+    val iconInitialSize = size / 1.6f
     val transition = updateTransition(targetState = isChecked, label = "Checked")
-    val cardSize by transition.animateDp(
-        transitionSpec = {
-             keyframes {
-                 durationMillis = 250
-                 32.dp at 50
-                 48.dp at 150
-                 40.dp at 250
-             }
-        },
-        label = "Checkbox size"
-    ) { 40.dp }
-    val iconSize by transition.animateDp(
-        transitionSpec = {
-            keyframes {
-                durationMillis = 250
-                18.dp at 50
-                30.dp at 150
-                24.dp at 250
-            }
-        },
-        label = "Icon size"
-    ) { 24.dp }
+    val cardSize by transition.springAnimation(initialValue = size, label = "Checkbox Size")
+    val iconSize by transition.springAnimation(initialValue = iconInitialSize, label = "Icon size")
     val cardColor = managerAnimatedColor(if (isChecked) accentColor else managerThemedCardColor())
     val iconTint = managerAnimatedColor(if (isChecked) contentColorForColor(cardColor) else accentColor)
 

app/src/main/java/com/vanced/manager/ui/components/list/CheckboxItem.kt

@@ -1,20 +1,15 @@
 package com.vanced.manager.ui.components.list
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Checkbox
-import androidx.compose.material.CheckboxDefaults
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.Text
 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.unit.dp
 import androidx.compose.ui.unit.sp
-import com.vanced.manager.ui.components.color.managerAccentColor
+import com.vanced.manager.ui.components.checkbox.ManagerCheckbox
 import com.vanced.manager.ui.components.color.managerTextColor
+import com.vanced.manager.ui.components.modifier.managerClickable
 
 @Composable
 fun CheckboxItem(
@@ -22,27 +17,26 @@ fun CheckboxItem(
     isChecked: Boolean,
     onCheck: (Boolean) -> Unit = {}
 ) {
-    fun toggle() {
-        onCheck(isChecked)
-    }
+    val toggle = { onCheck(!isChecked) }
 
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable { toggle() }
+            .managerClickable(onClick = toggle)
             .padding(horizontal = 8.dp, vertical = 6.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Checkbox(
-            checked = isChecked,
-            onCheckedChange = {
+        Box(
+            modifier = Modifier.size(30.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            ManagerCheckbox(
+                size = 24.dp,
+                isChecked = isChecked
+            ) {
                 toggle()
-            },
-            colors = CheckboxDefaults.colors(
-                checkedColor = managerAccentColor(),
-                uncheckedColor = Color.LightGray
-            )
-        )
+            }
+        }
         Text(
             modifier = Modifier.padding(start = 12.dp),
             text = text,

app/src/main/java/com/vanced/manager/ui/components/list/RadiobuttonItem.kt

@@ -1,26 +1,21 @@
 package com.vanced.manager.ui.components.list
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.RadioButton
-import androidx.compose.material.RadioButtonDefaults
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.Text
 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.unit.dp
 import androidx.compose.ui.unit.sp
-import com.vanced.manager.ui.components.color.managerAccentColor
 import com.vanced.manager.ui.components.color.managerTextColor
+import com.vanced.manager.ui.components.radiobutton.ManagerRadiobutton
 
 @Composable
 fun <T> RadiobuttonItem(
     text: String,
     tag: T,
-    selected: Boolean,
+    isSelected: Boolean,
     onSelect: (tag: T) -> Unit
 ) {
     val onClick = {
@@ -34,14 +29,16 @@ fun <T> RadiobuttonItem(
             .padding(horizontal = 8.dp, vertical = 6.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        RadioButton(
-            selected = selected,
-            onClick = onClick,
-            colors = RadioButtonDefaults.colors(
-                selectedColor = managerAccentColor(),
-                unselectedColor = Color.LightGray
+        Box(
+            modifier = Modifier.size(30.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            ManagerRadiobutton(
+                size = 24.dp,
+                isSelected = isSelected,
+                onClick = onClick
             )
-        )
+        }
         Text(
             modifier = Modifier.padding(start = 12.dp),
             text = text,

app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxDialogPreference.kt

@@ -1,6 +1,7 @@
 package com.vanced.manager.ui.components.preference
 
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
@@ -9,6 +10,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.toMutableStateList
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import com.vanced.manager.R
 import com.vanced.manager.ui.components.button.ManagerThemedTextButton
 import com.vanced.manager.ui.components.list.CheckboxItem
@@ -33,7 +35,7 @@ fun CheckboxDialogPreference(
             selectedButtons.any { selectedButton ->
                 button.key == selectedButton
             }
-        }.joinToString(separator = ", ") { it.title },
+        }.sortedBy { it.title }.joinToString(separator = ", ") { it.title },
         trailing = trailing,
         buttons = { isShown ->
             ManagerThemedTextButton(
@@ -50,7 +52,7 @@ fun CheckboxDialogPreference(
         }
     ) {
         LazyColumn(
-            modifier = Modifier
+            modifier = Modifier.heightIn(max = 400.dp)
         ) {
             items(buttons) { button ->
                 val (title, key) = button

app/src/main/java/com/vanced/manager/ui/components/preference/CheckboxPreference.kt

@@ -2,6 +2,7 @@ package com.vanced.manager.ui.components.preference
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.unit.dp
 import com.vanced.manager.ui.components.checkbox.ManagerCheckbox
 import com.vanced.manager.ui.preferences.ManagerPreference
 import kotlinx.coroutines.launch
@@ -29,7 +30,8 @@ fun CheckboxPreference(
         trailing = {
             ManagerCheckbox(
                 isChecked = isChecked,
-                onCheckedChange = { onClick() }
+                onCheckedChange = { onClick() },
+                size = 40.dp
             )
         }
     )

app/src/main/java/com/vanced/manager/ui/components/preference/RadiobuttonDialogPreference.kt

@@ -44,7 +44,7 @@ fun RadiobuttonDialogPreference(
                 RadiobuttonItem(
                     text = title,
                     tag = key,
-                    selected = currentSelection == key,
+                    isSelected = currentSelection == key,
                     onSelect = {
                         currentSelection = it
                     }

app/src/main/java/com/vanced/manager/ui/components/radiobutton/ManagerRadiobutton.kt

@@ -0,0 +1,33 @@
+package com.vanced.manager.ui.components.radiobutton
+
+import android.annotation.SuppressLint
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import com.vanced.manager.ui.components.animation.springAnimation
+import com.vanced.manager.ui.components.card.ManagerCard
+import com.vanced.manager.ui.components.color.managerAccentColor
+import com.vanced.manager.ui.components.color.managerAnimatedColor
+import com.vanced.manager.ui.components.color.managerThemedCardColor
+
+@SuppressLint("UnusedTransitionTargetStateParameter")
+@Composable
+fun ManagerRadiobutton(
+    size: Dp,
+    isSelected: Boolean,
+    onClick: () -> Unit
+) {
+    val accentColor = managerAccentColor()
+    val transition = updateTransition(targetState = isSelected, label = "Selected")
+    val cardSize by transition.springAnimation(initialValue = size, label = "Radiobutton Size")
+    val cardColor = managerAnimatedColor(if (isSelected) accentColor else managerThemedCardColor())
+    ManagerCard(
+        modifier = Modifier.size(cardSize),
+        onClick = onClick,
+        backgroundColor = cardColor,
+        content = {}
+    )
+}