π₯ Responsive Jetpack Compose BottomSheets: Owning Compact & Large Devices! π±
Published in
3 min readJun 25, 2024
- STATE -
- Define a
bottomSheetState
usingrememberModalBottomSheetState
. Initialize it withModalBottomSheetValue.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 asheetState
parameter, which is set to thebottomSheetState
. - Inside the
sheetContent
slot, specify the content of the bottom sheet. In this example, Itβs aBox
with a desired height (80% of the screen height). - Within the
Box
, use a customBottomSheetTeamList
Composable. It receives data (myTeam
,teams
,sheetState
, andviewModel
) 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 useMaterial3
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β¦