Issue
I am trying to create a custom search bar; in which I am using Row()
composable as a container for all the other elements. Here the last FloatingActionButton
gets squeezed but I want the TextField
to be flexible so that it gets shortened to accommodate the remaining elements.
I already know some workarounds to this but I want a better solution. See below for the known workarounds and their drawbacks.
@Preview(showBackground = true, widthDp = 410)
@Composable
fun MyComposable() {
Row(Modifier.fillMaxWidth()) {
TextField(value = "Search", onValueChange = {})
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.SkipNext, contentDescription = null)}
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Close, contentDescription = null)}
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Home, contentDescription = null)}
}
}
Known workarounds:
- Using
ConstraintLayout
(Drawback: Complicated. Seems like overkill in many situations.) - Using
CompositionLocalProvider
to provide a RTLLocalLayoutDirection
. (Drawback: Seems hacky. All the layouts of child components become RTL. For example textfield icons and text placement.) - Specifying fixed width (or weights) to the last element. (Drawback: This makes the second last element to squeeze and forces me to hardcode width which cannot be done on some elements like
Button
as its width is determined by localized text in it.)
Solution
You can use apply the weight(1f)
to the TextField
:
Row(Modifier.fillMaxWidth()) {
TextField(
modifier = Modifier.weight(1f),
value = "Search", onValueChange = {})
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.SkipNext, contentDescription = null)}
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Close, contentDescription = null)}
FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Home, contentDescription = null)}
}
Answered By - Gabriele Mariotti
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.