Saturday, 25 September 2021

Popup dialog with transparent background

How to create popup dialog with Jetpack Compose which could be declared as NavHost destination route and called from any other app page.

An example of desired result:

enter image description here

Compose framework provides Dialog component, but it's hard to customize and there is ugly built-in animation. I would prefer to build my own fully customizable popup view with optional custom animation. The problem - I can't create popup with transparent sideview, it's black.

Any ideas?

UPD:

A little more code to make it clear

override fun onCreate(savedState: Bundle?) {
    NavHost(navController = controller, startDestination = "main_page") {
        composable(route = "main_page", content = { MainPage() })
        composable(route = "my_popup", content = { ThePopupDialog() })
    }
}

@Composable
fun MainPage() {
    // ... some button here to launch "my_popup" route by click
}

@Composable
fun ThePopupDialog() {
    Box {
        Text("The popup content here")
    }
}

Box view in ThePopupDialog doesn't cover the whole screen and I need the sidearea to be (half)transparent.



from Popup dialog with transparent background

No comments:

Post a Comment