# Building a Google Maps Style Bottom Sheet with Jetpack Compose

DevFeed: [Building a Google Maps Style Bottom Sheet with Jetpack Compose](<https://devfeed.tech/articles/building-a-google-maps-style-bottom-sheet-with-jetpack-compose-25920.md>)

Original publisher: [Read original article](<https://proandroiddev.com/building-a-google-maps-style-bottom-sheet-with-jetpack-compose-eccc1f3cf578?source=rss-9bb203a4ab2e------2>)

Author: Jaewoong Eum

Published: 2026-02-15T07:34:23Z

Content type: tutorial

Language: en

Sources: [Stories by Jaewoong Eum on Medium](<https://devfeed.tech/sources/stories-by-jaewoong-eum-on-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [bottomsheet](<https://devfeed.tech/tags/bottomsheet.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [state](<https://devfeed.tech/tags/state.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

This tutorial explains how to build a Google Maps-style bottom sheet with Jetpack Compose using FlexibleBottomSheet. It covers three expansion states, non-modal interaction, state-dependent content, programmatic transitions, nested scrolling, and dynamic content sizing.

## Source excerpt

Google Maps popularized a bottom sheet pattern that most Android developers recognize immediately: a small panel peeking from the bottom of the screen, expandable to a mid height for quick details, and draggable to full screen for comprehensive information. The user interacts with the map behind the sheet at all times. This pattern looks simple on the surface, but implementing it correctly requires solving several problems: multi state anchoring, non modal interaction, dynamic content adaptation, and nested scroll coordination. Jetpack Compose's standard ModalBottomSheet only supports two states (expanded and hidden) and blocks background interaction with a scrim, making it unsuitable for this use case. In this article, you'll explore how to build a Google Maps style bottom sheet using FlexibleBottomSheet, covering how to configure three expansion states with custom height ratios, how to enable non modal mode so users can interact with the content behind the sheet, how to adapt your UI dynamically based on the sheet's current state, how to control state transitions programmatically, how to handle nested scrolling inside the sheet, and how to wrap content dynamically for variable height sheets. Why ModalBottomSheet falls short Consider the standard Material 3 bottom sheet: https://medium.com/media/8a38f40dd78c91260a666308710000ce/href This gives you two states: expanded and hidden. The sheet covers the background with a scrim, blocking all interaction behind it. For a confirmation dialog or action menu, this is fine. But for a Google Maps style experience, you need: Three visible states: A peek height showing a summary, a mid height for details, and a full height for comprehensive content. No scrim: The map behind the sheet must remain fully interactive. Dynamic content: The content should adapt based on the current expansion state. Nested scrolling: Scrollable content inside the fully expanded sheet should scroll naturally, and dragging down from the top of the scro