Hi there! I’m trying to achieve a pop-up effect wh...

# compose

[sharif saleh]

Hi there!
I’m trying to achieve a pop-up effect when selecting a specific marker on the map, making it larger than the normal markers on the map screen.
I’m using the scale modifier, but the issue is that the border doesn’t appear as expected. I also tried using drawBehind, but it didn’t work as intended.
i need to make the border more flexible with the icon size
any help?
More in 🧵

[sharif saleh]

@Composable
@GoogleMapComposable
private fun MarkerItemContent(
wrapper: MarkerStateWrapper
) {
val scale = remember { Animatable(1f) }
LaunchedEffect(wrapper.isSelected) {
scale.animateTo(
targetValue = if (wrapper.isSelected) 1.5f else 1f,
animationSpec = tween()
)
}

Box(
modifier = Modifier
.scale(scale.value)
.size(32.dp)
.border(
border = BorderStroke(
2.dp,
MyTheme.colors.border.primary,
),
shape = CircleShape
)
.clip(CircleShape)
.background(MyTheme.colors.buttons.marker.background),
contentAlignment = Alignment.Center
) {
MarkerIcon()
}
}

@Composable
private fun MarkerIcon() {
val drawCircleColor by animateColorAsState(
targetValue = MyTheme.colors.buttons.marker.icon, label = “icon color”
)

Icon(
painterResource(id = R.drawable.vector_icon_logo),
tint = MyTheme.colors.buttons.marker.icon,
contentDescription = “”,
modifier = Modifier
.size(MyTheme.spacing.mediumLarge)
.padding(MyTheme.spacing.one)
.drawBehind {
drawCircle(color = Color.White, style = Fill)
drawCircle(color = drawCircleColor, style = Stroke(width = 3f))
}
.padding(MyTheme.spacing.extraTiny)
)
}

[sharif saleh]

the image in the right is a normal marker, and one on the right is the selected one.

[Chrimaeon]

Move the scale modifier below/after the size and border. Would that help?

[sharif saleh]

Thank you, dear @Chrimaeon, but the issue is still not resolved
i applied the modifiers in the order you suggested: size/border/scale/clip
in the second image, i tried a different order: size/clip/border/scale