<https://kotlinlang.slack.com/archives/CJLTWPH7S/p...

# compose-android

[Colton Idle]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1683078655895039?thread_ts=1622125126.047600&amp;cid=CJLTWPH7S

Can anyone access CompositingStrategy.Always? Can't seem to use it even though I'm on 1.4

[romainguy]

It’s not called Always

[romainguy]

https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy#Offscreen()

[Colton Idle]

😭

[Colton Idle]

I swear I tried that last night and no go. Will try again. thanks

[Colton Idle]

alright. still not working. guess i am actually doing something wrong. weird. i just copied the code that Nader posted with the replacement for CompositingStrategy

[Colton Idle]

Any idea why my dot is clipped?

[Colton Idle]

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment.Companion.BottomEnd
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.center
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun MyBoxAndBadge() {
    Box(
        Modifier
            .size(48.dp)
            .graphicsLayer {
                compositingStrategy = CompositingStrategy.Offscreen
            }
    ) {
        Box(
            Modifier
                .fillMaxSize()
                .background(Color.Green)
        )
        Dot(
            clipWidth = 2.dp,
            modifier = Modifier
                .size(8.dp)
                .align(BottomEnd)
                .offset(4.dp, 4.dp)
        )
    }
}

@Composable
private fun Dot(clipWidth: Dp, modifier: Modifier) {
    val pxValue = LocalDensity.current.run { clipWidth.toPx() }
    val stroke = remember(pxValue) { Stroke(width = pxValue) }
    Box(
        modifier
            .drawWithContent {
                drawContent()
                drawCircle(
                    Color.Black,
                    size.minDimension / 2,
                    size.center,
                    style = stroke,
                    blendMode = BlendMode.Clear
                )
            }
            .background(Color.Red, CircleShape)
    )
}

@Preview
@Composable
fun PreviewIt() {
    Box(
        Modifier
            .background(Color.White)
            .padding(16.dp)
    ) {
        MyBoxAndBadge()
    }
}

[romainguy]

Without reading the code: the Offscreen strategy does what it says on the tin. It renders into a texture/bitmap, which causes clipping since we can’t draw outside of that texture 🙂

[romainguy]

Whatever has the strategy needs to be large enough to do what you want

[Colton Idle]

oh damn

[Colton Idle]

so i can't offset

[romainguy]

The culprit is most likely that pesky offset() since it doesn’t affect layout

[romainguy]

well you can

[Colton Idle]

well this sucks

[romainguy]

if you make the root thing be larger 🙂

[Colton Idle]

day 3 of trying to get this implemented. lol

[Colton Idle]

ahhhg. what to do...

[romainguy]

Don’t put the red dot in the layer?

[Colton Idle]

i really would like to use offset, because all of my figma designs use this component heavily

[romainguy]

just do the clear in the layer

[Colton Idle]

and the spacing in figma is measure from the green box

[Colton Idle]

if I had to enlarge it to fit the red dot, then everyone using the component would have to know that they need to subtract ~2.dp when setting up spacing with this component.

[romainguy]

then draw the red dot above the layer

[romainguy]

pb solved

[romainguy]

keep the clear inside the layer

[Colton Idle]

ooh. interesting twist.

[Colton Idle]

so just add another top level box, with the dot.

[Colton Idle]

ok. so that seems to work sorta. gotta refine some things, but i think i will go that route. thanks romain!