4

Say I have a fixed size rectangle with some text inside. Since the user can change the font size from the System - Accessibility settings on the device, the font might not fit inside the fixed sized rectangle. If this happen, we would like to render the text outside the rectangle instead.

AFAIK I should somehow measure the text's width (for example) and see if it fits inside the rectangle and if not, layout the components in a different manner.

How would I do this in Jetpack Compose?

So with this pseudo code, if text does not fit inside the Box I would like to lay out the text below it, thus introducing a Column etc instead.

@Composable
fun myView() {
  val text = Text("Some text")
  Box(modifier = Modifier.size(40.dp)) {
      text
  }
}
2
  • Is this analogous to autosizeTextType in XML layouts? Oct 21, 2022 at 17:54
  • 1
    @IgorGanapolsky Not directly. What I was going for was to have a completely different layout for the component if the text would not fit inside a given component. In my case, instead of rendering the text inside a rectangle, I wanted to render it outside the rectangle.
    – Johan Paul
    Oct 25, 2022 at 14:34

2 Answers 2

8

Using onTextLayout you can get size of drawn text.

To prevent actually drawing it while calculating the size you can use drawWithContent modifier.

var textSize by remember { mutableStateOf<IntSize?>(null) }
val density = LocalDensity.current
val maxDimensionDp = remember(textSize) {
    textSize?.let { textSize ->
        with(density) {
            maxOf(textSize.width, textSize.height).toDp()
        }
    }
}
val textComposable = @Composable {
    Text(
        "Some text",
        onTextLayout = {
            textSize = it.size
        },
        modifier = Modifier.drawWithContent {
            if (textSize != null) {
                drawContent()
            }
        }
    )
}
when {
    maxDimensionDp == null -> {
        // calculating size.
        // because of drawWithContent it's not gonna be drawn
        textComposable()
    }
    maxDimensionDp < 40.dp -> {
        Box(modifier = Modifier.size(40.dp).background(Color.Red)) {
            textComposable()
        }
    }
    else -> {
        Column(modifier = Modifier.background(Color.Green)) {
            textComposable()
        }
    }
}
0
0

You have also option to manage scalable size of widget and scalable size of font with help of below library. May be that can help you to give option to manage some alternative way.

https://github.com/mbpatel6245/cdp

https://github.com/mbpatel6245/csp

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.