Implementing Bottom Sheet Scrim Display Upon Expansion

[skydoves]

Implementing Bottom Sheet Scrim Display Upon Expansion

[skydoves]

Hey @ghasemdev, would you elaborate on this? It sounds like this issue should be prevented from the user side. Does this work different from the Material3's ModalBottomSheet?

[ghasemdev]

I have tested my own scenario, and it appears that you have managed the dragging of the bottom sheet, and clicking on the page is not functional. However, I am curious to know why I still cannot click on the page even if I omit the if-statement related to the absence of the bottom sheet.

var shouldShowBottomSheet by rememberSaveable { mutableStateOf(false) }
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberFlexibleBottomSheetState(
    containSystemBars = true,
    isModal = true,
)

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Button(
        onClick = {
            Toast.makeText(this@MainActivity, "Show Toast", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(text = "Toast")
    }
     Button(
         onClick = {
             coroutineScope.launch {
                 shouldShowBottomSheet = true
                 delay(50)
                 bottomSheetState.intermediatelyExpand()
             }
         }
    ) {
        Text(text = "Show Bottom Sheet")
    }
}

if (shouldShowBottomSheet) {
    FlexibleBottomSheet(
        onDismissRequest = {
            shouldShowBottomSheet = false
        },
        sheetState = bottomSheetState,
        scrimColor = Color.Black.copy(.7f),
        containerColor = Color.LightGray
    ) {
       Column(
           modifier = Modifier.fillMaxWidth(),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
            Text(text = "sheet")
          } 
      }
}

[ghasemdev]

Screen_Recording_20231228_230923_affogato.mp4

@skydoves
It seems like in the XML, the scrim doesn’t disappear when the bottom sheet is in the hiding process. 🤔

[ghasemdev]

I have tested my own scenario, and it appears that you have managed the dragging of the bottom sheet, and clicking on the page is not functional. However, I am curious to know why I still cannot click on the page even if I omit the if-statement related to the absence of the bottom sheet.

var shouldShowBottomSheet by rememberSaveable { mutableStateOf(false) }
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberFlexibleBottomSheetState(
    containSystemBars = true,
    isModal = true,
)

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Button(
        onClick = {
            Toast.makeText(this@MainActivity, "Show Toast", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(text = "Toast")
    }
     Button(
         onClick = {
             coroutineScope.launch {
                 shouldShowBottomSheet = true
                 delay(50)
                 bottomSheetState.intermediatelyExpand()
             }
         }
    ) {
        Text(text = "Show Bottom Sheet")
    }
}

if (shouldShowBottomSheet) {
    FlexibleBottomSheet(
        onDismissRequest = {
            shouldShowBottomSheet = false
        },
        sheetState = bottomSheetState,
        scrimColor = Color.Black.copy(.7f),
        containerColor = Color.LightGray
    ) {
       Column(
           modifier = Modifier.fillMaxWidth(),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
            Text(text = "sheet")
          } 
      }
}

My implementation had a problem, but after reading the Material Design 3 documentation, I realized the need for an if-statement and a boolean variable.

var shouldShowBottomSheet by rememberSaveable { mutableStateOf(false) }
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberFlexibleBottomSheetState(
    containSystemBars = true,
    isModal = true,
)

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Button(
        onClick = {
            Toast.makeText(this@MainActivity, "Show Toast", Toast.LENGTH_SHORT).show()
        }
    ) {
        Text(text = "Toast")
    }
     Button(
         onClick = {
              shouldShowBottomSheet = true
         }
    ) {
        Text(text = "Show Bottom Sheet")
    }
}

if (shouldShowBottomSheet) {
    FlexibleBottomSheet(
        onDismissRequest = {
            shouldShowBottomSheet = false
        },
        sheetState = bottomSheetState,
        scrimColor = Color.Black.copy(.7f),
        containerColor = Color.LightGray
    ) {
       Column(
           modifier = Modifier.fillMaxWidth(),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
            Button(
                  onClick = {
                    coroutineScope.launch { bottomSheetState.hide() }.invokeOnCompletion {
                      if (!bottomSheetState.isVisible) {
                        showBottomSheet = false
                      }
                    }
                  }
                ) {
                  Text(text = "Hide")
                }
          } 
      }
}

[ghasemdev]

Another question has arisen for me: how can one disable the ‘dragGesture’? In the Material 2 bottom sheet, we had the capability to disable this feature to prevent the bottom sheet from closing when dragged.

[ghasemdev]

Another question has arisen for me: how can one disable the ‘dragGesture’? In the Material 2 bottom sheet, we had the capability to disable this feature to prevent the bottom sheet from closing when dragged.

For now, I am using this method.

 val bottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
        confirmValueChange = {
          // Prevent collapsing by swipe down gesture
          if (!isDraggable) it != FlexibleSheetValue.IntermediatelyExpanded else true
        }
 )