Hi team I am trying to create a custom Modal half and full s

Question

Hi team I am trying to create a custom Modal half and full sized variant by using `ModalBottomSheetLayout` however when I `state show ` the modal it expands to only cover half the screen height I have to swipe up to pull it to make it expand to cover the entire screen What did I miss

Vivek Sharma · Answer

As I have used `ModalBottomSheetLayout` by default it may be expanding till half of the screen height but I controlled the height by including my custom layout in `sheetContent` lambda param in `ModalBottomSheetLayout` you can add your custom layout composable inside that and have `fillMaxHeight ` or get the screen height using `WithConstraint`

Utkarsh Tiwari · Answer

Thanks Vivek for your suggestion I did add my custom layout in `sheetContent` however I want to make the modal cover only half the height of the screen if it s `Half Modal` and full screen if it s `Full Modal` It doesn t work though

jossiwolf · Answer

Skipping the `HalfExpanded` state isn t supported that is also the way the <https material io components sheets bottom modal bottom sheet|Material Design Guidelines> describe it Thus I suspect this won t get added What you can do is call `ModalBottomSheetState animateTo` with the desired target value when the `ModalBottomSheetState targetValue` is `HalfExpanded` Something like this ```with state val isOpening = value == ModalBottomSheetValue Hidden amp amp targetValue == ModalBottomSheetValue HalfExpanded val isClosing = value == ModalBottomSheetValue Expanded amp amp targetValue == ModalBottomSheetValue HalfExpanded when isOpening gt animateTo ModalBottomSheetValue Expanded isClosing gt animateTo ModalBottomSheetValue Hidden ```

jossiwolf · Answer

Be aware that this could break at any time So I d recommend not relying on it too heavily

Vivek Sharma · Answer

Oh thanks for this workaround

Utkarsh Tiwari · Answer

Thank you so much < jossiwolf> You are superhero

Utkarsh Tiwari · Answer

I was able to skip the half expanded state by tweaking their `ModalBottomSheet`code However as you can see I am trying to show two different types of modal in the same screen I am facing another issue The modal doesn t show on first tap I have to tap twice to display the modal

Utkarsh Tiwari · Answer

Here is the code ``` ExperimentalMaterialApi Composable private fun SetupModals var modalType ModalType by remember mutableStateOf ModalType HALF val modalState = rememberModalState initialValue = ModalStateValue Hidden Modal title = タイトル type = modalType state = modalState onActionClick = onNavigationClick = modalState hide modalContent = emptyContent Screen onHalfModalButtonClick = modalType = ModalType HALF modalState show onFullModalButtonClick = modalType = ModalType FULL modalState show ```

Utkarsh Tiwari · Answer

Any ideas what I could be doing wrong

jossiwolf · Answer

Did that happen after skipping the half expanded state Can you post the full source code incl ModalType ModalState and the Modal Composable

Utkarsh Tiwari · Answer

gt Did that happen after skipping the half expanded state No it happens even if I don t skip it

Utkarsh Tiwari · Answer

Here is the gist with all the three files <https gist github com iamutkarshtiwari c6b856a5fc6af6c9a3836d22402aa6f5> P S I have tweaked the ModalBottomSheet code to remove the half expanded state which I am using

jossiwolf · Answer

I don t see anything that should cause this not to work I ve also tried the code and can t repro it Things you can try to debug this Check if your `onClick` is being called Step into the `show` method in your state + set a breakpoint in the `onEnd` lambda Then take a look at the `endReason` If it s `Interrupted` something weird is going on smile