Skip to content

Instantly share code, notes, and snippets.

@arthurgonzaga
Last active April 7, 2024 22:17
Show Gist options
  • Save arthurgonzaga/598267f570e38425fc52f97b30e0619d to your computer and use it in GitHub Desktop.
Save arthurgonzaga/598267f570e38425fc52f97b30e0619d to your computer and use it in GitHub Desktop.
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
fun Modifier.coloredShadow(
color: Color,
alpha: Float = 0.2f,
borderRadius: Dp = 0.dp,
shadowRadius: Dp = 20.dp,
offsetY: Dp = 0.dp,
offsetX: Dp = 0.dp
) = composed {
val shadowColor = color.copy(alpha = alpha).toArgb()
val transparent = color.copy(alpha= 0f).toArgb()
this.drawBehind {
this.drawIntoCanvas {
val paint = Paint()
val frameworkPaint = paint.asFrameworkPaint()
frameworkPaint.color = transparent
frameworkPaint.setShadowLayer(
shadowRadius.toPx(),
offsetX.toPx(),
offsetY.toPx(),
shadowColor
)
it.drawRoundRect(
0f,
0f,
this.size.width,
this.size.height,
borderRadius.toPx(),
borderRadius.toPx(),
paint
)
}
}
}
@llama-0
Copy link

llama-0 commented Jul 28, 2021

Could this be applied to circular Image()? May be with slight modifications

@arthurgonzaga
Copy link
Author

Why couldn't it be? What kind of modifications do you think it would improve the function?

@jemshit
Copy link

jemshit commented Aug 20, 2021

I suppose you have to disable hardware acceleration for setShadowLayer to work? That's what i have been reading from SO

@o2e
Copy link

o2e commented Sep 6, 2021

api <= 28 disable hardware acceleration.Is there another way?

@atonamy
Copy link

atonamy commented Sep 14, 2021

I suppose you have to disable hardware acceleration for setShadowLayer to work? That's what i have been reading from SO

How to do this teach me?
I have trouble with this code on Android 6 emulator. Is not working :(

@atonamy
Copy link

atonamy commented Sep 14, 2021

api <= 28 disable hardware acceleration.Is there another way?

How to disable any code snippet for Jetpack Compose?

@o2e
Copy link

o2e commented Sep 14, 2021

api <= 28 disable hardware acceleration.Is there another way?

How to disable any code snippet for Jetpack Compose?

I don't have an answer for now

@llama-0
Copy link

llama-0 commented Dec 15, 2021

I found a workaround for circular items on StackOverflow (second answer)

@mbunderline76
Copy link

figma has spread attribute for shadows
how can i implement shadows with spread in compose?
by the way thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment