How to align two texts of different sizes by their top? ```Row { Text( "h4 text", ...

# compose

[tieskedh]

How to align two texts of different sizes by their top?

Row {
    Text(
        "h4 text",
        style = MaterialTheme.typography.h4,
    )
    Text("my icon")
}

I saw that fontsize had a lineHeight, and a baselineshift.
The thing I don't get is that the baselineshift is a multiplier.
How can I compute the top with it?
Or is there some other way?

[Dominaezzz]

"by their top"?

[tieskedh]

I saw you could align using alignbybaseline.
Then you will get whitespace above the small text.
I need the space to be under the small text

[tieskedh]

Box {
    Row {
        Text(
            "h4 text",
            modifier = Modifier.padding(end = 10.dp),
            style = MaterialTheme.typography.h4,
            onTextLayout = {
                it.firstBaseline
            }
        )
        Row(
            modifier = Modifier
        ) {
            Text("my icon")
        }
    }
    Spacer(
        Modifier.padding(top = 11.dp)
            .fillMaxWidth()
            .height(1.dp)
            .background(Color.Black)
    )
}

[Kshitij Patil]

I could see two options, maybe you could use horizontal guideline from ConstraintLayout or use custom Layout to measure height of individual text and positionY accordingly

[tieskedh]

Will that work?
I've never done the measuring.
The problem is though, that If I color the background of a H4-text, it is bigger then the text itself.
So I would need to measure inside of it.

[Kshitij Patil]

I didn't understand about coloring here. Could share some code to explain about it?

[tieskedh]

Text(
    "h4 text",
    modifier = Modifier.padding(end = 10.dp)
        .background(Color.Red),
    style = MaterialTheme.typography.h4,
    
    onTextLayout = {
        it.firstBaseline
    }
)

[tieskedh]

This colors above and below the text

[Kshitij Patil]

Is that your desired behavior.. I never tried this. So you're saying the above code colors above & below text but not behind it?

[tieskedh]

I think it has something todo with the baselineshift which you can find at MaterialTheme.typography.h4.baselineShift
But I don't know how to use it.

[tieskedh]

I want to align them with the top:

Row(modifier) {
    Text(
        "some text",
        modifier = Modifier.padding(end = 10.dp),
        style = MaterialTheme.typography.h4
    )
    Column {
        Row {
            Icon(Icons.Default.DateRange)
            Text("another text)
        }
    }

The problem is that if i color the background of the H4, it colors more then only the real text.
Therefor, I guess some padding is build in?
I want to know that padding (in this case 10.dp), such that I can align by the top of the text.
You suggested to use measuring of the childs, but does that work if more then the H4 is colored?

[Kshitij Patil]

I'm not aware if there's any default padding with Text Composable but I believe it'll if you measure the height and use the padding with modifier, better give it a try.

[tieskedh]

Ok, I will learn about it and then give you the answer.

[Vinay Gaba]

Not sure if it solves the exact usecase for you, but there’s also a modifier for this - Modifier.alignBy . Here’s an example - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/[…]ample/jetpackcompose/layout/ViewLayoutConfigurationsActivity.kt

[tieskedh]

I will investigate today, but first I have to quickly finish a demo.
Therefor I use the hardcoded 10.dp for now