πŸ”₯ Responsive Jetpack Compose BottomSheets: Owning Compact & Large Devices! πŸ“±

Rafa'Donna
Level Up Coding
Published in
3 min readJun 25, 2024

--

Display Material BottomSheet @ 80% of the screen height on any device.

- STATE -

  • Define a bottomSheetState using rememberModalBottomSheetState. Initialize it with ModalBottomSheetValue.Hidden with skips the half-expanded state. This state will manage the visibility & behavior of the bottom sheet.
val bottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
skipHalfExpanded = true
)

- UI -

  • Using ModalBottomSheetLayout to create the bottom sheet. It takes a sheetState parameter, which is set to the bottomSheetState.
  • Inside the sheetContent slot, specify the content of the bottom sheet. In this example, It’s a Box with a desired height (80% of the screen height).
  • Within the Box, use a custom BottomSheetTeamList Composable. It receives data (myTeam, teams, sheetState, and viewModel) and displays team-related information.
  • The content slot is empty, which means the bottom sheet overlays the main content.
  • Rounded corners for the top of the sheet using sheetShape. Or use Material3 for your sheet, which comes with rounded corners (I think) and a ton of built in sugar. 🍭🍬🍫
  • By accessing LocalConfiguration.current.screenHeightDp, you can adapt…

--

--

No responses yet

What are your thoughts?