How to achieve the layering effect of one Composable on top of another when showing a dialog using Jetpack Compose

Question

I'm hoping to understand how I can achieve this behavior using Jetpack Compose in Android when displaying a dialog on top of the current Composable view.

Desired State:

Animation when clicking on the Filter button at the bottom. This is from the app Culture Trip on iOS.

I currently have a dialog like below. If you notice, my content is still visible but I would like to have it appear as if it's a page layer that's in the background.

Notice the red arrow in the desired state picture. I can mimic that behavior by having a row and setting the background color with padding but looking for a more elegant solution or wondering if there is standard behavior that I don't know about.

Actual State:

Answer 1

For displaying your dialog above, you need to use Box and call dialog at the very bottom of this Box.