Hi all :android-wave: In certain cases, I would like to draw an image on top of a Text such that the...

# compose-android

[Shivam Verma]

Hi all 👋 In certain cases, I would like to draw an image on top of a Text such that the image scales to fit the height and width of the Text component. I'm trying the following approach but I cannot find a way for the image to cover the whole Text component. Any pointers would be really helpful. See video in thread 🧵

Text(
    text = text,
    color = Color.Transparent,
    modifier = modifier.drawWithContent {
        drawContent()
        drawImage(image = bitmap, colorFilter = ColorFilter.tint(tintColor, BlendMode.SrcIn))
    },
)

[ephemient]

drawImage(dstSize = size)

or whatever other adjustments you want to do too preserve aspect ratio

[Shivam Verma]

image_on_text.webm

image_on_text.webm

[Shivam Verma]

@ephemient wow! that seems to work perfectly. thanks so much 🙏 Are there any performance improvements I could make ?

[efemoney]

Are there any performance issues you are facing?

[Shivam Verma]

@efemoney not particularly. I noticed another modifier 👉 drawWithCache and was wondering if there was a way to use that instead for better performance

[efemoney]

For your particular case there is nothing to “cache”.

The difference is that the withCache modifier gives you a lambda where you can first allocate (and hence cache) some objects that are then used across different runs of the actual draw operation. So expensive calculations, usually size-based calculations, can be done once and reused and will be rerun when the size changes for instance