CODEWITHSUNDEEP
androidandroid-layoutandroid-jetpack-composebottom-sheet
Cyril
Cyril

Reputation: 870

How to expand BottomSheetScaffold to a specific height at with Jetpack Compose?

Is there a way to expand the BottomSheetScaffold to a specific height?

The content of my BottomSheetScaffold is a big list so it expands to fullscreen. I did not find a way to always expand to a specific height, regardless of the content.

Upvotes: 14

Views: 22901

Answers (3)

box
box

Reputation: 4688

You can add:

MySheet() {
    AnimatedContent(targetState = isExpanded, label = "") { targetState ->
        when (targetState) {
            true -> Box(modifier = Modifier.fillMaxSize())
            false -> Box(modifier = Modifier.height(0.dp))
        }
    }
}

Inside the BottomSheetScaffold:

var isExpandedValue by remember { mutableStateOf(false) }

BottomSheetScaffold(
    sheetContent = {
        MySheet(isExpanded = isExpandedValue) { value -> isExpandedValue = value }
    }
) {
}

And handle the isExpandedValue as in a callback function. In this way the content of the bottom sheet will be animated and expanded fully.

Upvotes: 0

Thracian
Thracian

Reputation: 67149

You can use heightIn(min = 100.dp, max = 500.dp) on sheetContent as

   val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetElevation = 8.dp,
        sheetShape = RoundedCornerShape(
            bottomStart = 0.dp,
            bottomEnd = 0.dp,
            topStart = 12.dp,
            topEnd = 12.dp
        ),
        sheetContent = {
            SheetContent()
        },
        // This is the height in collapsed state
        sheetPeekHeight = 70.dp
    ) {
        MainContent(bottomSheetScaffoldState.bottomSheetState)
    }

@Composable
private fun SheetContent() {
    Column(modifier = Modifier.heightIn(min = 100.dp, max = 500.dp)) {
        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = "Places to Visit",
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            color = Color(0xffFDD835),
            fontSize = 24.sp,
            modifier = Modifier.padding(8.dp)
        )
        LazyColumn(
            contentPadding = PaddingValues(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(places) { place ->
                PlacesToBookVerticalComponent(place = place)
            }
        }
    }
}

And if interested to see states and scroll positions you can check out them with

@ExperimentalMaterialApi
@Composable
private fun MainContent(bottomSheetState: BottomSheetState) {

    val direction = bottomSheetState.direction
    val currentValue: BottomSheetValue = bottomSheetState.currentValue
    val targetValue: BottomSheetValue = bottomSheetState.targetValue
    val overflow = bottomSheetState.overflow.value
    val offset = bottomSheetState.offset.value

    val progress = bottomSheetState.progress
    val fraction = progress.fraction
    val from = progress.from.name
    val to = progress.to.name

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xff6D4C41))
            .padding(top = 30.dp)
    ) {
        Text(
            color = Color.White,
            text = "direction:$direction\n" +
                    "isExpanded: ${bottomSheetState.isExpanded}\n" +
                    "isCollapsed: ${bottomSheetState.isCollapsed}\n" +
                    "isAnimationRunning: ${bottomSheetState.isAnimationRunning}"
        )

        Text(
            color = Color.White,
            text = "currentValue: ${currentValue}\n" +
                    "targetValue: ${targetValue}\n" +
                    "overflow: ${overflow}\n" +
                    "offset: $offset"
        )

        Text(
            color = Color.White,
            text = "progress: $progress\n" +
                    "fraction: ${fraction}\n" +
                    "from: ${from}\n" +
                    "to: $to"
        )
    }
}

enter image description here

Upvotes: 39

Maciej Ciemięga
Maciej Ciemięga

Reputation: 10713

Bottom sheet wouldn't expand more than the content's height.
To constraint the content's maximum height you can just use some height modifier (e.g. heightIn(max = 300.dp) or height(300.dp)) on a root item of sheetContent in BottomSheetScaffold.
Of course you can use some predefined value or compute it based on the scaffold size.

Upvotes: 6

Related Questions