ImageViewer Android map with proper scroll (#3020)

examples/imageviewer/shared/src/androidMain/kotlin/example/imageviewer/view/LocationVisualizer.android.kt

@@ -1,21 +1,49 @@
 package example.imageviewer.view
 
+import android.view.MotionEvent
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInteropFilter
 import com.google.android.gms.maps.model.CameraPosition
 import com.google.android.gms.maps.model.LatLng
 import com.google.maps.android.compose.GoogleMap
 import com.google.maps.android.compose.rememberCameraPositionState
 import example.imageviewer.model.GpsPosition
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
-actual fun LocationVisualizer(modifier: Modifier, gps: GpsPosition, title: String) {
+actual fun LocationVisualizer(
+    modifier: Modifier,
+    gps: GpsPosition,
+    title: String,
+    parentScrollEnableState: MutableState<Boolean>
+) {
     val currentLocation = LatLng(gps.latitude, gps.longitude)
     val cameraPositionState = rememberCameraPositionState {
         position = CameraPosition.fromLatLngZoom(currentLocation, 10f)
     }
+    LaunchedEffect(cameraPositionState.isMoving) {
+        // This code helps to use Compose GoogleMap inside scrollable container.
+        // Useful code sample: https://github.com/googlemaps/android-maps-compose/blob/abb3e3581681f26316fdd0b8284597f8fc61daa1/app/src/main/java/com/google/maps/android/compose/MapInColumnActivity.kt#L57
+        if (!cameraPositionState.isMoving) {
+            parentScrollEnableState.value = true
+        }
+    }
     GoogleMap(
-        modifier = modifier,
+        modifier = modifier.pointerInteropFilter(
+            onTouchEvent = {
+                when (it.action) {
+                    MotionEvent.ACTION_DOWN -> {
+                        parentScrollEnableState.value = false
+                        false
+                    }
+                    else -> true
+                }
+            }
+        ),
         cameraPositionState = cameraPositionState
     )
 }

examples/imageviewer/shared/src/commonMain/kotlin/example/imageviewer/view/LocationVisualizer.common.kt

@@ -1,8 +1,14 @@
 package example.imageviewer.view
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
 import example.imageviewer.model.GpsPosition
 
 @Composable
-expect fun LocationVisualizer(modifier: Modifier, gps: GpsPosition, title: String)
+expect fun LocationVisualizer(
+    modifier: Modifier,
+    gps: GpsPosition,
+    title: String,
+    parentScrollEnableState: MutableState<Boolean>
+)

examples/imageviewer/shared/src/commonMain/kotlin/example/imageviewer/view/MemoryScreen.kt

@@ -53,6 +53,7 @@ fun MemoryScreen(
     val picture = pictures.getOrNull(memoryPage.pictureIndex) ?: return
     var headerImage: ImageBitmap? by remember(picture) { mutableStateOf(null) }
     val platformContext = getPlatformContext()
+    val verticalScrollEnableState = remember { mutableStateOf(true) }
     LaunchedEffect(picture) {
         headerImage = imageProvider.getImage(picture)
     }
@@ -61,7 +62,7 @@ fun MemoryScreen(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .verticalScroll(scrollState)
+                .verticalScroll(scrollState, enabled = verticalScrollEnableState.value)
         ) {
             Box(
                 modifier = Modifier
@@ -100,6 +101,7 @@ fun MemoryScreen(
                             .height(200.dp),
                         gps = picture.gps,
                         title = picture.name,
+                        parentScrollEnableState = verticalScrollEnableState,
                     )
                     Spacer(Modifier.height(50.dp))
                     Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {

examples/imageviewer/shared/src/desktopMain/kotlin/example/imageviewer/view/LocationVisualizer.desktop.kt

@@ -2,6 +2,7 @@ package example.imageviewer.view
 
 import androidx.compose.foundation.Image
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import example.imageviewer.model.GpsPosition
@@ -10,7 +11,12 @@ import org.jetbrains.compose.resources.painterResource
 
 @OptIn(ExperimentalResourceApi::class)
 @Composable
-actual fun LocationVisualizer(modifier: Modifier, gps: GpsPosition, title: String) {
+actual fun LocationVisualizer(
+    modifier: Modifier,
+    gps: GpsPosition,
+    title: String,
+    parentScrollEnableState: MutableState<Boolean>
+) {
     Image(
         painter = painterResource("dummy_map.png"),
         contentDescription = "Map",

examples/imageviewer/shared/src/iosMain/kotlin/example/imageviewer/view/LocationVisualizer.ios.kt

@@ -1,6 +1,7 @@
 package example.imageviewer.view
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.interop.UIKitView
@@ -11,7 +12,12 @@ import platform.MapKit.MKMapView
 import platform.MapKit.MKPointAnnotation
 
 @Composable
-actual fun LocationVisualizer(modifier: Modifier, gps: GpsPosition, title: String) {
+actual fun LocationVisualizer(
+    modifier: Modifier,
+    gps: GpsPosition,
+    title: String,
+    parentScrollEnableState: MutableState<Boolean>
+) {
     val location = CLLocationCoordinate2DMake(gps.latitude, gps.longitude)
     val annotation = remember {
         MKPointAnnotation(