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)}
}
}
ConstraintLayout
(Drawback: Complicated. Seems like overkill in many situations.)CompositionLocalProvider
to provide a RTL LocalLayoutDirection
. (Drawback: Seems hacky. All the layouts of child components become RTL. For example textfield icons and text placement.)Button
as its width is determined by localized text in it.)You can 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)}
}