Is there a way to get `ModalBottomSheetLayout` to expand to anything above 50% in the `HalfExpanded`...
t
Is there a way to get
ModalBottomSheetLayout
to expand to anything above 50% in the
HalfExpanded
state? Right now I have something like this, but it only expands to 50% when I would like it to expand to 70%, or expand a little more than 50% to “wrap” the content’s height so that it doesn’t get cut off (using version 1.4.1)
Copy code
val sheetState = rememberModalBottomSheetState(
	initialValue = HalfExpanded,
    skipHalfExpanded = false
)

ModalBottomSheetLayout(
	sheetState = sheetState
	sheetContent = {
		Column(Modifier.fillMaxHeight(0.7f)) { /** content **/ }
	}
)
j
If change to expanded instead of halv expanded should work? :)
t
Trying to do something like
HalfExpanded
-> 70% screen height, and
Expanded
-> 100% screen height
j
Could always update the percentage value animate it from 70% in expanded and go for 100% expanded later on. But feels like want custom bottomsheet.
t
Oh I see - so just animate the height independently while keeping the sheet
Expanded
? I can try that...want to avoid copying over all of the sheet Composable just to customize this 😅
j
Yeah keep state and animate height of sheet content. Not entirely sure how animation will behave. Maybe there is also some offset or animateTo methods in state holder can use as well. But yeah its a lot copy over 😁
t
Yeah I think the recent changes to the ModalBottomSheetLayout and related APIs combined it with something called SwipeableV2 and a lot of the things that were previously public are now internal - so maybe this is not supposed to be possible with material? 🤔
j
Material provides opinionated components for the Material design system. As such, it's not possible to customize the HalfExpanded height as all Material components should provide a consistent UX.
SwipeableV2 is currently internal while we're working on providing a Foundation API for anchored draggable components - if things go well it won't be long (no promises though). With that it should be really easy to build your own sheet component :)
t
Thanks Jossi! Makes sense. In the meantime, is there any “hack” or workaround we could use? Would manually animating the
Expanded
state’s height via a
Modifier.height
work, or cause more issues? 🤔
j
I wouldn't recommend it :) Keeping a copy of SwipeableV2 and building your sheet on top of it is probably much faster and easier
t
Gotcha! Sounds good 🙏🏼
1324 Views