Skip to content

Commit

Permalink
Fix AppBar padding and alignment issues (#1482)
Browse files Browse the repository at this point in the history
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)

Phone - after

![jetcaster_phone_after](https://github.com/user-attachments/assets/8a1532d4-3d33-40ca-bbf4-1de1d55a1b2f)
Phone - before

![jetcaster_phone_before](https://github.com/user-attachments/assets/4f8fd12f-87a8-4aa5-b641-3dbd80024dd8)
Tablet - after

![jetcaster_tablet_after](https://github.com/user-attachments/assets/825a2a02-2d41-4580-a793-e3e38e08662a)
Tablet - before

![jetcaster_tablet_before](https://github.com/user-attachments/assets/49fbe610-13c9-4791-bc1f-9644cd5bebcc)
  • Loading branch information
bentrengrove authored Oct 8, 2024
2 parents d673e1b + bf7f477 commit bbf6eca
Showing 1 changed file with 30 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = {}
) {}
}
}

Expand Down

0 comments on commit bbf6eca

Please sign in to comment.