feat(ui): Improve settings UI

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SectionTitle.kt

@@ -0,0 +1,53 @@
+package app.myzel394.alibi.ui.components.SettingsScreen.Tiles
+
+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.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DividerTitle(
+    modifier: Modifier = Modifier,
+    title: String,
+    description: String,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Divider(
+                modifier = Modifier
+                    .weight(1f)
+                    .align(Alignment.CenterVertically),
+            )
+            Text(
+                title,
+                style = MaterialTheme.typography.headlineSmall,
+                color = MaterialTheme.colorScheme.onSurface,
+            )
+            Divider(
+                modifier = Modifier
+                    .weight(1f)
+                    .align(Alignment.CenterVertically),
+            )
+        }
+        Text(
+            description,
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/components/atoms/GlobalSwitch.kt

@@ -1,5 +1,6 @@
 package app.myzel394.alibi.ui.components.atoms
 
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -10,6 +11,7 @@ import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -24,12 +26,21 @@ fun GlobalSwitch(
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
 ) {
+    val backgroundColor by animateColorAsState(
+        targetValue = if (checked) MaterialTheme.colorScheme.secondaryContainer else MaterialTheme.colorScheme.secondaryContainer.copy(
+            alpha = 0.2f
+        ),
+        label = "backgroundColor"
+    )
+
     Row(
         modifier = Modifier
             .padding(16.dp)
             .fillMaxWidth()
             .clip(MaterialTheme.shapes.extraLarge)
-            .background(MaterialTheme.colorScheme.secondary)
+            .background(
+                backgroundColor
+            )
             .padding(16.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically,
@@ -38,18 +49,10 @@ fun GlobalSwitch(
             label,
             fontSize = 18.sp,
             fontWeight = FontWeight.W500,
-            color = MaterialTheme.colorScheme.onSecondary,
+            color = MaterialTheme.colorScheme.onSurface,
         )
         Switch(
-            colors = SwitchDefaults.colors(
+            colors = SwitchDefaults.colors(),
-                uncheckedTrackColor = MaterialTheme.colorScheme.background,
-                checkedTrackColor = MaterialTheme.colorScheme.surfaceVariant,
-                checkedThumbColor = MaterialTheme.colorScheme.secondary,
-                uncheckedBorderColor = Color.Transparent,
-                checkedBorderColor = Color.Transparent,
-                disabledCheckedBorderColor = Color.Transparent,
-                disabledUncheckedBorderColor = Color.Transparent,
-            ),
             checked = checked,
             onCheckedChange = {
                 onCheckedChange(it)

app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt

@@ -1,11 +1,13 @@
 package app.myzel394.alibi.ui.screens
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -131,6 +133,11 @@ fun SettingsScreen(
             if (!SUPPORTS_DARK_MODE_NATIVELY) {
                 ThemeSelector()
             }
+            MaxDurationTile(settings = settings)
+            IntervalDurationTile(settings = settings)
+            InAppLanguagePicker()
+            DeleteRecordingsImmediatelyTile(settings = settings)
+            CustomNotificationTile(navController = navController, settings = settings)
             GlobalSwitch(
                 label = stringResource(R.string.ui_settings_advancedSettings_label),
                 checked = settings.showAdvancedSettings,
@@ -142,24 +149,22 @@ fun SettingsScreen(
                     }
                 }
             )
-            MaxDurationTile(settings = settings)
-            IntervalDurationTile(settings = settings)
-            InAppLanguagePicker()
-            DeleteRecordingsImmediatelyTile(settings = settings)
-            CustomNotificationTile(navController = navController, settings = settings)
-            AboutTile(navController = navController)
             AnimatedVisibility(visible = settings.showAdvancedSettings) {
                 Column(
                     horizontalAlignment = Alignment.CenterHorizontally,
                     verticalArrangement = Arrangement.spacedBy(32.dp),
                 ) {
                     Column {
-                        Divider(
+                        SaveFolderTile(settings = settings)
+
+                        DividerTitle(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .padding(horizontal = 16.dp, vertical = 32.dp)
+                                .padding(16.dp),
+                            title = stringResource(R.string.ui_settings_sections_audio_title),
+                            description = stringResource(R.string.ui_settings_sections_audio_description),
                         )
-                        SaveFolderTile(settings = settings)
+
                         AudioRecorderShowAllMicrophonesTile(settings = settings)
                         AudioRecorderBitrateTile(settings = settings)
                         AudioRecorderSamplingRateTile(settings = settings)
@@ -176,6 +181,7 @@ fun SettingsScreen(
                     ImportExport(snackbarHostState = snackbarHostState)
                 }
             }
+            AboutTile(navController = navController)
         }
     }
 }

app/src/main/res/values/strings.xml

@@ -120,4 +120,6 @@
     <string name="ui_settings_option_saveFolder_action_default_label">Use private, encrypted storage</string>
     <string name="ui_audioRecorder_action_save_success">Recording has been saved successfully!</string>
     <string name="ui_audioRecorder_action_save_openFolder">Open</string>
+    <string name="ui_settings_sections_audio_title">Audio Recording</string>
+    <string name="ui_settings_sections_audio_description">Only applies to audio recordings</string>
 </resources>