android-maps-compose icon indicating copy to clipboard operation
android-maps-compose copied to clipboard

GoogleMap inside a Dialog glitches and shows unwanted trasparency

Open matteo-goghero-leitha opened this issue 1 year ago • 8 comments

Please be sure to include as much information as possible:

Environment details

OS type and version: Android 14 (issue discovered only on Google Pixel 7a) Library and version: com.google.maps.android:maps-compose:5.0.3 Compose version: BOM 2024.04.00, Compiler 1.5.10

Steps to reproduce

  1. Create a simple layout with some content
  2. Add a composable Dialog on top of this content
  3. Put a GoogleMap inside the aforementioned dialog
  4. Pan and Zoom the map and look closely around streets or railways in particular, you will notice a slight transparency around the border of map's elements that allows to see content beneath the dialog.

Code example

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier = Modifier.fillMaxSize()) {
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Red))
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Green))
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Blue))
            }
            Dialog(
                onDismissRequest = {},
            ) {
                GoogleMap()
            }
        }
    }
}

Screenshots

Screenshot_20240624-145451

Screenshot_20240624-145451

This is what happens in our app, sometimes it glitches even worse

Screenshot_20240624-151916

Footnote

This issue has only been observed on Google Pixel 7a, we tested 2 different 7a and both of them have this issue. Other phones with android 14 including S23 ultra and Pixel 4a do not have this issue.

We have also tried to:

  • put a colored box inside the dialog and behind the map
  • draw a filled rectangle with drawBehind modifier
  • set the GoogleMapOptions.backgroundColor property but neither of those have resolved the issue.

Thanks.

matteo-goghero-leitha avatar Jun 24 '24 13:06 matteo-goghero-leitha

Any updates on this? Thank you.

matteo-goghero-leitha avatar Jul 29 '24 12:07 matteo-goghero-leitha

I am experiencing the exact same issue when using the map inside a Dialog composable. The background is transparent on a Pixel 7 but it works as expected in the emulator.

Pixel 7: Pixel7

Emulator: Emulator

I am using Compose 1.6.8 and 6.1.2/4.3.2 of this library.

Another approach I tried is adding a background directly to the dialog bit it did also not work:

val localView = LocalView.current
LaunchedEffect(localView) {
    (localView.parent as? DialogWindowProvider)?.window?.setBackgroundDrawable(android.graphics.drawable.ColorDrawable(android.graphics.Color.RED))
}

ln-12 avatar Sep 04 '24 14:09 ln-12

Any updates on this or maybe a workaround? Thanks

sacelis avatar Oct 11 '24 03:10 sacelis

Hi, any updates? Thank you

matteo-goghero-leitha avatar Feb 07 '25 07:02 matteo-goghero-leitha

Still no updates or workarounds? Thanks

matteo-goghero-leitha avatar Sep 03 '25 08:09 matteo-goghero-leitha

This still happens on some devices with com.google.maps.android:maps-compose:6.12.1 and androidx.compose:compose-bom:2025.10.00 ... any updates? 🙏

DanicMa avatar Oct 22 '25 10:10 DanicMa

This is still a major issue for us. It also happens in satellite mode depending on the zoom level.

https://github.com/user-attachments/assets/dff2a4a4-fb85-44d7-a7e1-450896884ddd

ln-12 avatar Oct 30 '25 08:10 ln-12