Skip to content

Instantly share code, notes, and snippets.

@ardakazanci
Created January 11, 2024 17:13
Show Gist options
  • Save ardakazanci/6f32c080351d8e959c0d377ccfb4e742 to your computer and use it in GitHub Desktop.
Save ardakazanci/6f32c080351d8e959c0d377ccfb4e742 to your computer and use it in GitHub Desktop.
Showcase For Compose
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
ShowcaseForComposeTheme {
MyScreen()
}
}
}
}
@Composable
fun SpotlightEffect(targetRect: Rect, baseRadius: Float) {
var targetRadius by remember { mutableStateOf(baseRadius) }
val animatedRadius by animateFloatAsState(
targetValue = targetRadius,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 1000, easing = LinearEasing),
repeatMode = RepeatMode.Reverse
)
)
LaunchedEffect(Unit) {
while (true) {
targetRadius = if (targetRadius == baseRadius) baseRadius + 220F else baseRadius
delay(1000)
}
}
Canvas(modifier = Modifier.fillMaxSize()) {
with(drawContext.canvas.nativeCanvas) {
val checkPoint = saveLayer(null, null)
drawRect(color = Color.Black.copy(alpha = 0.85f))
val maskPaint = Paint().apply {
color = Color(0f, 0f, 0f, 0f)
blendMode = BlendMode.Clear
}
val spotlightCenterX = targetRect.left + targetRect.width / 2
val spotlightCenterY = targetRect.top + targetRect.height / 2
drawCircle(
spotlightCenterX,
spotlightCenterY,
animatedRadius,
maskPaint.asFrameworkPaint()
)
restoreToCount(checkPoint)
}
}
}
@Composable
fun MyScreen() {
var showSpotlight by remember { mutableStateOf(true) }
var buttonRect by remember { mutableStateOf(Rect(0f, 0f, 0f, 0f)) }
val spotlightRadius = maxOf(buttonRect.width, buttonRect.height) / 2
BoxWithConstraints(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Button(
onClick = { showSpotlight = !showSpotlight },
modifier = Modifier
.onGloballyPositioned { layoutCoordinates ->
val position = layoutCoordinates.positionInRoot()
val size = IntSize(layoutCoordinates.size.width, layoutCoordinates.size.height)
buttonRect = Rect(position.x, position.y, position.x + size.width, position.y + size.height)
}
) {
Text("Hello Linkedin")
}
if (showSpotlight) {
SpotlightEffect(targetRect = buttonRect, baseRadius = spotlightRadius)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment