Hi team, I am trying to create a custom Modal (hal...

# compose

[Utkarsh Tiwari]

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?

[Utkarsh Tiwari]

device-2021-01-26-123102.mp4

[Vivek Sharma]

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]

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]

Skipping the HalfExpanded state isn't supported (that is also the way the 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 &&
            targetValue == ModalBottomSheetValue.HalfExpanded
        val isClosing = value == ModalBottomSheetValue.Expanded &&
            targetValue == ModalBottomSheetValue.HalfExpanded
        when {
            isOpening -> animateTo(ModalBottomSheetValue.Expanded)
            isClosing -> animateTo(ModalBottomSheetValue.Hidden)
        }
    }

[jossiwolf]

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

[Vivek Sharma]

Oh, thanks for this workaround.

[Utkarsh Tiwari]

Thank you so much @jossiwolf! You are 🦸

[Utkarsh Tiwari]

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.

bug tap.mp4

[Utkarsh Tiwari]

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]

Any ideas what I could be doing wrong?

[jossiwolf]

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]

Did that happen after skipping the half expanded state?

No, it happens even if I don’t skip it.

[Utkarsh Tiwari]

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]

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 😄