Single-pass Text Expansion

index

Intro

Displaying potentially long blocks of text often requires a nice UI pattern: show the first few lines and provide a “show more” button if the text exceeds this limit. Implementing this efficiently in Jetpack Compose can seem tricky. How do you know if the text actually overflows its container before deciding whether to render the “show more” button, ideally without causing unnecessary recompositions or multiple layout passes? Let’s dive in SubcomposeLayout function in Compose that allows you to measure parts of your UI (sub-compositions) during the layout phase itself, make decisions based on those measurements, and then measure and place other parts accordingly—all within a single layout pass. Let’s explore how we can combine SubcomposeLayout with the onTextLayout callback provided by the Text composable to build a highly efficient ExpandableComment component.

The Requirement

We want to display a comment text. If the text fits within a predefined maximum number of lines (let’s say MAX_LINES), we show just the text. However, if the text requires more than MAX_LINES, we truncate it and display a “show more” button bellow. Clicking this button expands the text fully and changes the button text to “show less”. This needs to happen efficiently, avoiding extra recompositions just to check the text size.

The Solution SubcomposeLayout and onTextLayout combo

Straight into code, here’s the composable function that achieves this:

1
const val MAX_LINES = 5 // Define the collapsed line limit
2

3
@Composable
4
private fun ExpandableComment(lines: Int) {
5
    // State to track whether the comment is expanded or not
6
    var isExpanded by remember { mutableStateOf(false) }
7
    // State variable to capture if the text overflows the max lines
8
    var hasOverflow by remember { mutableStateOf(false) }
9

10
    // SubcomposeLayout is the core of this solution
11
    SubcomposeLayout(Modifier.padding(12.dp)) { constraints ->
12
        // Determine the max lines based on the expanded state
13
        val maxLines = if (isExpanded) Int.MAX_VALUE else MAX_LINES
14

15
        // --- First Sub-composition: Measure the Text ---
16
        // We measure the text first to see if it overflows.
17
        val textPlaceable = subcompose("text") {
18
            Text(
19
                text = prepareText(lines),
20
                modifier = Modifier
21
                    .animateContentSize()
22
                    .background(Color.LightGray),
23
                maxLines = maxLines,
24
                onTextLayout = { textLayoutResult ->
25
                    // This callback is crucial! It gives us layout info
26
                    // *after* measurement but *before* this SubcomposeLayout finishes.
27
                    hasOverflow = textLayoutResult.hasVisualOverflow
28
                }
29
            )
30
        }.first().measure(constraints)
31

32
        // --- Second Sub-composition (Conditional): Measure the Button ---
33
        // We *only* measure the button if the text overflowed OR if it's already expanded.
34
        val buttonPlaceable = if (hasOverflow || isExpanded) {
35
            subcompose("button") {
36
                Button(onClick = {
37
                    isExpanded = !isExpanded
38
                }) {
39
                    Text(if (isExpanded) "show less" else "show more")
40
                }
41
            }.first().measure(constraints)
42
        } else {
43
            null
44
        }
45

46
        // --- Layout Phase ---
47
        // Now we know the size of the text and the button (if it exists).
48
        // Calculate the total height needed.
49
        val totalHeight = textPlaceable.height + (buttonPlaceable?.height ?: 0)
50

51
        // The layout() block defines the size of the SubcomposeLayout
52
        // and places the measured children (Placeables).
53
        layout(textPlaceable.width, totalHeight) {
54
            // Place the text at the top-left (0, 0)
55
            textPlaceable.placeRelative(0, 0)
56
            // Place the button (if it exists) below the text
57
            buttonPlaceable?.placeRelative(0, textPlaceable.height)
58
        }
59
    }
60
}

Code Breakdown

State: isExpanded tracks the expansion state, while hasOverflow captures the text overflow status derived from onTextLayout.
SubcomposeLayout: Orchestrates the measurement process.
First subcompose("text"): Measures the Text composable using maxLines determined by isExpanded. Crucially, the onTextLayout callback updates hasOverflow based on textLayoutResult.hasVisualOverflow during this measurement phase. The animateContentSize() modifier handles the smooth transition.
Conditional subcompose("button"): Measures the Button only if hasOverflow is true (text was truncated) or isExpanded is true (needs “show less”). This avoids measuring the button when unnecessary.
layout { ... }: Defines the SubcomposeLayout’s final size based on the measured text and button (if present), then places the textPlaceable and buttonPlaceable accordingly.

Key Advantages of this Approach

Single Layout Pass: The decision to show the button and the measurement of both text and button (if needed) happen within a single execution of the SubcomposeLayout lambda.
No Unnecessary Recomposition: The component doesn’t need to recompose just to check if the text overflowed after an initial measurement. The check happens during layout via onTextLayout. Recomposition only happens when the isExpanded state actually changes (due to the button click).
Efficiency: Measuring the button only when necessary avoids wasted computation.

Demo

Full Source Code

Full code is available here: https://github.com/MikolajKakol/sublayout-textresult/blob/master/composeApp/src/commonMain/kotlin/me/mikolaj_kakol/sublayout_text/App.kt

1
package me.mikolaj_kakol.sublayout_text
2

3
import androidx.compose.animation.animateContentSize
4
import androidx.compose.foundation.background
5
import androidx.compose.foundation.layout.Column
6
import androidx.compose.foundation.layout.fillMaxWidth
7
import androidx.compose.foundation.layout.padding
8
import androidx.compose.material.Button
9
import androidx.compose.material.MaterialTheme
10
import androidx.compose.material.Text
11
import androidx.compose.runtime.*
12
import androidx.compose.ui.Alignment
13
import androidx.compose.ui.Modifier
14
import androidx.compose.ui.graphics.Color
15
import androidx.compose.ui.layout.SubcomposeLayout
16
import androidx.compose.ui.unit.dp
17

18
private const val MAX_LINES = 5
19

20
@Composable
21
fun App() {
22
    MaterialTheme {
23
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
24
            Text("Comment is less than $MAX_LINES lines")
25
            ExpandableComment(4)
26
            Text("Comment is more than $MAX_LINES lines")
27
            ExpandableComment(8)
28
        }
29
    }
30
}
31

32
@Composable
33
private fun ExpandableComment(lines: Int) {
34
    var isExpanded by remember { mutableStateOf(false) }
35
    SubcomposeLayout(Modifier.padding(12.dp)) { constraints ->
36
        var hasOverflow = false
37
        val maxLines = if (isExpanded)
38
            Int.MAX_VALUE
39
        else
40
            MAX_LINES
41
        val reg = subcompose("reg") {
42
            Text(
43
                prepareText(lines),
44
                modifier = Modifier
45
                    .animateContentSize()
46
                    .background(Color.LightGray),
47
                maxLines = maxLines,
48
                onTextLayout = {
49
                    hasOverflow = it.hasVisualOverflow
50
                }
51
            )
52
        }.first().measure(constraints)
53

54
        val button = if (hasOverflow || isExpanded) {
55
            subcompose("button") {
56
                Button(onClick = {
57
                    isExpanded = !isExpanded
58
                }) {
59
                    if (isExpanded) {
60
                        Text("show less")
61
                    } else {
62
                        Text("show more")
63
                    }
64
                }
65
            }.first().measure(constraints)
66
        } else null
67

68

69
        layout(reg.width, reg.measuredHeight + (button?.height ?: 0)) {
70
            reg.placeRelative(0, 0)
71
            button?.placeRelative(0, reg.measuredHeight)
72
        }
73
    }
74
}
75

76

77
private fun prepareText(lines: Int): String {
78
    return buildString {
79
        repeat(lines) { this.appendLine("Comment line ${it + 1}") }
80
    }.trim()
81
}

Summary

SubcomposeLayout is an incredibly powerful tool in the Jetpack Compose layout system. By allowing measurement and layout decisions within the layout pass, it enables the creation of complex, adaptive, and highly efficient UI components like this ExpandableComment, solving challenges that might otherwise require less performant workarounds. Combined with callbacks like onTextLayout, you gain fine-grained control over layout behaviour based on the actual measured results of your composables.