Jetpack Compose App - Bottom Sheet

Objective:

Previously, we added a Date Picker to let users switch dates. Today, we will extend the main screen with a Bottom Sheet . We will use to display an expanded image when the user clicks on the thumbnail.

Dependencies

Add the following dependency for material (the original). We use material3 throughout the app and this will be the only exception to the rule, as ModalBottomSheetLayout has not been ported to material3 yet.

• androidx.compose.material:material

Components built

Add or modify the following components:

• BottomSheetContent.kt: Content to display within the modal bottom sheet.
• HistoryEventList.kt: Modify the HistoryEventList to include ModalBottomSheetLayout

Code

Bottom Sheet Content

Add BottomSheetContent.kt to the com.coroutines.thisdayinhistory.ui.screens.main package in the app module:

@file:Suppress("MagicNumber")
package com.coroutines.thisdayinhistory.ui.screens.main

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.coroutines.thisdayinhistory.ui.components.DominantColorState
import com.coroutines.thisdayinhistory.ui.components.DynamicThemePrimaryColorsFromImage
import com.coroutines.thisdayinhistory.ui.components.ExpandedImage
import com.coroutines.thisdayinhistory.ui.components.verticalGradientScrim
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel



@Composable
fun BottomSheetContent(viewModel: IHistoryViewModel, readyState: Boolean, dominantColorState: DominantColorState) {
    fun getPadding(): Dp {
        val originalImage = viewModel.selectedItem.originalImage
        return if (readyState) {
            if (originalImage?.height!! > originalImage.width) 0.dp else 25.dp
        } else {
            0.dp
        }
    }

    val sel = viewModel.selectedItem.description != "No Events"

    DynamicThemePrimaryColorsFromImage(dominantColorState) {
        Surface(
            modifier = Modifier
                .fillMaxHeight(getSheetContentSize(viewModel, sel))
                .verticalGradientScrim(
                    color = dominantColorState.color.copy(alpha = if (isSystemInDarkTheme()) 0.89f else 0.99f),
                    startYPercentage = 1f,
                    endYPercentage = 0f
                )
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .windowInsetsPadding(
                        WindowInsets.navigationBars.only(WindowInsetsSides.Bottom)
                    )
                    .verticalGradientScrim(
                        color = dominantColorState.color.copy(alpha = if (isSystemInDarkTheme()) 0.89f else 0.99f),
                        startYPercentage = 1f,
                        endYPercentage = 0f
                    )
                    .padding(getPadding()),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                if (readyState) {
                    Text(
                        text = viewModel.selectedItem.shortTitle!!.replace("_", " "),
                        fontSize = 20.sp,
                        modifier = Modifier
                            .padding(10.dp)
                            .padding(bottom = 10.dp),
                        color = dominantColorState.onColor,
                        textAlign = TextAlign.Center
                    )
                    ExpandedImage(viewModel.selectedItem)
                }
            }
        }
    }
}

fun getSheetContentSize(viewModel: IHistoryViewModel, readyState: Boolean): Float {
    val originalImage = viewModel.selectedItem.originalImage
    return if (readyState) {
        if (originalImage?.height!! > originalImage.width) 0.9f else 0.5f
    } else {
        0.9f
    }
}

HistoryEventList

Modify HistoryEventList.kt in the com.coroutines.thisdayinhistory.ui.screens.main package in the app module to display ModalBottomSheetLayout:

    

package com.coroutines.thisdayinhistory.ui.screens.main

import android.annotation.SuppressLint
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetLayout
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
import androidx.compose.material3.windowsizeclass.WindowSizeClass
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.navigation.NavController
import com.coroutines.data.models.HistoricalEvent
import com.coroutines.thisdayinhistory.components.NAV_ARGUMENT_DOMINANT_COLOR
import com.coroutines.thisdayinhistory.components.NAV_ARGUMENT_HISTORY_EVENT
import com.coroutines.thisdayinhistory.graph.MainNavOption
import com.coroutines.thisdayinhistory.ui.components.DominantColorState
import com.coroutines.thisdayinhistory.ui.components.MinContrastOfPrimaryVsSurface
import com.coroutines.thisdayinhistory.ui.components.ScrollToTopButton
import com.coroutines.thisdayinhistory.ui.components.contrastAgainst
import com.coroutines.thisdayinhistory.ui.components.rememberDominantColorState
import com.coroutines.thisdayinhistory.ui.theme.BabyPowder
import com.coroutines.thisdayinhistory.ui.viewmodels.HistoryViewModelMock
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch


//noinspection UsingMaterialAndMaterial3Libraries
import androidx.compose.material.ModalBottomSheetValue


@OptIn(ExperimentalMaterialApi::class)
@SuppressLint("UnusedContentLambdaTargetStateParameter")
@Suppress("LongMethod")
@Composable
fun HistoryEventList(
    viewModel: IHistoryViewModel,
    windowSizeClass: WindowSizeClass,
    navController: NavController,
    onItemImageStateChanged: (readyState: Boolean) -> Unit
) {
    val context = LocalContext.current
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    val selectedCategory = uiState.selectedCategory
    val previousCategory = uiState.previousCategory
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val data = viewModel.historyData

    val backgroundColor = MaterialTheme.colorScheme.background
    val dominantColorState = rememberDominantColorState { color ->
        color.contrastAgainst(backgroundColor) >= MinContrastOfPrimaryVsSurface
    }

    val skipHalfExpanded by remember { mutableStateOf(true) }
    val modalBottomSheetState = androidx.compose.material.rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipHalfExpanded = skipHalfExpanded
    )

    var showModalBottomSheet by remember { mutableStateOf(false) }
    if (modalBottomSheetState.currentValue != ModalBottomSheetValue.Hidden) {
        DisposableEffect(Unit) {
            onDispose {
                showModalBottomSheet = false
                onItemImageStateChanged (false)
            }
        }
    }


    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topEnd = 35.dp, topStart = 35.dp),
        sheetBackgroundColor = Color.Transparent,
        scrimColor = Color.Transparent,
        sheetElevation = 0.dp,
        sheetContent = {
            BottomSheetContent(viewModel, showModalBottomSheet, dominantColorState)
        }
    ) {
        AnimatedContent(
            targetState = Pair<String, String>(
                selectedCategory,
                previousCategory
            ),
            transitionSpec = {
                if (selectedCategory != previousCategory) {
                    (slideInHorizontally(
                        animationSpec = tween(
                            durationMillis = 200
                        )
                    )
                    { width -> width }
                            + fadeIn()).togetherWith(slideOutHorizontally
                    { width -> -width } + fadeOut())
                } else {
                    fadeIn(animationSpec = tween(200)) togetherWith
                            fadeOut(animationSpec = tween(200))
                }
            }, label = ""
        ) {
            LazyColumn(
                state = listState,
                contentPadding = PaddingValues(bottom = 65.dp),
                verticalArrangement = Arrangement.Top
            ) {
                item { Spacer(Modifier.height(8.dp)) }

                items(data) { item: HistoricalEvent ->
                    HistoryListItem(
                        historyEvent = item,
                        windowSizeClass = windowSizeClass,
                        onClick = { selectedEvent ->
                            viewModel.selectedItem = selectedEvent
                            navController.currentBackStackEntry?.savedStateHandle?.set(
                                NAV_ARGUMENT_HISTORY_EVENT, selectedEvent
                            )
                            navigateToDetail(
                                backgroundColor,
                                coroutineScope,
                                viewModel,
                                dominantColorState,
                                navController
                            )
                        },
                        onImageClick = { selectedEvent ->
                            viewModel.selectedItem = selectedEvent
                            coroutineScope.launch {
                                if (viewModel.selectedItem.imageUrl.isNotEmpty()) {
                                    dominantColorState.updateColorsFromImageUrl(viewModel.selectedItem.imageUrl)
                                } else {
                                    dominantColorState.reset()
                                }
                                showModalBottomSheet = true
                                onItemImageStateChanged(true)
                                modalBottomSheetState.show()
                            }
                        },
                        onShare = {
                        }
                    )
                }
                item { Spacer(Modifier.height(20.dp)) }
            }


            val showButton by remember {
                derivedStateOf {
                    listState.firstVisibleItemIndex > 0
                }
            }

            viewModel.isScrolled.value = showButton

            AnimatedVisibility(
                visible = showButton,
                enter = fadeIn(),
                exit = fadeOut()
            ) {
                ScrollToTopButton(onClick = {
                    coroutineScope.launch {
                        listState.scrollToItem(0)
                    }
                })
            }
        }
    }
}

private fun navigateToDetail(
    backgroundColor: Color,
    coroutineScope: CoroutineScope,
    viewModel: IHistoryViewModel,
    dominantColorState: DominantColorState,
    navController: NavController
) {

    if (backgroundColor != BabyPowder) {
        coroutineScope.launch {
            val job = launch {
                if (viewModel.selectedItem.imageUrl.isNotEmpty()) {
                    dominantColorState.updateColorsFromImageUrl(viewModel.selectedItem.imageUrl)
                } else {
                    dominantColorState.reset()
                }
            }
            job.join()
            navController.currentBackStackEntry?.savedStateHandle?.set(
                NAV_ARGUMENT_DOMINANT_COLOR,
                dominantColorState.color.value.toString()
            )

            navController.navigate(MainNavOption.DetailScreen.name) {
                popUpTo(MainNavOption.HistoryScreen.name)
            }
        }
    } else {
        navController.navigate(MainNavOption.DetailScreen.name) {
            popUpTo(MainNavOption.HistoryScreen.name)
        }
    }
}