How to open the bottomsheetdialog through routing

[sunlimiter]

How to open the bottomsheetdialog through routing, can it be achieved through a custom Scene? NavDisplay seems to only support one sceneStrategy. If the bottomsheet is implemented through the scene, how to use DialogSceneStrategy

[alirahimpour89]

They have started to implement it here

[sunlimiter]

They have started to implement it (#67)

After taking a rough look at the code, I found that their implementation still supports a single function, bottomsheet or dialog. I re-implemented a combination of the two, but as you said, the button in the bottomsheet is used to pop up the back stack, so there will be no animation. Do you have a solution?

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.ModalBottomSheetProperties
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.ui.OverlayScene
import androidx.navigation3.ui.Scene
import androidx.navigation3.ui.SceneStrategy

/** An [OverlayScene] that renders an [entry] within a [Dialog]. */
@OptIn(ExperimentalMaterial3Api::class)
internal class BottomSheetAndDialogScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    override val overlaidEntries: List<NavEntry<T>>,
    private val entry: NavEntry<T>,
    private val dialogProperties: DialogProperties?,
    private val sheetProperties: ModalBottomSheetProperties?,
    private val onBack: (count: Int) -> Unit,
) : OverlayScene<T> {

    override val entries: List<NavEntry<T>> = listOf(entry)

    override val content: @Composable (() -> Unit) = {
        if (dialogProperties != null) {
            Dialog(onDismissRequest = { onBack(1) }, properties = dialogProperties) { entry.Content() }
        }
        if (sheetProperties != null) {
            val bottomSheetState =
                rememberModalBottomSheetState(
                    skipPartiallyExpanded = true,
//                    confirmValueChange = { newState ->
//                        newState != SheetValue.Hidden
//                    }
                )

            ModalBottomSheet(
                onDismissRequest = { onBack(1) },
                content = {
                    entry.Content()
                },
                properties = sheetProperties,
                contentColor = Color.Transparent,
                shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
                dragHandle = null,
                sheetState = bottomSheetState
            )
        }
    }
}

/**
 * A [SceneStrategy] that displays entries that have added [dialog] to their [NavEntry.metadata]
 * within a [Dialog] instance.
 *
 * This strategy should always be added before any non-overlay scene strategies.
 */
public class BottomSheetAndDialogSceneStrategy<T : Any>() : SceneStrategy<T> {
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    public override fun calculateScene(
        entries: List<NavEntry<T>>,
        onBack: (count: Int) -> Unit,
    ): Scene<T>? {
        val lastEntry = entries.lastOrNull()
        val dialogProperties = lastEntry?.metadata?.get(DIALOG_KEY) as? DialogProperties
        val sheetProperties = lastEntry?.metadata?.get(BOTTOM_SHEET_KEY) as? ModalBottomSheetProperties
        if (dialogProperties != null || sheetProperties != null) {
            return BottomSheetAndDialogScene(
                key = lastEntry.contentKey,
                previousEntries = entries.dropLast(1),
                overlaidEntries = entries.dropLast(1),
                entry = lastEntry,
                dialogProperties = dialogProperties,
                sheetProperties = sheetProperties,
                onBack = onBack,
            )
        }
        return null
    }

    public companion object {
        /**
         * Function to be called on the [NavEntry.metadata] to mark this entry as something that
         * should be displayed within a [Dialog].
         *
         * @param dialogProperties properties that should be passed to the containing [Dialog].
         */
        public fun dialog(
            dialogProperties: DialogProperties = DialogProperties()
        ): Map<String, Any> = mapOf(DIALOG_KEY to dialogProperties)

        @OptIn(ExperimentalMaterial3Api::class)
        public fun sheet(
            sheetProperties: ModalBottomSheetProperties = ModalBottomSheetProperties()
        ): Map<String, Any> = mapOf(BOTTOM_SHEET_KEY to sheetProperties)

        internal const val DIALOG_KEY = "dialog"
        internal const val BOTTOM_SHEET_KEY = "bottom_sheet"
    }
}

[alirahimpour89]

They have started to implement it (#67)

After taking a rough look at the code, I found that their implementation still supports a single function, bottomsheet or dialog. I re-implemented a combination of the two, but as you said, the button in the bottomsheet is used to pop up the back stack, so there will be no animation. Do you have a solution?

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.ModalBottomSheetProperties
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.ui.OverlayScene
import androidx.navigation3.ui.Scene
import androidx.navigation3.ui.SceneStrategy

/** An [OverlayScene] that renders an [entry] within a [Dialog]. */
@OptIn(ExperimentalMaterial3Api::class)
internal class BottomSheetAndDialogScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    override val overlaidEntries: List<NavEntry<T>>,
    private val entry: NavEntry<T>,
    private val dialogProperties: DialogProperties?,
    private val sheetProperties: ModalBottomSheetProperties?,
    private val onBack: (count: Int) -> Unit,
) : OverlayScene<T> {

    override val entries: List<NavEntry<T>> = listOf(entry)

    override val content: @Composable (() -> Unit) = {
        if (dialogProperties != null) {
            Dialog(onDismissRequest = { onBack(1) }, properties = dialogProperties) { entry.Content() }
        }
        if (sheetProperties != null) {
            val bottomSheetState =
                rememberModalBottomSheetState(
                    skipPartiallyExpanded = true,
//                    confirmValueChange = { newState ->
//                        newState != SheetValue.Hidden
//                    }
                )

            ModalBottomSheet(
                onDismissRequest = { onBack(1) },
                content = {
                    entry.Content()
                },
                properties = sheetProperties,
                contentColor = Color.Transparent,
                shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
                dragHandle = null,
                sheetState = bottomSheetState
            )
        }
    }
}

/**
 * A [SceneStrategy] that displays entries that have added [dialog] to their [NavEntry.metadata]
 * within a [Dialog] instance.
 *
 * This strategy should always be added before any non-overlay scene strategies.
 */
public class BottomSheetAndDialogSceneStrategy<T : Any>() : SceneStrategy<T> {
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    public override fun calculateScene(
        entries: List<NavEntry<T>>,
        onBack: (count: Int) -> Unit,
    ): Scene<T>? {
        val lastEntry = entries.lastOrNull()
        val dialogProperties = lastEntry?.metadata?.get(DIALOG_KEY) as? DialogProperties
        val sheetProperties = lastEntry?.metadata?.get(BOTTOM_SHEET_KEY) as? ModalBottomSheetProperties
        if (dialogProperties != null || sheetProperties != null) {
            return BottomSheetAndDialogScene(
                key = lastEntry.contentKey,
                previousEntries = entries.dropLast(1),
                overlaidEntries = entries.dropLast(1),
                entry = lastEntry,
                dialogProperties = dialogProperties,
                sheetProperties = sheetProperties,
                onBack = onBack,
            )
        }
        return null
    }

    public companion object {
        /**
         * Function to be called on the [NavEntry.metadata] to mark this entry as something that
         * should be displayed within a [Dialog].
         *
         * @param dialogProperties properties that should be passed to the containing [Dialog].
         */
        public fun dialog(
            dialogProperties: DialogProperties = DialogProperties()
        ): Map<String, Any> = mapOf(DIALOG_KEY to dialogProperties)

        @OptIn(ExperimentalMaterial3Api::class)
        public fun sheet(
            sheetProperties: ModalBottomSheetProperties = ModalBottomSheetProperties()
        ): Map<String, Any> = mapOf(BOTTOM_SHEET_KEY to sheetProperties)

        internal const val DIALOG_KEY = "dialog"
        internal const val BOTTOM_SHEET_KEY = "bottom_sheet"
    }
}

This is true but if I remember correctly you can chain scene strategies by using the .then() function so you can combine both the DialogScene with the BottomSheetScene.

Regarding the animation I haven't found a good way, maybe do a general implementation of the OverlayScene where you control the bottomsheet state inside the entry so you have full control but that one isn't optimal and haven't tested it yet. I hope the googlers can give a good answer or pointer how we can get the close animation when poping from the backstack with code.