How can I align elements and make them have the same height in Compose with ConstraintLayout?

Question

There's my code:

ConstraintLayout(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(
            color = colorScheme.onBackground,
            shape = RoundedCornerShape(8.dp)
        )
        .padding(0.dp)
) {
    val (input, submit) = createRefs()
    BasicTextField(
        value = message,
        onValueChange = {
            message = it
        },
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .padding(1.dp, 1.dp, 0.dp, 1.dp)
            .background(
                color = colorScheme.background,
                shape = RoundedCornerShape(7.dp, 0.dp, 0.dp, 7.dp)
            )
            .padding(20.dp)
            .constrainAs(input) {

            }
    )
    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(0.dp, 7.dp, 7.dp, 0.dp),
        modifier = Modifier
            .fillMaxWidth(0.3f)
            .padding(0.dp)
            .constrainAs(submit) {
                start.linkTo(input.end)
                top.linkTo(input.top, margin = 0.dp)
                bottom.linkTo(input.bottom, margin = 0.dp)
            }
            .padding(0.dp)
    ) {
        Text(text = "SEND", color = colorScheme.onPrimary, fontSize = 16.sp)
    }
}

And then I got this:

I wanna do that if user inputs something multi lines, the textField's height will be auto change, so if I make the button align top and bottom to the textField, the button will also changes like the textField. But it's not working.

By Android XML Views, I can easy to use alignTop and alignBottom to do that, but I'm only a beginner with Compose, so may somebody can help me?

Thank you all, salute!

Okey, stack overflow wants to make me input more informations here, minimum 20 characters. I don't know what's this, but thanks to everybody again.

Answer 1

You can use the Intrinsic measurements for that behavior , by giving the height of your row composable as IntrinsicSize.Max.And apply the fillMaxHeight modifier to your button.

• IntrinsicSize.Max will apply the height of the biggest child composable to the parent composable ( Row in this case).

• As the height of your BasicTextField will increase, the height of your row will increase and since the button has fillMaxHeight() modifier applied, it will also increase in height.

EXAMPLE

                    Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier
                                .height(IntrinsicSize.Max)
                        ) {
                            CustomTextField(
                                modifier = Modifier.fillMaxWidth(0.5f),
                                hintText = "Hint",
                                value = text ,
                                onValueChange = {
                                    text = it
                                }
                            )
                            Button(
                                onClick = { /*TODO*/ },
                               modifier = Modifier
                                    .weight(1f)
                                   .fillMaxHeight()
                            ) {
                                Text(text = "SEND", color = colorScheme.onPrimary, fontSize = 16.sp)
                            }
                        }

CustomTextField

@Composable
fun CustomTextField(
    hintText : String,
    value : String,
    onValueChange : (String) -> Unit,
    modifier: Modifier = Modifier,
    maxLines : Int = 7
) {


    BasicTextField(
        value = value,
        onValueChange =  {onValueChange(it)},
        maxLines = maxLines,
        decorationBox = { innerTextField ->  
            Box(modifier  = modifier){
                if(value.isEmpty()){
                    Text(
                        text = hintText,
                        color = LocalContentColor.current.copy(alpha = 0.5f)
                    )
                }
                innerTextField()
            }
        }
    )
}

You can change the text font size and maxLines in the CustomTextField Composable. :)