https://kotlinlang.org logo
#compose
Title
# compose
c

chanjungskim

03/07/2023, 2:47 AM
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.
Screen Shot 2023-03-07 at 11.49.16 AM.png
c

Chris Sinco [G]

03/07/2023, 5:52 AM
Code snippet?
c

chanjungskim

03/07/2023, 5:54 AM
the each button uses this function.
Copy code
@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.
c

Chris Sinco [G]

03/07/2023, 6:07 AM
Hmm was the text not centered before (without removing PaddingValues)? Are you trying to make the buttons have a 1:1 width/height ratio?
I tried this which is similar which doesn't require changing the contentPadding
Copy code
@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,
        )
    }
}
Result
c

chanjungskim

03/07/2023, 6:18 AM
I guess if the button size is smaller, then, the text becomes invisible because of the padding.
c

Chris Sinco [G]

03/07/2023, 6:21 AM
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
Normally though, I usually let the content + padding of the button dictate its size
c

chanjungskim

03/07/2023, 6:22 AM
at the moment, the button size is 46.dp and font size is 23.sp
the padding took Text area in my case.
c

Chris Sinco [G]

03/07/2023, 6:24 AM
Right - do your buttons have to be precisely 46.dp?
c

chanjungskim

03/07/2023, 6:25 AM
Screen Shot 2023-03-07 at 3.24.57 PM.png
Yes, this is what I got from my designer.
c

Chris Sinco [G]

03/07/2023, 6:27 AM
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).
c

chanjungskim

03/07/2023, 6:28 AM
Is there anyway not to override modifier for the size for not cutting off the text?
c

Chris Sinco [G]

03/07/2023, 6:31 AM
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
Copy code
@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,
        )
    }
}
image.png
The Row scope in Button implementation by default will center the Text composable horizontally and vertically
10 Views