Fix AppBar padding and alignment issues

AppBar was missing a start padding that caused it to extend to the edge of the screen on Compact size classes. Updated the SearchBar component usage away from the deprecated method version as an internal usage of Modifier.fillMaxWidth in the deprecated method was now causing the AppBar to always fill max width on all Window Size Classes (vs the intended end-aligned smaller version in non-Compact)
android · Oct 4, 2024 · bf7f477 · bf7f477
1 parent d673e1b
commit bf7f477
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/Home.kt b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/home/Home.kt
@@ -58,6 +58,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Surface
@@ -383,31 +384,39 @@ private fun HomeAppBar(
         modifier = modifier
             .fillMaxWidth()
             .background(Color.Transparent)
-            .padding(end = 16.dp, top = 8.dp, bottom = 8.dp)
+            .padding(end = 16.dp, top = 8.dp, bottom = 8.dp, start = 16.dp)
     ) {
         SearchBar(
-            query = "",
-            onQueryChange = {},
-            placeholder = {
-                Text(stringResource(id = R.string.search_for_a_podcast))
-            },
-            onSearch = {},
-            active = false,
-            onActiveChange = {},
-            leadingIcon = {
-                Icon(
-                    imageVector = Icons.Default.Search,
-                    contentDescription = null
-                )
-            },
-            trailingIcon = {
-                Icon(
-                    imageVector = Icons.Default.AccountCircle,
-                    contentDescription = stringResource(R.string.cd_account)
+            inputField = {
+                SearchBarDefaults.InputField(
+                    query = "",
+                    onQueryChange = {},
+                    onSearch = {},
+                    expanded = false,
+                    onExpandedChange = {},
+                    enabled = true,
+                    placeholder = {
+                        Text(stringResource(id = R.string.search_for_a_podcast))
+                    },
+                    leadingIcon = {
+                        Icon(
+                            imageVector = Icons.Default.Search,
+                            contentDescription = null
+                        )
+                    },
+                    trailingIcon = {
+                        Icon(
+                            imageVector = Icons.Default.AccountCircle,
+                            contentDescription = stringResource(R.string.cd_account)
+                        )
+                    },
+                    interactionSource = null,
+                    modifier = if (isExpanded) Modifier.fillMaxWidth() else Modifier
                 )
             },
-            modifier = if (isExpanded) Modifier else Modifier.fillMaxWidth()
-        ) { }
+            expanded = false,
+            onExpandedChange = {}
+        ) {}
     }
 }