https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
t

tieskedh

12/13/2020, 2:59 PM
How to align two texts of different sizes by their top?
Copy code
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?
d

Dominaezzz

12/13/2020, 3:35 PM
"by their top"?
t

tieskedh

12/13/2020, 3:42 PM
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
Copy code
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)
    )
}
k

Kshitij Patil

12/13/2020, 3:47 PM
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
t

tieskedh

12/13/2020, 3:50 PM
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.
k

Kshitij Patil

12/13/2020, 3:57 PM
I didn't understand about coloring here. Could share some code to explain about it?
t

tieskedh

12/13/2020, 3:58 PM
Copy code
Text(
    "h4 text",
    modifier = Modifier.padding(end = 10.dp)
        .background(Color.Red),
    style = MaterialTheme.typography.h4,
    
    onTextLayout = {
        it.firstBaseline
    }
)
This colors above and below the text
k

Kshitij Patil

12/13/2020, 4:00 PM
Is that your desired behavior.. I never tried this. So you're saying the above code colors above & below text but not behind it?
t

tieskedh

12/13/2020, 4:01 PM
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.
I want to align them with the top:
Copy code
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?
k

Kshitij Patil

12/13/2020, 4:13 PM
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.
t

tieskedh

12/13/2020, 4:14 PM
Ok, I will learn about it and then give you the answer.
v

Vinay Gaba

12/13/2020, 11:09 PM
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
t

tieskedh

12/14/2020, 8:37 AM
I will investigate today, but first I have to quickly finish a demo. Therefor I use the hardcoded 10.dp for now
🙌🏼 1
Powered by