When used in a LazyColumn, GoogleMap cannot be scrolled vertically
See original GitHub issueThanks for your work on this one, it’s really great to finally have an official Compose wrapper for Google Maps!
In our use case, we have a custom GoogleMaps wrapper using AndroidView that sits inside a LazyColumn. It is able to be scrolled vertically and horizontally without scrolling the LazyColumn by using a transparent view and calling .requestDisallowInterceptTouchEvent(true)
on the parent.
We are hoping to switch to this, but we noticed it still suffers from the original issue we had to work around. Is usage in a LazyColumn a supported use case and is there a more Compose-friendly way to get nested scrolling working properly with this wrapper?
Thanks!
Steps to reproduce
- Include GoogleMap in a LazyColumn
- Vertically drag on the map to attempt to scroll it
- Observe the LazyColumn scrolls instead of the map
Thanks!
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:13 (4 by maintainers)
Top Results From Across the Web
Add documentation for GoogleMap inside scrolling column ...
When used in a LazyColumn, GoogleMap cannot be scrolled vertically #14. Open. barbeau added a commit that referenced this issue on Apr 12....
Read more >How to scroll/zoom a map inside a vertically ... - Stack Overflow
I have tried to show a map in full screen, that is, outside the vertical scroll, and in this way the gestures work...
Read more >Lists and grids | Jetpack Compose - Android Developers
A Lazy vertical grid will display its items in a vertically scrollable container, spanned across multiple columns, while the Lazy horizontal grids will...
Read more >Column with .scrollable() modifier breaks map vertical scroll ...
I'm manually handling drag event on AndroidView used to present map. Code. // AndroidView in LocationInput file: AndroidView({ map }, Modifier .clip( ...
Read more >Jetpack Compose LazyVerticalGrid Within LazyColumn
IllegalStateException : Vertically scrollable component was ... where some item consume a full row (LazyColumn), while others use the row as ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I successfully solved it with cameraPositionState: Column ( .verticalScroll(rememberScrollState(), enabled = !cameraPositionState.isMoving) )
I’d like to request for this issue to be reopened, as it has not been adequately addressed. There is a documented workaround available now thanks to @barbeau, but that’s all it is, a workaround, and it’s fairly messy. It’s also unclear what parts of the elaborate sample code are needed to actually make it work and what can be left out. (I figured it out via my own minimal sample project.)
A Compose component that is draggable by nature should expose draggable behavior out of the box even in the context of nested scrolling, without additional configuration needed.
A custom wrapper using
requestDisallowInterceptTouchEvent()
as described in the OP may be a good approach, and as @arriolac suggested it can be controlled by a flag for the time being to gather feedback. This is the approach that I’ve used for years, but maps-compose has taken it away for now.Another, preferable, avenue that should be fully explored is the standard Compose nested scrolling support that has been worked on here: https://issuetracker.google.com/issues/174348612. The work is ongoing and I have pointed out its current inapplicability to MapView, so this would be the time to connect with the people behind it and see if it can be done.