Hey people, I've been delaying this question as I'...

# compose

[Cicero]

Hey people, I've been delaying this question as I'm trying to find why it happens before I ask it. But as I'm sitting at the doctor and I can't debug anything, here we go:
What happens if you try to add an Image with a resourceAsPaint(Tiny icon here) and a Text("whatever text here") , inside of a Button{here}?

I have a weird scenario that doesn't matter if I pot them in a row or not and how I set my horizontal and vertical alignments to center. The text is always aligned top and the image bottom.

I really wish not to go hacky here and just padd the object into position as I would appreciate it to take its measurements from the text size and padding.

Would anyone have any clues?

[Albert Chang]

Just saw an example today. If your code is not working properly, post it here so that we can check.

[Cicero]

Thank you very much, I will try this and Wil probably work.

[Colton Idle]

@Chris Sinco [G] in that example you are showing a "default" button which is a material button, vs a custom button that is made to look material-ish right?

[Zach Klippenstein (he/him) [MOD]]

That example has both, yes. But Icon has a fixed size I believe, it’s not being measured from the text. You could use intrinsics for that I think.

[Cicero]

Thanks Zach, yes. I’m coming to the conclusion that the icon minimum size is bigger than the one I have.
I’ll look into this further and try to pinpoint why this is an issue. Fun.

[Cicero]

I had a padding on one of my texts. I can now represent what I wanted to but I’m still curious of why I couldn’t mess around with the Arrangement/Alignment if the Image component had no padding.

Button(modifier = Modifier
    .fillMaxWidth()
    .height(80.dp)
    .padding(start = 16.dp, end = 16.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xFF224599)),
    onClick = { /*TODO*/ }) {

    Image(
        painter = painterResource(id = R.drawable.ic_articles),
        contentDescription = null,
        contentScale = ContentScale.Fit
    )

    Spacer(modifier = Modifier.width(16.dp))
    Text(
        "ba",
        fontSize = 14.sp,
        color = Color(0xFFFFFFFF),
        letterSpacing = 1.25.sp
    )
}

[Cicero]

I believe as it is works

[Cicero]

Second Picture:

Button(modifier = Modifier
    .fillMaxWidth()
    .height(80.dp)
    .padding(start = 16.dp, end = 16.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xFF224599)),
    onClick = { /*TODO*/ }) {

    Image(
        painter = painterResource(id = R.drawable.ic_articles),
        contentDescription = null,
        contentScale = ContentScale.Fit
    )

    Spacer(modifier = Modifier.width(16.dp).height(80.dp))
    Text(
        "ba",
        modifier = Modifier.padding(bottom = 16.dp),
        fontSize = 14.sp,
        color = Color(0xFFFFFFFF),
        letterSpacing = 1.25.sp
    )
}

I don’t have the code for the first one but the text had bottom padding 😐

[Chris Sinco [G]]

Icon has a fixed size I believe

Icon by default if no modifier is specified will be sized at 24.dp x 24.dp with ContentScale.Fit . Material icons use this as the default size.

[Chris Sinco [G]]

Image on the other hand will size things based on the asset if no modifiers are specified. It also doesn’t do any tinting with contentColor and just uses the asset as-is.

[Chris Sinco [G]]

This is the RowScope that is being used for Button. You can see here that content is placed with horizontal arrangement centered and vertical alignment centered also. If you want to change the exact alignment of the child components in Button you can do it with Spacer or padding but the results are competing against other default values in the implementation.

[Chris Sinco [G]]

So the other example linked above I showed was how you can build a Button from scratch if you really want to, so you can have more granular control over things.

[Cicero]

I couldn’t reproduce my issue but the thing is that the text had some padding and the icon was anchored to the bottom, didn’t mattered what I did

[Cicero]

Thanks Chris, I actually had solved my problem with your reference post a while ago :)

[Chris Sinco [G]]

I couldn’t reproduce my issue but the thing is that the text had some padding and the icon was anchored to the bottom, didn’t mattered what I did

Gotcha - if you ever can repro, please post the code here!

[Cicero]

I will keep an eye on it