So i am trying to make auto resizable Text in compose and I found a solution online. Code is given b...

# compose

[Abdul Hafeez Sajid]

So i am trying to make auto resizable Text in compose and I found a solution online. Code is given below:

@Composable
fun AutoResizeText(
    text: String,
    fontSizeRange: FontSizeRange,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    style: TextStyle = LocalTextStyle.current,
) {
    var fontSizeValue by remember { mutableStateOf(fontSizeRange.max.value) }
    var readyToDraw by remember { mutableStateOf(false) }

    Text(
        text = text,
        color = color,
        maxLines = maxLines,
        fontStyle = fontStyle,
        fontWeight = fontWeight,
        fontFamily = fontFamily,
        letterSpacing = letterSpacing,
        textDecoration = textDecoration,
        textAlign = textAlign,
        lineHeight = lineHeight,
        overflow = overflow,
        softWrap = softWrap,
        style = style,
        fontSize = fontSizeValue.sp,
        onTextLayout = {
            Timber.d("onTextLayout")
            if (it.didOverflowHeight && !readyToDraw) {
                Timber.d("Did Overflow height, calculate next font size value")
                val nextFontSizeValue = fontSizeValue - fontSizeRange.step.value
                if (nextFontSizeValue <= fontSizeRange.min.value) {
                    // Reached minimum, set minimum font size and it's readToDraw
                    fontSizeValue = fontSizeRange.min.value
                    readyToDraw = true
                } else {
                    // Text doesn't fit yet and haven't reached minimum text range, keep decreasing
                    fontSizeValue = nextFontSizeValue
                }
            } else {
                // Text fits before reaching the minimum, it's readyToDraw
                readyToDraw = true
            }
        },
        modifier = modifier.drawWithContent { if (readyToDraw) drawContent() }
    )
}

data class FontSizeRange(
    val min: TextUnit,
    val max: TextUnit,
    val step: TextUnit = DEFAULT_TEXT_STEP,
) {
    init {
        require(min < max) { "min should be less than max, $this" }
        require(step.value > 0) { "step should be greater than 0, $this" }
    }

    companion object {
        private val DEFAULT_TEXT_STEP = 1.sp
    }
}

Problem is above solution works only when I apply either border or maxLines property to modifier. Even though specific size is set. If I remove both border and maxlines then text does not auto resize.

any help!

[Zach Klippenstein (he/him) [MOD]]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1616265877303000

[Zach Klippenstein (he/him) [MOD]]

In the case where the text doesn’t autosize, does it still draw?
Are the incoming constraints forcing it to be bigger than the size you specify with Modifier.size?

Regardless, even if we could get this working, this is a terrible solution since it skips potentially an arbitrary number of frames to calculate the size, completely unnecessarily. It’s better to perform this computation in a loop using TextMeasurer or `Paragraph`/`MultiParagraph` all in the first frame, before the Text composable measures itself for the first time.

[Abdul Hafeez Sajid]

Yes it does draw but does not auto resize.

Yes, you're right. It does take n number of frames to calculate text size and that is very inefficient. Gonna take a look on TextMeasurer or Paragraph/MultiParagraph. If you have any resources regarding these, kindly share. Much appreciated!

[Zach Klippenstein (he/him) [MOD]]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-text/samples/src/main/java/androidx/compose/ui/text/samples/DrawTextSamples.kt