Jetpack Compose App - Bottom Bar Calendar

Building this app - Introduction

Objective:

Previously, we added an App Bar to let users switch dates. Today, we will extend the main screen with a Bottom Bar Date Picker . Users will be able to swipe left or right on the Date Picker to switch selected date.

Components built

Add or modify the following components:

• HistoryCatNavigationBar.kt: Add
• HistoryEventList.kt: Add
• HistoryScreen.kt: Modify

Code

HistoryCatNavigationBar.kt

Add HistoryCatNavigationBar.kt to the com.coroutines.thisdayinhistory.ui.components package in the app module:

package com.coroutines.thisdayinhistory.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.coroutines.thisdayinhistory.ui.constants.NAVIGATION_BAR_ROW_TAG
import com.coroutines.thisdayinhistory.ui.theme.ThisDayInHistoryTheme
import com.coroutines.thisdayinhistory.ui.theme.ThisDayInHistoryThemeEnum
import com.coroutines.thisdayinhistory.ui.viewmodels.SettingsViewModelMock


@Suppress("LongParameterList")
@Composable
fun HistoryCatNavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = tonalElevation,
        modifier = modifier
    ) {
        Row(
            modifier = Modifier
                .testTag(NAVIGATION_BAR_ROW_TAG)
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .height(60.dp)
                .selectableGroup(),
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }
}

@Composable
@Preview
fun HistoryCatNavigationBarPreviewDark(){
    val settingsViewModel = SettingsViewModelMock(ThisDayInHistoryThemeEnum.Dark)

    ThisDayInHistoryTheme(
        settingsViewModel
    ) {
        val appThemeColor = MaterialTheme.colorScheme.background
        Surface(
            modifier = Modifier.background(appThemeColor)
        ) {
            HistoryCatNavigationBar{ Text("March 1") }
        }
    }
}

@Composable
@Preview
fun HistoryCatNavigationBarPreviewLight(){
    val settingsViewModel = SettingsViewModelMock(ThisDayInHistoryThemeEnum.Light)

    ThisDayInHistoryTheme(
        settingsViewModel
    ) {
        val appThemeColor = MaterialTheme.colorScheme.background
        Surface(
            modifier = Modifier.background(appThemeColor)
        ) {
            HistoryCatNavigationBar{ Text("March 1") }
        }
    }
}

BottomNavigationBarCalendar

Add BottomNavigationBarCalendar.kt to the com.coroutines.thisdayinhistory.ui.components package in the app module:

    

package com.coroutines.thisdayinhistory.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import com.coroutines.thisdayinhistory.components.CALENDAR_PAGE_COUNT
import com.coroutines.thisdayinhistory.ui.previewProviders.ThisDayInHistoryThemeEnumProvider
import com.coroutines.thisdayinhistory.ui.state.HistoryViewModelState
import com.coroutines.thisdayinhistory.ui.theme.ThisDayInHistoryTheme
import com.coroutines.thisdayinhistory.ui.theme.ThisDayInHistoryThemeEnum
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import com.coroutines.thisdayinhistory.ui.viewmodels.SettingsViewModelMock


@OptIn(ExperimentalFoundationApi::class)
@Suppress("MagicNumber")
@Composable
fun BottomNavigationBarCalendar(
    historyViewModel: IHistoryViewModel,
    historyViewModelState: HistoryViewModelState
) {

    HistoryCatNavigationBar(
        modifier = Modifier
            .clip(shape = RoundedCornerShape(topStart = 40.dp, topEnd = 40.dp)),
        containerColor = MaterialTheme.colorScheme.surface,
        tonalElevation = 2.dp) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ) {
            var previousPage by remember { mutableStateOf(CALENDAR_PAGE_COUNT/2) }
            val pagerState = rememberPagerState(
                pageCount = { CALENDAR_PAGE_COUNT },
                initialPage = CALENDAR_PAGE_COUNT/2
            )
            LaunchedEffect(pagerState) {
                snapshotFlow { pagerState.currentPage }.collect { page ->
                    when {
                        page > previousPage -> historyViewModel.updateDate(1)
                        page < previousPage -> historyViewModel.updateDate(-1)
                    }
                    previousPage = page
                }
            }
            HorizontalPager(
                state = pagerState,
                modifier = Modifier.fillMaxWidth(),
            ) { page ->
                with (historyViewModelState.selectedDate){
                    Text(
                        text = "$month $day",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.fillMaxWidth().wrapContentWidth()
                    )
                }

            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Preview(showBackground = true)
@Composable
fun BottomNavigationBarCalendarPreview(
    @PreviewParameter(ThisDayInHistoryThemeEnumProvider::class) historyCatThemeEnum: ThisDayInHistoryThemeEnum
) {

    val settingsViewModel = SettingsViewModelMock(historyCatThemeEnum)

    ThisDayInHistoryTheme(
        settingsViewModel
    ) {
        val appThemeColor = MaterialTheme.colorScheme.background
        Surface(
            modifier = Modifier.background(appThemeColor)
        ) {
            NavigationBar(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(shape = RoundedCornerShape(topStart = 40.dp, topEnd = 40.dp)),
                containerColor = MaterialTheme.colorScheme.background,
                tonalElevation = 2.dp
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceAround,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    val pagerState =
                        rememberPagerState(pageCount = { 365 }, initialPage = 180)
                    LaunchedEffect(pagerState) {
                        // Collect from the a snapshotFlow reading the currentPage
                        snapshotFlow { pagerState.currentPage }.collect { page ->
                            // Do something with each page change, for example:
                            // viewModel.sendPageSelectedEvent(page)
                            //  Log.d("Page change", "Page changed to $page")

                        }
                    }
                    HorizontalPager(
                        state = pagerState,
                        //  pageCount = items.size,
                        modifier = Modifier.fillMaxWidth(),
                        // verticalAlignment = Alignment.
                    ) { page ->

                        Text(
                            modifier = Modifier.fillMaxWidth().wrapContentSize(),
                            text = "February 1",
                            textAlign = TextAlign.Center,

                            )

                    }
                }
            }
        }
    }







HistoryScreen

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




    


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

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
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.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.DrawerState
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberDrawerState
import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
import androidx.compose.material3.windowsizeclass.WindowSizeClass
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.IntSize
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.R
import com.coroutines.thisdayinhistory.drawer.AppNavigationDrawerWithContent
import com.coroutines.thisdayinhistory.ui.viewmodels.ISettingsViewModel
import com.coroutines.thisdayinhistory.components.NAV_ARGUMENT_HISTORY_EVENT
import com.coroutines.thisdayinhistory.ui.appbar.AppBar
import com.coroutines.thisdayinhistory.ui.components.BottomNavigationBarCalendar
import com.coroutines.thisdayinhistory.ui.state.DataRequestState
import com.coroutines.thisdayinhistory.ui.state.HistoryViewModelState
import com.coroutines.thisdayinhistory.ui.state.RequestCategory
import com.coroutines.thisdayinhistory.ui.viewmodels.HistoryViewModelMock
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class, ExperimentalMaterial3Api::class)
@Composable
fun HistoryScreen(
    modifier: Modifier = Modifier,
    navController: NavController,
    settingsViewModel : ISettingsViewModel,
    viewModel: IHistoryViewModel =  HistoryViewModelMock()
){
   val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
   AppNavigationDrawerWithContent(
       navController = navController,
       settingsViewModel = settingsViewModel,
       drawerState
   ) {

       val uiState by viewModel.uiState.collectAsStateWithLifecycle()
       val dataRequestState = uiState.dataRequestState
       val option = uiState.selectedCategory
       val categories = uiState.catsByLanguage.getCategories().values.toList()
       var isItemImageExpanded by remember { mutableStateOf(false) }

       AnimatedContent(targetState = dataRequestState,
           transitionSpec = {
               if (dataRequestState == DataRequestState.CompletedSuccessfully(RequestCategory.Option)) {
                   (slideInHorizontally (animationSpec = tween(durationMillis = 300))
                   { width -> width }
                           + fadeIn()).togetherWith(slideOutHorizontally
                   { width -> -width } + fadeOut())
               } else {
                   fadeIn(animationSpec = tween(200)) togetherWith
                           fadeOut(animationSpec = tween(200)) using
                           SizeTransform { initialSize, targetSize ->
                               if (targetState == DataRequestState.CompletedSuccessfully()) {
                                   keyFramesToTargetState(targetSize)
                               } else {
                                   keyFramesToNonTargetState(initialSize)
                               }
                           }
               }
           }, label = "") { targetState ->
           when {
               targetState is DataRequestState.Started
               -> HistoryScreenLoading(viewModel)
               targetState is DataRequestState.CompletedWithError
               -> HistoryScreenError(targetState.errorMessage)
               targetState is DataRequestState.CompletedSuccessfully
               -> {
                   val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
                   Scaffold(
                       modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection ),
                       topBar = {
                           AppBar(
                               historyViewModel = viewModel,
                               drawerState = drawerState,
                               cancelButtonText = R.string.cancel,
                               scrollBehavior = scrollBehavior
                           )
                       },
                       bottomBar = {
                           BottomBar(
                               isItemImageExpanded,
                               viewModel,
                               uiState
                           )
                       }
                   ) { paddingValues ->
                       Column(
                           Modifier
                               .fillMaxSize()
                               .padding(top = paddingValues.calculateTopPadding())
                       ) {
                           Column(Modifier.fillMaxWidth()) {
                               HistoryViewCategoryTabs(
                                   categories = categories,
                                   option,
                                   onCategorySelected = viewModel::onCategoryChanged,
                                   tabItemsPadding = 10.dp,
                                   modifier = Modifier
                                       .fillMaxWidth()
                                       .background(MaterialTheme.colorScheme.background)
                               )


                               HistoryEventList(
                                   viewModel = viewModel,
                                   windowSizeClass = WindowSizeClass.calculateFromSize(DpSize.Zero),
                                   navController = navController
                               ) { result ->
                                    isItemImageExpanded = result
                               }
                           }
                       }
                   }
               }
           }
       }
   }
}
@Composable
@Suppress("MagicNumber")
private fun BottomBar(
    isItemImageExpanded: Boolean,
    historyViewModel: IHistoryViewModel,
    historyViewModelState: HistoryViewModelState,
) {
    AnimatedVisibility(
        visible = (!isItemImageExpanded) && (!historyViewModel.isScrolled.value),
        enter = fadeIn() + slideInVertically(animationSpec = tween(10),
            initialOffsetY = { fullHeight -> fullHeight }),
        exit = fadeOut() + slideOutVertically(animationSpec = tween(10),
            targetOffsetY = { fullHeight -> fullHeight }),
    ) {
        BottomNavigationBarCalendar(
            historyViewModel = historyViewModel,
            historyViewModelState = historyViewModelState
        )
    }
}

private fun keyFramesToNonTargetState(initialSize: IntSize) = keyframes {
    IntSize(
        initialSize.width / 5,
        initialSize.height / 5
    ) at 60
    durationMillis = 70
    IntSize(
        initialSize.width / 3,
        initialSize.height / 3
    ) at 130
    durationMillis = 70
    IntSize(
        initialSize.width / 2,
        initialSize.height / 2
    ) at 150
    durationMillis = 70
}


private fun keyFramesToTargetState(targetSize: IntSize) = keyframes {
    // Expand horizontally first.
    IntSize(0, 0) at 0
    durationMillis = 50
    IntSize(
        targetSize.width / 5,
        targetSize.height / 5
    ) at 60
    durationMillis = 50
    IntSize(
        targetSize.width / 3,
        targetSize.height / 3
    ) at 100
    durationMillis = 50
    IntSize(
        targetSize.width / 2,
        targetSize.height / 2
    ) at 150
    durationMillis = 50
}