How to add compose modifiers based on other surrounding views?

Question

I am unable to get the expected results as shown in the picture below. There are 2 rules to follow

The horizontal line should not continue till the bottom text. Instead, it should just be the height of the right text (multiline).
Bottom text should align with the Right Text from the left side.

Current Incorrect Snippet

@Composable
fun Sample() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .padding(10.dp)
    ) {
        Text("Left Text")
        
        Divider(
            Modifier
                .padding(horizontal = 10.dp)
                .fillMaxHeight()
                .width(4.dp),
            color = Color.Black
        )

        Column {
            Text("Right Looooong Text")
            Text("Bottom Text")
        }
    }
}

Visual Representation

score 2 · Accepted Answer · answered Nov 19 '22 at 12:56

2

You can achieve this in various ways including

Option 1: You can either redesign your Composable

Option 2: Apply Modifier.layoutId() your Composables then set their position relative to each other using Layout and getting measurables via this ids then placing them based on one that they depend on.

I post only the option one which is the easiest one.

@Composable
fun Sample(horizontalPadding: Dp = 10.dp, dividerWidth: Dp = 4.dp) {
    Row(
        modifier = Modifier.padding(10.dp)
    ) {
        Text("Left Text")

        Column {
            Row(modifier = Modifier.height(IntrinsicSize.Min)) {
                Divider(
                    Modifier
                        .padding(horizontal = horizontalPadding)
                        .fillMaxHeight()
                        .width(dividerWidth),
                    color = Color.Black
                )

                Text("Right Loooooooooooooooooooong Text")
            }

            Text(
                "Bottom Text",
                modifier = Modifier.offset(x = horizontalPadding * 2 + dividerWidth)
            )
        }
    }
}

Result

answered Nov 19 '22 at 12:56

Thracian

43,021
16
133
222

This solution is working perfectly fine. Thanks for sharing. But what if I want the divider's height should equal to the maximum height of Left OR Right Text? Because in the above solution if Left Text is longer than the Right Text then divider's height just follows the Right Text height. – Navjot Nov 21 '22 at 20:19
In that scenario you need to put bot texts inside a Row and apply as in Layouts page. https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements#intrinsics-in-layouts and measure width of the left text using onTextLayout callback of `Text` then apply it to Bottom Text. Other option is using layout with `Modiifer.layoutId` and using `Layout` to place composables relative to each other. You measure left and right text then get max height and measure divider. also use max height and position of divider to position bottom Text. This might look complicated – Thracian Nov 21 '22 at 20:59
But if you check out custom layout section you can see how you measure your Measurables and place your Placeables. You just need to set the variables i mentioned above to place Bottom Text x position relative to right position x and y axes – Thracian Nov 21 '22 at 21:02
I have tried with custom layout but unable to get the desired solution. Haven't tried custom layout before though. It would be great if you can share the snippet of the solution. Thanks! – Navjot Nov 22 '22 at 01:13

score 0 · Answer 2 · answered Nov 19 '22 at 00:02

You can use the modifier extension .onSizeChanged{}, which returns its composable's size in Int, to set the vertical divider's height as follows:

var divHeight: Int = 0 // Must be initialized

Row() {
    Text(text = "Left Text")

    Divider(
        modifier = Modifier
                .padding(horizontal = 10.dp)
                .width(4.dp)
                .height(divHeight.dp) // .dp converts measurement from Int to Dp
    )

    Column {
        Text(
            modifier = Modifier
                    .onSizeChanged { divHeight = it.height },
            text = "Right Looooong Text"
        )
        Text(text = "Bottom Text")
    }
}

Hope you found this helpful!

it can't work in this way – Gabriele Mariotti Nov 19 '22 at 07:21 — Gabriele Mariotti, Nov 19 '22 at 07:21

How to add compose modifiers based on other surrounding views?

2 Answers2