I'm using the Zoomable library to Zoom In/Zoom Out a Text element in Jetpack Compose.

The problem is that when I enlarge the text size, the content overflows the limits of the screen.

Code:

@Composable
fun TextZoomable(text: AnnotatedString, onTap: (Offset) -> Unit) {
    val zoomState = rememberZoomState()
    Box(
        modifier = Modifier
            .fillMaxSize()
            .zoomable(
                zoomState = zoomState,
                onTap = onTap
            ),
    ) {
        Text(
            text = text,
        )
    }
}

Contextual use:

var text = AnnotatedString("")
//text is my some large content ...

Column {
    TextZoomable(onTap = onTap, text = text)
}

This is a screenshot before zooming out:

When I Zoom Out, this happens:

Is there a way to Zoom In/Out a Text element without it overflowing the screen boundaries?

Would it be possible to do this without using third-party libraries?

I'm using the Zoomable library to Zoom In/Zoom Out a Text element in Jetpack Compose.

The problem is that when I enlarge the text size, the content overflows the limits of the screen.

Code:

@Composable
fun TextZoomable(text: AnnotatedString, onTap: (Offset) -> Unit) {
    val zoomState = rememberZoomState()
    Box(
        modifier = Modifier
            .fillMaxSize()
            .zoomable(
                zoomState = zoomState,
                onTap = onTap
            ),
    ) {
        Text(
            text = text,
        )
    }
}

Contextual use:

var text = AnnotatedString("")
//text is my some large content ...

Column {
    TextZoomable(onTap = onTap, text = text)
}

This is a screenshot before zooming out:

When I Zoom Out, this happens:

Is there a way to Zoom In/Out a Text element without it overflowing the screen boundaries?

Would it be possible to do this without using third-party libraries?

• android
• android-jetpack-compose
• pinchzoom

• without it overflowing the screen boundaries - So do you want the Text to do line breaks accordingly, so that it fits the screen without overflowing? – BenjyTec Commented Feb 3 at 13:40
• @BenjyTec Something like this, is my old implementation of a zoomable TextView. I would like to achieve something similar in Jetpack Compose. – A. Cedano Commented Feb 3 at 14:35

1 Answer 1

The Zoomable Composable will not work in this case, as it performs any zoom on the graphical layer. What you actually want to do is to transform the value assigned as fontSize of your Text Composable.

You can use the transformable Modifier to achieve this:

@Composable
fun ZoomableText() {

    var textScale by remember { mutableFloatStateOf(1f) }
    val zoomState = rememberTransformableState { zoomChange, _, _ ->
        textScale *= zoomChange
    }

    Text(
        modifier = Modifier
            .fillMaxSize()
            .transformable(state = zoomState, lockRotationOnZoomPan = true)
            .verticalScroll(rememberScrollState()),
        text = LoremIpsum(2000).values.joinToString(),
        fontSize = (textScale * 16).sp,  // set base text size as needed
        lineHeight = (textScale * 16).sp  // should be same or more than fontSize
    )
}

Also make sure you are using the latest Compose Libraries, there were bugs in older library versions when combining transformable with verticalScroll. If you are using Compose BOM, use as of 01/2025

composeBom = "2025.01.01"

Output: