[#790] Fix Settings screen layout

* [#790] Fix Settings screen layout

- SwitchWithLabel moved to ui-design-lib
- Internally switched from Row to ConstraintLayout
- Used paddings, which after creating and applying of Design system #611 will be refactored
- Moved Modifier definitions to the caller side, when possible

ui-design-lib/build.gradle.kts

@@ -29,6 +29,7 @@ android {
 
 dependencies {
     implementation(libs.androidx.annotation)
+    implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.core)
     implementation(libs.androidx.splash)
     implementation(libs.bundles.androidx.compose.core)

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/SwitchWithLabel.kt

@@ -0,0 +1,71 @@
+package co.electriccoin.zcash.ui.design.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Switch
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+
+@Composable
+fun SwitchWithLabel(
+    label: String,
+    state: Boolean,
+    onStateChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+
+    ConstraintLayout(
+        modifier = modifier
+            .clickable(
+                interactionSource = interactionSource,
+                indication = null, // disable ripple
+                role = Role.Switch,
+                onClick = { onStateChange(!state) }
+            )
+            .fillMaxWidth()
+    ) {
+        val (text, spacer, switchButton) = createRefs()
+        Body(
+            text = label,
+            modifier = Modifier.constrainAs(text) {
+                top.linkTo(parent.top)
+                bottom.linkTo(parent.top)
+                start.linkTo(parent.start)
+                end.linkTo(spacer.start)
+                width = Dimension.fillToConstraints
+            }
+        )
+        Spacer(
+            modifier = Modifier
+                .width(ZcashTheme.paddings.padding)
+                .constrainAs(spacer) {
+                    top.linkTo(parent.top)
+                    bottom.linkTo(parent.top)
+                    start.linkTo(text.end)
+                    end.linkTo(switchButton.start)
+                }
+        )
+        Switch(
+            checked = state,
+            onCheckedChange = {
+                onStateChange(it)
+            },
+            modifier = Modifier.constrainAs(switchButton) {
+                top.linkTo(parent.top)
+                bottom.linkTo(parent.top)
+                start.linkTo(spacer.end)
+                end.linkTo(parent.end)
+                width = Dimension.wrapContent
+            }
+        )
+    }
+}

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt

@@ -1,12 +1,6 @@
 package co.electriccoin.zcash.ui.screen.settings.view
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
@@ -17,26 +11,21 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.R
-import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
-import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.SwitchWithLabel
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme.paddings
 
 @Preview("Settings")
 @Composable
@@ -80,13 +69,16 @@ fun Settings(
         )
     }) { paddingValues ->
         SettingsMainContent(
-            paddingValues,
             isBackgroundSyncEnabled = isBackgroundSyncEnabled,
             isKeepScreenOnDuringSyncEnabled = isKeepScreenOnDuringSyncEnabled,
             isAnalyticsEnabled = isAnalyticsEnabled,
             onBackgroundSyncSettingsChanged = onBackgroundSyncSettingsChanged,
             onIsKeepScreenOnDuringSyncSettingsChanged = onIsKeepScreenOnDuringSyncSettingsChanged,
-            onAnalyticsSettingsChanged = onAnalyticsSettingsChanged
+            onAnalyticsSettingsChanged = onAnalyticsSettingsChanged,
+            modifier = Modifier.padding(
+                top = paddingValues.calculateTopPadding() + paddings.padding,
+                bottom = paddings.padding
+            )
         )
     }
 }
@@ -146,58 +138,32 @@ private fun TroubleshootingMenu(
 @Composable
 @Suppress("LongParameterList")
 private fun SettingsMainContent(
-    paddingValues: PaddingValues,
     isBackgroundSyncEnabled: Boolean,
     isKeepScreenOnDuringSyncEnabled: Boolean,
     isAnalyticsEnabled: Boolean,
     onBackgroundSyncSettingsChanged: (Boolean) -> Unit,
     onIsKeepScreenOnDuringSyncSettingsChanged: (Boolean) -> Unit,
-    onAnalyticsSettingsChanged: (Boolean) -> Unit
+    onAnalyticsSettingsChanged: (Boolean) -> Unit,
+    modifier: Modifier = Modifier
 ) {
-    Column(
-        Modifier
-            .padding(top = paddingValues.calculateTopPadding())
-    ) {
+    Column(modifier = modifier) {
         SwitchWithLabel(
             label = stringResource(id = R.string.settings_enable_background_sync),
             state = isBackgroundSyncEnabled,
-            onStateChange = { onBackgroundSyncSettingsChanged(!isBackgroundSyncEnabled) }
+            onStateChange = { onBackgroundSyncSettingsChanged(!isBackgroundSyncEnabled) },
+            modifier = Modifier.padding(paddings.padding)
         )
         SwitchWithLabel(
             label = stringResource(id = R.string.settings_enable_keep_screen_on),
             state = isKeepScreenOnDuringSyncEnabled,
-            onStateChange = { onIsKeepScreenOnDuringSyncSettingsChanged(!isKeepScreenOnDuringSyncEnabled) }
+            onStateChange = { onIsKeepScreenOnDuringSyncSettingsChanged(!isKeepScreenOnDuringSyncEnabled) },
+            modifier = Modifier.padding(paddings.padding)
         )
         SwitchWithLabel(
             label = stringResource(id = R.string.settings_enable_analytics),
             state = isAnalyticsEnabled,
-            onStateChange = { onAnalyticsSettingsChanged(!isAnalyticsEnabled) }
-        )
-    }
-}
-
-@Composable
-private fun SwitchWithLabel(label: String, state: Boolean, onStateChange: (Boolean) -> Unit) {
-    val interactionSource = remember { MutableInteractionSource() }
-    Row(
-        modifier = Modifier
-            .clickable(
-                interactionSource = interactionSource,
-                indication = null, // disable ripple
-                role = Role.Switch,
-                onClick = { onStateChange(!state) }
-            )
-            .padding(8.dp)
-            .fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Body(text = label)
-        Spacer(modifier = Modifier.fillMaxWidth(MINIMAL_WEIGHT))
-        Switch(
-            checked = state,
-            onCheckedChange = {
-                onStateChange(it)
-            }
+            onStateChange = { onAnalyticsSettingsChanged(!isAnalyticsEnabled) },
+            modifier = Modifier.padding(paddings.padding)
         )
     }
 }