CODEWITHSUNDEEP
androidandroid-jetpack-compose
Marat
Marat

Reputation: 1348

Make ModalBottomSheetLayout always Expanded

I am using ModalBottomSheetLayout in Jetpack Compose. Whenever it is shown with modalBottomSheetState.show(), it shows HalfExpanded or Expanded depending on the height of its content. This is from the source code:

val anchors = if (sheetHeight < fullHeight / 2) {
        mapOf(
            fullHeight to Hidden,
            fullHeight - sheetHeight to Expanded
        )
    } else {
        mapOf(
            fullHeight to Hidden,
            fullHeight / 2 to HalfExpanded,
            max(0f, fullHeight - sheetHeight) to Expanded
        )
    }
    Modifier.swipeable(
        state = sheetState,
        anchors = anchors,
        orientation = Orientation.Vertical,
        enabled = sheetState.currentValue != Hidden,
        resistance = null
    )

Then show() works like here:

 internal val isHalfExpandedEnabled: Boolean
    get() = anchors.values.contains(HalfExpanded)

/**
 * Show the bottom sheet with animation and suspend until it's shown. If half expand is
 * enabled, the bottom sheet will be half expanded. Otherwise it will be fully expanded.
 *
 * @throws [CancellationException] if the animation is interrupted
 */
suspend fun show() {
    val targetValue =
        if (isHalfExpandedEnabled) HalfExpanded
        else Expanded
    animateTo(targetValue = targetValue)
}

I wonder if we can set it to always Expanded somehow

Upvotes: 17

Views: 8082

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364401

You can use:

scope.launch { state.animateTo(ModalBottomSheetValue.Expanded) }

instead of

scope.launch { state.show() }

Starting with compose 1.2 you can use the skipHalfExpanded attribute:

skipHalfExpanded : If true, the sheet will always expand to the Expanded state and move to the Hidden state when hiding the sheet, either programmatically or by user interaction

Something like:

var skipHalfExpanded by remember { mutableStateOf(true) }
val state = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = skipHalfExpanded
)

Upvotes: 39

ulaserdegor
ulaserdegor

Reputation: 410

Use skipHalfExpanded

val bottomSheetStatus =
    rememberModalBottomSheetState(
        ModalBottomSheetValue.Hidden,
        skipHalfExpanded = true,
    )

Upvotes: 10

Notsfsssf
Notsfsssf

Reputation: 553

use:

bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)

to show expanded sheet

use confirmStateChange:

 val bottomSheetState =
        rememberModalBottomSheetState(ModalBottomSheetValue.Hidden, confirmStateChange = {
            it != ModalBottomSheetValue.HalfExpanded
        })

to avoid sheet halfexpanded

Upvotes: 14

Related Questions