How can I make the Text in Button visible when But...

# compose

[chanjungskim]

How can I make the Text in Button visible when Button size is small? When the button size is bigger the text is visible but when it's smaller, Text is not visible.

[chanjungskim]

Screen Shot 2023-03-07 at 11.49.16 AM.png

[Chris Sinco [G]]

Code snippet?

[chanjungskim]

the each button uses this function.

@Composable
fun NumberPadButton(
    text: String,
    onClick: () -> Unit = {},
    modifier: Modifier
) {
    Button(
        onClick = onClick,
        shape = RoundedCornerShape(10.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.White,
            contentColor = Color.Gray002
        ),
        contentPadding = PaddingValues(start = 0.dp, end = 0.dp, top = 5.dp, bottom = 0.dp),
        modifier = modifier
    ) {
        Text(
            text = text,
            fontSize = 23.sp,
            color = Color.Gray002,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .fillMaxSize()
                .align(Alignment.CenterVertically)
        )
    }
}

I removed the button's padding with PaddingValues. after that I wanted Text to be the center of it. But couldn't find better way.

[Chris Sinco [G]]

Hmm was the text not centered before (without removing PaddingValues)? Are you trying to make the buttons have a 1:1 width/height ratio?

[Chris Sinco [G]]

I tried this which is similar which doesn't require changing the contentPadding

@Preview
@Composable
fun NumberButtonsPreview() {
    MaterialTheme {
        Surface {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    NumberPadButton(text = "1", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "2", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "3", modifier = Modifier.weight(1f))
                }
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    NumberPadButton(text = "4", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "5", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "6", modifier = Modifier.weight(1f))
                }
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    NumberPadButton(text = "7", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "8", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "9", modifier = Modifier.weight(1f))
                }
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    NumberPadButton(text = "", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "0", modifier = Modifier.weight(1f))
                    NumberPadButton(text = "<", modifier = Modifier.weight(1f))
                }
            }
        }
    }
}

@Composable
fun NumberPadButton(
    modifier: Modifier = Modifier,
    text: String,
    onClick: () -> Unit = {}
) {
    Button(
        onClick = onClick,
        shape = RoundedCornerShape(10.dp),
        modifier = modifier.aspectRatio(1f)
    ) {
        Text(
            text = text,
            fontSize = 23.sp,
        )
    }
}

[Chris Sinco [G]]

Result

[chanjungskim]

I guess if the button size is smaller, then, the text becomes invisible because of the padding.

[Chris Sinco [G]]

How small are you wanting them? The min height for Button is 40.dp, and touch target for accessibility reasons should be at least 44.dp

[Chris Sinco [G]]

Normally though, I usually let the content + padding of the button dictate its size

[chanjungskim]

at the moment, the button size is 46.dp and font size is 23.sp

[chanjungskim]

the padding took Text area in my case.

[Chris Sinco [G]]

Right - do your buttons have to be precisely 46.dp?

[chanjungskim]

Screen Shot 2023-03-07 at 3.24.57 PM.png

[chanjungskim]

Yes, this is what I got from my designer.

[Chris Sinco [G]]

I see - the way Material Buttons are built, it puts padding around the text to end up with a minimum height of 40.dp and width of 58.dp. If you use a size modifier to override that, it will potentially cut off the text. So you're previously solution worked fine (setting content padding to zero).

[chanjungskim]

Is there anyway not to override modifier for the size for not cutting off the text?

[Chris Sinco [G]]

Well you don't need to override any modifiers from what I tried. Just setting the size modifier on Button, and setting contentPadding to zero works

@Composable
fun NumberPadButton(
    modifier: Modifier = Modifier,
    text: String,
    onClick: () -> Unit = {}
) {
    Button(
        onClick = onClick,
        shape = RoundedCornerShape(10.dp),
        modifier = modifier.size(46.dp),
        contentPadding = PaddingValues(0.dp)
    ) {
        Text(
            text = text,
            fontSize = 23.sp,
        )
    }
}

[Chris Sinco [G]]

image.png

[Chris Sinco [G]]

The Row scope in Button implementation by default will center the Text composable horizontally and vertically