Hi I have tabs with a regular font. When selectin...

# compose

[AmrJyniat]

Hi

I have tabs with a regular font. When selecting a tab, it should be in bold, my issue is the extra width that comes with the bold style. How to make the text width fixed regardless of the font weight?

CleanShot 2025-05-06 at 13.19.56.mp4

[AmrJyniat]

Here is the Text Composable:

Text(
    color = if (selectedTabIndex == index) CustomColors.fontSelected else CustomColors.fontUnSelected,
    text = fontGroup.title,
    style = if (selectedTabIndex == index) customTypography.semiBold() else customTypography.regular(),
    modifier = Modifier.padding(4.dp)
)

[mohamed rejeb]

You can have a box and add two text composables inside that box one bold and one regular, and show the one that you want depending on the state using graphicsLayer { alpha = }

Box {
    Text(
        // regular
        modifier = Modifier.graphicsLayer { alpha = if (isSelected) 0f else 1f }
    )

    Text(
        // bold
        modifier = Modifier.graphicsLayer { alpha = if (isSelected) 1f else 0f }
    )
}

[AmrJyniat]

Thanks bro 🙌