How can I make the Text in Button visible when Button size i

Question

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 · Answer

Screen Shot 2023 03 07 at 11 49 16 AM png

Chris Sinco [G] · Answer

Code snippet

chanjungskim · Answer

the each button uses this function ``` Composable fun NumberPadButton text String onClick gt 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] · Answer

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] · Answer

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 = lt modifier = Modifier weight 1f Composable fun NumberPadButton modifier Modifier = Modifier text String onClick gt Unit = Button onClick = onClick shape = RoundedCornerShape 10 dp modifier = modifier aspectRatio 1f Text text = text fontSize = 23 sp ```

Chris Sinco [G] · Answer

Result

chanjungskim · Answer

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

Chris Sinco [G] · Answer

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] · Answer

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

chanjungskim · Answer

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

chanjungskim · Answer

the padding took Text area in my case

Chris Sinco [G] · Answer

Right do your buttons have to be precisely 46 dp

chanjungskim · Answer

Screen Shot 2023 03 07 at 3 24 57 PM png

chanjungskim · Answer

Yes this is what I got from my designer

Chris Sinco [G] · Answer

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 · Answer

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

Chris Sinco [G] · Answer

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 gt 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] · Answer

image png

Chris Sinco [G] · Answer

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