Text Scrolling in Jetpack Compose

Published in

Make Apps Simple

3 min readJun 27, 2023

There are a lot of variations in which we may want to have a scrolling effect of Text in our app. Showcased a few of them here.

1. Vertical Scrolling

The vertical scroll takes the maximum width available to a Composable. If a line is not rendered completely the line breaks and the remaining text is continued in the next line.

So, when using vertical scroll, we can view the complete text by scrolling if required.

2. Horizontal Scrolling

For horizontal scrolling, the text is rendered in the same line till the text is rendered completely or there is an end-of-line character. \n

If a text has a lot of lines split using \n , it is possible that the text may not be rendered completed vertically. And as there is no vertical scrolling, the clipped text can not be viewed.

3. Vertical And Horizontal Scrolling Text

It is also possible to have text with both direction scrolling.

Here the Text is rendered horizontally till the text is completely rendered or an end-of-line character is reached. For each \n character, a line break happens and rendering continues from the next line.

If a text has a lot of lines split using \n , now it is possible to view it completely as vertical scrolling is enabled now.

Constraints

The above 3 scenarios we saw did not have any constraints on height and width. But we may have constraints as well in our apps.

4. Vertical Scrolling with Fixed height

In this case, the text is vertically rendered till the given height and it is scrollable.

5. Horizontal Scrolling with Fixed Width

Same as “Horizontal Scrolling”, but with a fixed width.

6. Vertical And Horizontal Scrolling Text with Fixed Height and Width

Same as “Vertical And Horizontal Scrolling”, but with a fixed height and width.

7. Vertical Scrolling with a Fixed Number of lines instead of a fixed height

All the above scenarios are supported directly by Jetpack Compose. But, there is no direct attribute to do so to define a max number of lines.

Extrapolating on the above examples, this would seem like the obvious approach to do so.

But, we can notice that this does NOT work.

I had raised an issue for this here — https://issuetracker.google.com/issues/288664679 and it was closed as intended behavior.

The reason provided was

When maxLines are defined, Text composable restricts its layout to only be as tall as maxLines allows. It doesn't mean that text is still flowing below and gets clipped. Hence, it cannot be scrolled into view with other scroll modifiers.

So, to achieve the required behavior, I used TextMeasurer to calculate the height required and then used it.