Jetpack Compose App - App Bar
Objective:
Previously, we added the support for the Up Button via adding a composable
serving as a host for secondary screens - those whose appbar only needs a back button. Now it is time to add the primary App Bar. This App Bar will be
displayed on the main (history) screen and will have a hamburger menu on the left (to open the navigation drawer), and a calendar icon on the right, to open up a calendar.
Components built
Add or modify the following components:
- AppBar.kt: TopAppBar-based composable with a hamburger menu on the left and calendar icon on the right
- HistoryScreen.kt: Modify to fold the AppBar into the main screen
Code
AppBar
Add AppBar.kt to the com.coroutines.thisdayinhistory.ui.appbar package in the app module:
package com.coroutines.thisdayinhistory.ui.appbar
import androidx.compose.material3.LocalContentColor
import com.coroutines.thisdayinhistory.R
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import androidx.annotation.StringRes
import androidx.compose.foundation.background
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material3.DrawerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
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.res.stringResource
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterial3Api::class)
@Suppress("LongParameterList")
@Composable
fun AppBar(
drawerState: DrawerState? = null,
navigationIcon: (@Composable () -> Unit)? = null,
historyViewModel: IHistoryViewModel,
@StringRes title: Int? = null,
@StringRes cancelButtonText: Int,
scrollBehavior: TopAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(),
) {
TopAppBar(
modifier = Modifier.background(MaterialTheme.colorScheme.background),
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.background
),
title = {} {
},
actions = {
},
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
IconButton(
onClick = {
showDatePicker = true
},
) {
Icon(
imageVector = Icons.Filled.DateRange,
contentDescription = stringResource(R.string.appbar_calendar)
)
}
}
},
navigationIcon = {
if (drawerState != null && navigationIcon == null){
DrawerIcon(drawerState = drawerState)
} else {
navigationIcon?.invoke()
}
},
scrollBehavior = scrollBehavior
)
}
@Composable
private fun DrawerIcon(drawerState: DrawerState) {
val coroutineScope = rememberCoroutineScope()
IconButton(onClick = {
coroutineScope.launch {
drawerState.open()
}
}) {
Icon(
Icons.Rounded.Menu,
tint = MaterialTheme.colorScheme.onBackground,
contentDescription = "hello"
)
}
}
HistoryScreen
Modify HistoryScreen.kt in 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.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.slideOutHorizontally
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.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.state.DataRequestState
import com.coroutines.thisdayinhistory.ui.state.RequestCategory
import com.coroutines.thisdayinhistory.ui.viewmodels.HistoryViewModelMock
@OptIn(ExperimentalMaterial3WindowSizeClassApi::class, ExperimentalMaterial3Api::class)
@Composable
fun HistoryScreen(
modifier: Modifier = Modifier,
navController: NavController,
settingsViewModel : ISettingsViewModel,
){
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
AppNavigationDrawerWithContent(
navController = navController,
settingsViewModel = settingsViewModel,
drawerState
) {
val viewModel = HistoryViewModelMock()
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
val dataRequestState = uiState.dataRequestState
val option = uiState.selectedCategory
val categories = uiState.catsByLanguage.getCategories().values.toList()
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 = HistoryViewModelMock(),
drawerState = drawerState,
cancelButtonText = R.string.cancel,
scrollBehavior = scrollBehavior
)
},
bottomBar = {
}
) { 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)
)
val historyViewModel = HistoryViewModelMock()
HistoryEventList(
viewModel = historyViewModel,
windowSizeClass = WindowSizeClass.calculateFromSize(DpSize.Zero),
navController = navController
) {
// TO DO
}
}
}
}
}
}
}
}
}
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
}