Skip to content

Commit b59fa33

Browse files
theovilardotheovilardo
committed
Replace SearchBar with DockedSearchBar in SearchScreen
- Replaced the standard `SearchBar` with `DockedSearchBar` for improved layout control. - Wrapped the search bar in a `Box` with `weight(1f)` to manage spacing within the header row. - Adjusted padding and alignment for the search input and trailing `FilledIconButton`. - Cleaned up unused commented-out code blocks.
1 parent 9995a88 commit b59fa33

1 file changed

Lines changed: 76 additions & 88 deletions

File tree

  • app/src/main/java/com/theveloper/pixelplay/presentation/screens

‎app/src/main/java/com/theveloper/pixelplay/presentation/screens/SearchScreen.kt‎

Lines changed: 76 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import androidx.compose.material3.Icon
4646
import androidx.compose.material3.IconButton
4747
import androidx.compose.material3.IconButtonDefaults
4848
import androidx.compose.material3.MaterialTheme
49-
import androidx.compose.material3.SearchBar
49+
import androidx.compose.material3.DockedSearchBar
5050
import androidx.compose.material3.SearchBarDefaults
5151
import androidx.compose.material3.Text
5252
import androidx.compose.runtime.Composable
@@ -98,6 +98,7 @@ import androidx.compose.material3.FilterChipDefaults
9898
import androidx.compose.ui.Alignment
9999
import androidx.compose.ui.platform.LocalDensity
100100
import androidx.compose.ui.focus.FocusRequester
101+
import androidx.compose.ui.focus.focusModifier
101102
import androidx.compose.ui.focus.focusRequester
102103
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
103104
import androidx.compose.ui.res.painterResource
@@ -230,26 +231,14 @@ fun SearchScreen(
230231
.fillMaxSize()
231232
.background(MaterialTheme.colorScheme.background)
232233
) {
233-
// Box(
234-
// modifier = Modifier
235-
// .fillMaxWidth()
236-
// .height(280.dp)
237-
// .background(
238-
// gradientBrush
239-
// )
240-
// )
241234

242235
Column(
243236
modifier = Modifier.fillMaxSize()
244237
) {
245238
Row(
246239
modifier = Modifier
247240
.fillMaxWidth()
248-
.padding(
249-
start = 24.dp,
250-
top = statusBarTopInset,
251-
end = 24.dp
252-
),
241+
.padding(start = 24.dp, top = statusBarTopInset, end = 24.dp),
253242
horizontalArrangement = Arrangement.spacedBy(12.dp),
254243
verticalAlignment = Alignment.CenterVertically
255244
) {
@@ -261,84 +250,83 @@ fun SearchScreen(
261250
cursorColor = MaterialTheme.colorScheme.primary
262251
)
263252

264-
SearchBar(
265-
inputField = {
266-
SearchBarDefaults.InputField(
267-
modifier = Modifier.focusRequester(searchInputFocusRequester),
268-
query = searchQuery,
269-
onQueryChange = {
270-
searchQuery = it
271-
playerViewModel.updateSearchQuery(it)
272-
},
273-
onSearch = { query ->
274-
if (query.isNotBlank()) {
275-
playerViewModel.onSearchQuerySubmitted(query)
276-
}
277-
keyboardController?.hide()
278-
},
279-
expanded = false,
280-
onExpandedChange = {},
281-
placeholder = {
282-
Text(
283-
stringResource(R.string.search_placeholder),
284-
style = MaterialTheme.typography.bodyLarge,
285-
color = MaterialTheme.colorScheme.primary
286-
)
287-
},
288-
leadingIcon = {
289-
Icon(
290-
imageVector = Icons.Rounded.Search,
291-
contentDescription = stringResource(R.string.cd_search_icon),
292-
tint = MaterialTheme.colorScheme.primary,
293-
modifier = Modifier.size(24.dp)
294-
)
295-
},
296-
trailingIcon = {
297-
if (searchQuery.isNotBlank()) {
298-
IconButton(
299-
onClick = {
300-
searchQuery = ""
301-
playerViewModel.updateSearchQuery("")
302-
},
303-
modifier = Modifier
304-
.size(48.dp)
305-
.clip(CircleShape)
306-
.background(
307-
MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.2f)
253+
Box(
254+
Modifier
255+
.weight(1f)
256+
.background(color = Color.Transparent)
257+
) {
258+
DockedSearchBar(
259+
inputField = {
260+
SearchBarDefaults.InputField(
261+
modifier = Modifier.focusRequester(searchInputFocusRequester),
262+
query = searchQuery,
263+
onQueryChange = {
264+
searchQuery = it
265+
playerViewModel.updateSearchQuery(it)
266+
},
267+
onSearch = { query ->
268+
if (query.isNotBlank()) {
269+
playerViewModel.onSearchQuerySubmitted(query)
270+
}
271+
keyboardController?.hide()
272+
},
273+
expanded = false,
274+
onExpandedChange = {},
275+
placeholder = {
276+
Text(
277+
stringResource(R.string.search_placeholder),
278+
style = MaterialTheme.typography.bodyLarge,
279+
color = MaterialTheme.colorScheme.primary
280+
)
281+
},
282+
leadingIcon = {
283+
Icon(
284+
imageVector = Icons.Rounded.Search,
285+
contentDescription = stringResource(R.string.cd_search_icon),
286+
tint = MaterialTheme.colorScheme.primary,
287+
modifier = Modifier.size(24.dp)
288+
)
289+
},
290+
trailingIcon = {
291+
if (searchQuery.isNotBlank()) {
292+
IconButton(
293+
onClick = {
294+
searchQuery = ""
295+
playerViewModel.updateSearchQuery("")
296+
},
297+
modifier = Modifier
298+
.size(48.dp)
299+
.clip(CircleShape)
300+
.background(
301+
MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.2f)
302+
)
303+
) {
304+
Icon(
305+
imageVector = Icons.Rounded.Close,
306+
contentDescription = stringResource(R.string.cd_clear_search_query),
307+
tint = MaterialTheme.colorScheme.primary
308308
)
309-
) {
310-
Icon(
311-
imageVector = Icons.Rounded.Close,
312-
contentDescription = stringResource(R.string.cd_clear_search_query),
313-
tint = MaterialTheme.colorScheme.primary
314-
)
309+
}
315310
}
316-
}
317-
},
318-
colors = searchBarInputFieldColors
319-
)
320-
},
321-
expanded = false,
322-
onExpandedChange = {},
323-
modifier = Modifier
324-
.align(Alignment.CenterVertically)
325-
.weight(1f)
326-
.clip(RoundedCornerShape(searchbarCornerRadius)),
327-
colors = SearchBarDefaults.colors(
328-
containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f),
329-
dividerColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f),
330-
inputFieldColors = searchBarInputFieldColors
331-
),
332-
windowInsets = WindowInsets(0.dp),
333-
content = {}
334-
)
311+
},
312+
colors = searchBarInputFieldColors
313+
)
314+
},
315+
expanded = false,
316+
onExpandedChange = {},
317+
modifier = Modifier
318+
.clip(RoundedCornerShape(searchbarCornerRadius)),
319+
colors = SearchBarDefaults.colors(
320+
containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f),
321+
dividerColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f),
322+
inputFieldColors = searchBarInputFieldColors
323+
),
324+
content = {}
325+
)
326+
}
335327

336328
FilledIconButton(
337-
modifier = Modifier
338-
.align(Alignment.CenterVertically)
339-
.size(48.dp)
340-
.padding(top = 4.dp)
341-
,
329+
modifier = Modifier.padding(bottom = 2.dp),
342330
colors = IconButtonDefaults.filledIconButtonColors(
343331
containerColor = MaterialTheme.colorScheme.primaryContainer,
344332
contentColor = MaterialTheme.colorScheme.onPrimaryContainer

0 commit comments

Comments
 (0)