Auto resize Text in Jetpack Compose

Hi folks, in this article, we’ll explore how to use BasicText for text that automatically resizes based on constraints, and why it's essential in real-world applications.

Note: The compose bom version I’m using is "2025.06.00".

Okay, let’s start. First, let’s see a scenario when a normal Text composable will fail.

@Composable
fun HomeScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
            .padding(horizontal = 24.dp),
        contentAlignment = Alignment.Center
    ) {
        Column {
            // Normal Text
            Text(
                text = "Hey, Eyes up here!",
                maxLines = 1,
                fontSize = 60.sp,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

And you will see something like this in the Preview:

As we can see, the text will get overflown and ellipsized. This will indicate that there’s more text to the right side, but the users will not see the full message.

Now we’ll use BasicText to auto-resize the text: Simply add BasicText composable next to the normal Text composable

@Composable
fun HomeScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
            .padding(horizontal = 24.dp),
        contentAlignment = Alignment.Center
    ) {
        Column {
            // Normal Text
            Text(
                text = "Hey, Eyes up here!",
                maxLines = 1,
                fontSize = 60.sp,
                overflow = TextOverflow.Ellipsis
            )
            // This will auto resize
            BasicText(
                text = "Hey, Eyes up here!",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                autoSize = TextAutoSize.StepBased(
                    minFontSize = 24.sp,
                    maxFontSize = 60.sp
                )
            )
        }
    }
}

And now the Preview will look like this:

Yeh! ✅. Now we can see the text got resized and we can able to read the full message.

That’s it. Thanks for reading. Hope this quick tip will make impact in your real-world projects. Happy Composing!