https://kotlinlang.org logo
r

rajesh

08/27/2021, 11:44 AM
How do i achieve following UI with row? Code is in thread which does not produce desired output
Copy code
@Composable
fun CreateCommentView(
    onSendClick: (String) -> Unit
) {
    var text by remember { mutableStateOf(TextFieldValue("")) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            modifier = Modifier,
            value = text,
            onValueChange = { value ->
                text = value
            },
            placeholder = { Text(text = "Add a comment") }
        )
        Box(
            modifier = Modifier
                .border(1.dp, Color.Gray, RectangleShape)
        ) {
            IconButton(onClick = { onSendClick(text.text) }) {
                Icon(
                    painterResource(id = R.drawable.ic_outlined_send),
                    modifier = Modifier.iconSize(),
                    contentDescription = "send"
                )
            }
        }
    }
}
It has space between them
i want box to be full in height and outlined text field should fill all available space without overlapping box
f

Filip Wiesner

08/27/2021, 11:47 AM
It has space between them
Well, isn't that what
Arrangement.SpaceBetween
does?
r

rajesh

08/27/2021, 11:53 AM
sure it does. but if i remove it, then both view became attached, leaving some space at the end
r

Rafiul Islam

08/27/2021, 11:54 AM
You can use Modifier.weight(1f) in OutlinedTextField to take all the available space. In that case you can remove horizontalArrangement = Arrangement.SpaceBetween,
r

rajesh

08/27/2021, 12:01 PM
@Rafiul Islam thanks. working now. initially i tried weight(2f) for text field and weight(1f) for box but didn't worked
r

Rafiul Islam

08/27/2021, 12:16 PM
It would work if you just didn't use weight (1f) for the box. It doesn't matter whether you put 1f, 2f, 100f in one component, unless you give weight to other components it will take all the available space after placing others.
👍 1