Idea: Different overlay effects

[svenjacobs]

Currently we only have one overlay effect, which is darkening the background. We could implement different overlay composables with new effects like blurring or pixelating the background, if this is natively possible with Compose.

[rajkumaranbu94]

Hi @svenjacobs,

Would you consider adding support for below features to the library?

• Currently, the overlay only darkens the background. It would be awesome to support different effects like light transparent overlays or blur effects behind the highlighted element. Since Jetpack Compose supports blur (via RenderEffect on Android 12+), this could be a powerful enhancement.It would allow developers to easily implement different visual effects like blurring, pixelation, or lighter overlays.
• And sometimes the default padding around the revealed element feels too large. It would be great to have an option to disable or customize this padding so that only the arrowed bubble coachmark is visible, making the highlight cleaner and less intrusive.

They would really help tailor coachmarks to various UI styles.

[svenjacobs]

Another solution just came to my mind: Have you tried setting the background color of the dim effect to a transparent color?

[rajkumaranbu94]

Another solution just came to my mind: Have you tried setting the background color of the dim effect to a transparent color?

Hi @svenjacobs , I tried but its applied on top the existing background color.

[rajkumaranbu94]

I'd like a light transparent overlay instead of the default dark one.

A background effect that does nothing should be fairly simple 😉 Since the reveal area around a revealable item is subtracted (removed) from the background effect, there would be no reveal area with a transparent background. I think that is what you're looking for? Do you want to investigate and create a PR?

Hi @svenjacobs , Yes right, I created my own custom one as per my requirement using native compose for android. If its helps you, then I can investigate and provide you PR.

[svenjacobs]

Hi @svenjacobs , I tried but its applied on top the existing background color.

I tried this in the demo app and it seems to work? I added

overlayEffect = DimRevealOverlayEffect(color = Color.Transparent),

to Reveal and removed the borderStroke from the revealable modifiers and this is what I get:

Isn't that what you are looking for? Please provide a screenshot when it's not working for you.

[rajkumaranbu94]

Hi @svenjacobs, This is cool, I tried its working for me too. Thank you so much!
Then the only issue is, showing pointer arrow always on centre means if target element is on the edge then bubble will be hided on off screen. Here the screenshot for your reference,