This Day In History Jetpack Compose App - Detail Screen
Objective:
Build our Detail Screen and connect it to a mock HistoryDetailViewModel. At the end of this exercise, it will be possible to click on a historical event on the main screen and navigate to the Detail Screen. On the Detail Screen, it will be possible to flip thru associated events (if there are more than one). You can also go to Settings and change the theme from Light to Dark, and the Detail Screen will adopt the dark theme. In the Dark Theme, the Detail Screen will extract pallete colors from the image and apply them to the scren itself.
Detail Screen functionalities
The Detail Screen will display supplemental information on the chosen historical event. For example, if you click on "The famous hand of God goal, scored by Diego Maradona in the quarter-finals of the 1986 FIFA World cup match",
the associated relevant information will be on Diego Maradon and the 1986 FIFA World Cup. The Detail Screen offers a carousel-like view of supplemental information, implemented via Compose Pager
- Display Historical Event image at the top.
- Display Historical Event title as a header.
- Display summary of the historical event as a body
Code
Collapsing Effect Screen
Add CollapsingEffectScreen to the com.coroutines.thisdayinhistory.ui.component package.
The purpose of this composable is to display an image above text, and resize the image on scroll up to an ever smaller dimension to make room for displaying text
package com.coroutines.thisdayinhistory.ui.components
import android.util.Log
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
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.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import coil.request.CachePolicy
import coil.request.ImageRequest
import com.coroutines.thisdayinhistory.components.MAX_COUNT_CHARS_BEFORE_PAD_UP
import com.coroutines.thisdayinhistory.components.MIN_COUNT_CHARS_BEFORE_PAD_UP
import com.coroutines.thisdayinhistory.ui.configurations.StyleConfiguration
import com.coroutines.thisdayinhistory.ui.constants.DETAIL_BODY_TEXT_TAG
import com.coroutines.thisdayinhistory.ui.constants.DETAIL_HEADER_TEXT_TAG
import com.coroutines.thisdayinhistory.ui.utils.breakUpWithNewLines
import com.coroutines.thisdayinhistory.ui.utils.darker
import com.coroutines.thisdayinhistory.ui.utils.lighter
import com.coroutines.thisdayinhistory.ui.utils.padUp
import com.coroutines.thisdayinhistory.ui.utils.stripHtml
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CollapsingEffectScreen(
modifier: Modifier,
styleConfiguration: StyleConfiguration,
adjustedColor: Color,
pagerState: PagerState,
imageUrl :String,
loadingUrl: String,
title: String,
bodyText: String,
) {
val lazyListState = rememberLazyListState()
var scrolledY = 0f
var previousOffset = 0
LazyColumn(
Modifier.fillMaxSize(),
lazyListState,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
item {
val context = LocalContext.current
var isLoading by remember { mutableStateOf(true) }
Image(
rememberAsyncImagePainter(
remember(imageUrl) {
ImageRequest.Builder(context)
.data(imageUrl)
.memoryCachePolicy(CachePolicy.ENABLED)
.memoryCacheKey(imageUrl)
.build()
},
onLoading = {
println("imageUrl onLoading: $imageUrl")
},
onSuccess = {
println("imageUrl onSuccess: $imageUrl")
isLoading = false
}
),
contentDescription = "loaded",
alignment = Alignment.TopCenter,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(1.dp)
.fillMaxWidth()
.clip(CircleShape)
)
Crossfade(targetState = isLoading, label = "") {
when (it) {
true -> {
Image(
rememberAsyncImagePainter(
remember(loadingUrl) {
ImageRequest.Builder(context)
.data(loadingUrl)
.memoryCachePolicy(CachePolicy.ENABLED)
.memoryCacheKey(loadingUrl)
.build()
}
),
contentDescription = "loaded",
alignment = Alignment.TopCenter,
contentScale = ContentScale.Crop,
modifier = modifier
.graphicsLayer {
scrolledY += lazyListState.firstVisibleItemScrollOffset - previousOffset
translationY = scrolledY * 0.5f
scaleX = 1 / ((scrolledY * 0.01f) + 1f)
scaleY = 1 / ((scrolledY * 0.01f) + 1f)
previousOffset = lazyListState.firstVisibleItemScrollOffset
}
.size(DETAIL_IMAGE_SIZE.dp)
.clip(CircleShape)
.blur(
radiusX = 4.dp,
radiusY = 4.dp,
edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(2.dp))
)
)
}
false -> {
Image(
rememberAsyncImagePainter(
remember(imageUrl) {
ImageRequest.Builder(context)
.memoryCachePolicy(CachePolicy.ENABLED)
.data(imageUrl)
.memoryCacheKey(imageUrl)
.build()
},
),
contentDescription = "loaded",
alignment = Alignment.TopCenter,
contentScale = ContentScale.Crop,
modifier = modifier
.graphicsLayer {
scrolledY += lazyListState.firstVisibleItemScrollOffset - previousOffset
translationY = scrolledY * 0.5f
scaleX = 1 / ((scrolledY * 0.01f) + 1f)
scaleY = 1 / ((scrolledY * 0.01f) + 1f)
previousOffset = lazyListState.firstVisibleItemScrollOffset
}
.size(DETAIL_IMAGE_SIZE.dp)
.clip(CircleShape)
)
}
}
}
}
if (pagerState.pageCount > 1) {
item {
Row(
Modifier
.wrapContentHeight()
.fillMaxWidth()
.padding(bottom = 8.dp, top = 30.dp),
horizontalArrangement = Arrangement.Center
) {
repeat(pagerState.pageCount) { iteration ->
val color =
if (pagerState.currentPage == iteration) MaterialTheme.colorScheme.onBackground else MaterialTheme.colorScheme.onBackground.copy(alpha = 0.5f)
Box(
modifier = Modifier
.padding(2.dp)
.clip(CircleShape)
.background(color)
.size(8.dp)
)
}
}
}
}
stickyHeader {
Text(
text = title.stripHtml(),
Modifier
.testTag(DETAIL_HEADER_TEXT_TAG)
.background(adjustedColor)
.defaultMinSize(minHeight = 70.dp)
.fillMaxWidth()
.padding(20.dp),
maxLines = 4,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.titleLarge
)
}
items(1)
{
Text(
text = bodyText
.stripHtml()
.breakUpWithNewLines()
.padUp(),
Modifier
.testTag(DETAIL_BODY_TEXT_TAG)
.fillMaxWidth()
.padding(35.dp),
color = if (styleConfiguration.isDark) adjustedColor.lighter(LIGHTER_OR_DARKER_TEXT_FACTOR)
else adjustedColor.darker(
LIGHTER_OR_DARKER_TEXT_FACTOR
),
lineHeight = styleConfiguration.lineHeight,
style = styleConfiguration.bodyTypography
)
Log.i("detail", bodyText.stripHtml())
if (bodyText.length in MIN_COUNT_CHARS_BEFORE_PAD_UP..MAX_COUNT_CHARS_BEFORE_PAD_UP) {
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
Log.d("detail screen height", screenHeight.value.toString())
Spacer(modifier = Modifier.height((screenHeight / 4 - 75.dp)))
}
}
}
}
private const val DETAIL_IMAGE_SIZE = 275
private const val LIGHTER_OR_DARKER_TEXT_FACTOR = 0.9f
Screen Configuration Data Class
And ScreenConfiguration data class to the com.coroutines.thisdayinhistory.ui.configurations package.
package com.coroutines.thisdayinhistory.ui.configurations
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import com.coroutines.thisdayinhistory.ui.theme.AppThemeLocal
import com.coroutines.thisdayinhistory.ui.theme.ThisDayInHistoryThemeEnum
data class ScreenConfiguration(val localAppTheme: AppThemeLocal){
val isDark = localAppTheme.historyCatThemeEnum == ThisDayInHistoryThemeEnum.Dark
val isLargeWidth = localAppTheme.windowSizeClass.widthSizeClass > WindowWidthSizeClass.Medium
}
Style Configuration Data Class
Add StyleConfiguration dat class to the com.coroutines.thisdayinhistory.ui.configurations package.
StyleConfiguration contains display instructions to the actual @Composable displayed on the screen.
package com.coroutines.thisdayinhistory.ui.configurations
import androidx.compose.material3.Typography
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
data class StyleConfiguration(
private val screenConfiguration: ScreenConfiguration,
private val typography: Typography,
private val screen: String,){
val contrastAgainstColor = Color.LightGray
val isDark = screenConfiguration.isDark
val bodyTypography =
if (screenConfiguration.isLargeWidth) typography.bodyLarge else typography.bodyMedium
val lineHeight =
if (screenConfiguration.isLargeWidth) 30.sp else 24.sp
}
History ViewModel Mock
Modify HistoryViewModelMock.kt by adding several Page elements with all necessary data.
package com.coroutines.thisdayinhistory.ui.viewmodels
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.coroutines.data.models.CountryCodeMapping
import com.coroutines.data.models.HistoricalEvent
import com.coroutines.data.models.LangEnum
import com.coroutines.data.models.OnboardingStatusEnum
import com.coroutines.models.wiki.OriginalImage
import com.coroutines.models.wiki.Page
import com.coroutines.models.wiki.Thumbnail
import com.coroutines.thisdayinhistory.ui.state.DataRequestState
import com.coroutines.thisdayinhistory.ui.state.HistoryViewModelState
import com.coroutines.thisdayinhistory.uimodels.CatsByLanguage
import com.coroutines.thisdayinhistory.uimodels.SelectedDate
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.flow.update
import kotlinx.coroutines.launch
import java.time.LocalDateTime
private data class HistoryStateMock(
val dataRequestState: DataRequestState = DataRequestState.NotStarted,
val selectedCategory: String = CatsByLanguage(LangEnum.ENGLISH).getDefaultCategory(),
val previousCategory: String = CatsByLanguage(LangEnum.ENGLISH).getDefaultCategory(),
val selectedItem: HistoricalEvent = HistoricalEvent(description = "No Events"),
val selectedDate: SelectedDate = SelectedDate("June", 22),
val catsByLanguage: CatsByLanguage = CatsByLanguage(LangEnum.ENGLISH),
val filter: String = ""
) {
fun asActivityState() = HistoryViewModelState(
dataRequestState = dataRequestState,
selectedCategory = selectedCategory,
previousCategory = previousCategory,
selectedItem = selectedItem,
selectedDate = selectedDate,
catsByLanguage = catsByLanguage,
filter = filter
)
}
class HistoryViewModelMock : ViewModel(), IHistoryViewModel {
private val data = mutableStateListOf<HistoricalEvent>()
private val isScrolledState = mutableStateOf(false)
private val viewModelState = MutableStateFlow(value = HistoryStateMock())
init{
viewModelState.update { state ->
state.copy(
dataRequestState = DataRequestState.Started
)
}
data.add(HistoricalEvent(
description = "Nik Wallenda becomes the first man to successfully walk across the Grand Canyon on a tight rope.",
countryCodeMappings = buildList {
CountryCodeMapping("USA", alpha2 = "US")
},
year = "2022",
imageBigUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Nik-Wallenda-Skyscraper-Live.jpg/320px-Nik-Wallenda-Skyscraper-Live.jpg",
originalImage = OriginalImage(200, "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Nik-Wallenda-Skyscraper-Live.jpg/320px-Nik-Wallenda-Skyscraper-Live.jpg", 200),
shortTitle = "short title test",
extract = "extract test",
pages = listOf ( Page(
description = "test",
extract = "The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States. The Grand Canyon is 277 miles (446 km) long, up to 18 miles (29 km) wide and attains a depth of over a mile.",
extractHtml = "test",
title = "Grand_Canyon",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Canyon_River_Tree_%28165872763%29.jpeg/320px-Canyon_River_Tree_%28165872763%29.jpeg", width = 427),
originalImage = OriginalImage(400, "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Canyon_River_Tree_%28165872763%29.jpeg/320px-Canyon_River_Tree_%28165872763%29.jpeg", width = 400)
),
Page(
description = "test",
extract = "Tightrope walking, also called funambulism, is the skill of walking along a thin wire or rope. It has a long tradition in various countries and is commonly associated with the circus. Other skills similar to tightrope walking include slack rope walking and slacklining.",
extractHtml = "test",
title = "Tightrope walking",
pageId = 2,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Tightrope_walking.jpg/320px-Tightrope_walking.jpg", width = 427),
originalImage = OriginalImage(400, "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Tightrope_walking.jpg/320px-Tightrope_walking.jpg", width = 400)
))
))
data.add(HistoricalEvent(
description = "Israeli archaeologists discover the tomb of Herod the Great south of Jerusalem.",
countryCodeMappings = buildList {
CountryCodeMapping("Israel", alpha2 = "IL")
},
year = "2007",
imageBigUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Flag_of_Israel.svg/320px-Flag_of_Israel.svg.png",
originalImage = OriginalImage(200, "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Flag_of_Israel.svg/320px-Flag_of_Israel.svg.png", 200),
shortTitle = "short title test",
extract = "extract test",
pages = listOf (
Page(
description = "test",
extract = "Herod I or Herod the Great was a Roman Jewish client king of the Herodian Kingdom of Judea. He is known for his colossal building projects throughout Judea. Among these works are the rebuilding of the Second Temple in Jerusalem and the expansion of its base—the Western Wall being part of it. Vital details of his life are recorded in the works of the 1st century CE Roman–Jewish historian Josephus.",
extractHtml = "test",
title = "Herod_the_Great",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Herods_grave_israel_museum_2013_mrach_by_history_on_the_map_efi_elian.jpg/320px-Herods_grave_israel_museum_2013_mrach_by_history_on_the_map_efi_elian.jpg", width = 427),
originalImage = OriginalImage(667, "https://upload.wikimedia.org/wikipedia/commons/e/ee/Herods_grave_israel_museum_2013_mrach_by_history_on_the_map_efi_elian.jpg", width = 1000)
),
Page(
description = "Jerusalem",
extract = "Jerusalem is a city in the Southern Levant, on a plateau in the Judaean Mountains between the Mediterranean and the Dead Sea. It is one of the oldest cities in the world, and is considered holy to the three major Abrahamic religions—Judaism, Christianity, and Islam. Both the State of Israel and the State of Palestine claim Jerusalem as their capital city. Israel maintains its primary governmental institutions there, and the State of Palestine ultimately foresees it as its seat of power. Neither claim is widely recognized internationally.",
extractHtml = "test",
title = "Jerusalem",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/%D7%94%D7%9E%D7%A6%D7%95%D7%93%D7%94_%D7%91%D7%9C%D7%99%D7%9C%D7%94.jpg/320px-%D7%94%D7%9E%D7%A6%D7%95%D7%93%D7%94_%D7%91%D7%9C%D7%99%D7%9C%D7%94.jpg", width = 427),
originalImage = OriginalImage(667, "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/%D7%94%D7%9E%D7%A6%D7%95%D7%93%D7%94_%D7%91%D7%9C%D7%99%D7%9C%D7%94.jpg/320px-%D7%94%D7%9E%D7%A6%D7%95%D7%93%D7%94_%D7%91%D7%9C%D7%99%D7%9C%D7%94.jpg", width = 1000)
),
)
))
data.add(HistoricalEvent(
description = "Betty Boothroyd becomes the first woman to be elected Speaker of the British House of Commons in its 700-year history.",
countryCodeMappings = buildList {
CountryCodeMapping("UK", alpha2 = "UK")
},
year = "1992",
imageBigUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Official_portrait_of_Baroness_Boothroyd_%28cropped%29.jpg/320px-Official_portrait_of_Baroness_Boothroyd_%28cropped%29.jpg",
originalImage = OriginalImage(200, "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Official_portrait_of_Baroness_Boothroyd_%28cropped%29.jpg/320px-Official_portrait_of_Baroness_Boothroyd_%28cropped%29.jpg", 200),
shortTitle = "short title test",
extract = "extract test",
pages = listOf ( Page(
description = "test",
extract = "The 1992 election of the Speaker of the House of Commons occurred on 27 April 1992, in the first sitting of the House of Commons following the 1992 general election and the retirement of the previous Speaker Bernard Weatherill. The election resulted in the election of Labour MP Betty Boothroyd, one of Weatherill's deputies, who was the first woman to become Speaker. This was at a time when the Conservative Party had a majority in the House of Commons. It was also the first contested election since William Morrison defeated Major James Milner on 31 October 1951, although Geoffrey de Freitas had been nominated against his wishes in the 1971 election.",
extractHtml = "test",
title = "1992_Speaker_of_the_British_House_of_Commons_election",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/f/f2/Official_portrait_of_Baroness_Boothroyd_crop_2.jpg", width = 427),
originalImage = OriginalImage(400, "https://upload.wikimedia.org/wikipedia/commons/f/f2/Official_portrait_of_Baroness_Boothroyd_crop_2.jpg", width = 400)
))
))
data.add(HistoricalEvent(
description = "The famous Hand of God goal, scored by Diego Maradona in the quarter-finals of the 1986 FIFA World Cup match between Argentina and England, ignites controversy. This was later followed by the Goal of the Century. Argentina wins 2–1 and later goes on to win the World Cup.",
year = "1986",
imageBigUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Maradona_shilton_mano_dios.jpg/320px-Maradona_shilton_mano_dios.jpg",
originalImage = OriginalImage(200, "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Maradona_shilton_mano_dios.jpg/320px-Maradona_shilton_mano_dios.jpg", 200),
shortTitle = "short title test",
extract = "extract test",
pages = listOf (
Page(
description = "test",
extract = "Diego Armando Maradona was an Argentine professional football player and manager. Widely regarded as one of the greatest players in the history of the sport, he was one of the two joint winners of the FIFA Player of the 20th Century award.",
extractHtml = "test",
title = "Diego_Maradona",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Maradona-Mundial_86_con_la_copa.JPG/320px-Maradona-Mundial_86_con_la_copa.JPG", width = 427),
originalImage = OriginalImage(667, "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Maradona-Mundial_86_con_la_copa.JPG/320px-Maradona-Mundial_86_con_la_copa.JPG", width = 1000)
),
Page(
description = "1986 World Cup",
extract = "The 1986 FIFA World Cup was the 13th FIFA World Cup, a quadrennial football tournament for men's senior national teams. It was played in Mexico from 31 May to 29 June 1986. The tournament was the second to feature a 24-team format. Colombia had been originally chosen to host the competition by FIFA but, largely due to economic reasons, was not able to do so, and resigned in November 1982. Mexico was selected as the new host in May 1983, and became the first country to host the World Cup more than once, after previously hosting the 1970 edition.",
extractHtml = "test",
title = "1986_FIFA_World_Cup",
pageId = 1,
thumbnail = Thumbnail(320, "https://upload.wikimedia.org/wikipedia/en/thumb/7/77/1986_FIFA_World_Cup.svg/320px-1986_FIFA_World_Cup.svg.png", width = 427),
originalImage = OriginalImage(667, "https://upload.wikimedia.org/wikipedia/en/thumb/7/77/1986_FIFA_World_Cup.svg/320px-1986_FIFA_World_Cup.svg.png", width = 1000)
),
))
)
viewModelState.update { state ->
state.copy(
dataRequestState = DataRequestState.CompletedSuccessfully()
)
}
}
override val historyData: SnapshotStateList<HistoricalEvent>
get() = data
override var isScrolled: MutableState<Boolean>
get() = isScrolledState
set(value) {}
override var filterKey: String
get() = TODO("Not yet implemented")
set(value) {}
override var selectedItem: HistoricalEvent
get() = data[0]
set(value) {}
override val uiState = viewModelState
.map {it.asActivityState() }
.stateIn (
scope = viewModelScope,
started = SharingStarted.WhileSubscribed(stopTimeoutMillis = 5_000),
initialValue = viewModelState.value.asActivityState()
)
override fun onDateChanged(localDateTime: LocalDateTime) {
TODO("Not yet implemented")
}
override fun updateDate(count: Int) {
TODO("Not yet implemented")
}
override fun onCategoryChanged(optionSelected: String) {
TODO("Not yet implemented")
}
override fun search(searchTerm: String) {
TODO("Not yet implemented")
}
}
Detail ViewModel Interface
And IDetailViewModel interface to the com.coroutines.thisdayinhistory.ui.viewmodels package.
package com.coroutines.thisdayinhistory.ui.viewmodels
import androidx.compose.runtime.MutableState
import com.coroutines.data.models.HistoricalEvent
import com.coroutines.models.wiki.Page
interface IDetailViewModel {
val isSelectedEventPlaceholder: Boolean
var selectedEvent: HistoricalEvent
var historyImage: MutableState<String>
val pages: List<Page>
}
Detail ViewModel Implementation
And DetailViewModel class to the com.coroutines.thisdayinhistory.ui.viewmodels package.
package com.coroutines.thisdayinhistory.ui.viewmodels
import androidx.compose.runtime.mutableStateOf
import androidx.lifecycle.ViewModel
import com.coroutines.data.models.HistoricalEvent
import com.coroutines.models.wiki.Page
import com.coroutines.thisdayinhistory.ui.screens.detail.isDefault
class DetailViewModel
: ViewModel(), IDetailViewModel {
override var selectedEvent: HistoricalEvent = HistoricalEvent(HistoricalEvent.DEFAULT_DESCRIPTION)
override val isSelectedEventPlaceholder = selectedEvent.isDefault()
override var historyImage = mutableStateOf<String>( "")
override val pages : List<Page>
get() = selectedEvent.pages
.asSequence()
.filter { it.videoUrl != null || !it.extract.contains("foi um ano") }
.filter { it.videoUrl != null || !it.extract.contains("Cette page concerne")}
.filter { it.videoUrl != null || !it.extract.contains("по григорианскому")}
.filter { it.videoUrl != null || !it.extract.contains("est une année")}
.filter { it.videoUrl != null || it.thumbnail != null || it.originalImage != null }
.filter { it.videoUrl != null || !it.thumbnail?.source.isNullOrEmpty() ||
!it.originalImage?.source.isNullOrEmpty()}
.filter { it.videoUrl != null || it.thumbnail?.source!!.isNotBlank() ||
it.originalImage?.source!!.isNotBlank()}
.toList()
}
Detail Screen
And DetailViewModel class to the com.coroutines.thisdayinhistory.ui.screens.detail package.
package com.coroutines.thisdayinhistory.ui.screens.detail
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.MaterialTheme
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.graphics.Color
import androidx.compose.ui.graphics.luminance
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import coil.compose.AsyncImage
import coil.request.CachePolicy
import coil.request.ImageRequest
import com.coroutines.data.models.HistoricalEvent
import com.coroutines.models.wiki.Page
import com.coroutines.thisdayinhistory.components.ADJUSTED_COLOR_DARKER_FACTOR_ON_DARK_THEME
import com.coroutines.thisdayinhistory.components.ADJUSTED_COLOR_LIGHTER_FACTOR
import com.coroutines.thisdayinhistory.components.DARKER_BG_FACTOR
import com.coroutines.thisdayinhistory.components.MIN_LUMINANCE
import com.coroutines.thisdayinhistory.components.NAV_ARGUMENT_DOMINANT_COLOR
import com.coroutines.thisdayinhistory.components.NAV_ARGUMENT_HISTORY_EVENT
import com.coroutines.thisdayinhistory.ui.components.CollapsingEffectScreen
import com.coroutines.thisdayinhistory.ui.components.DominantColorState
import com.coroutines.thisdayinhistory.ui.components.MinContrastOfPrimaryVsSurface
import com.coroutines.thisdayinhistory.ui.components.contrastAgainst
import com.coroutines.thisdayinhistory.ui.components.rememberDominantColorState
import com.coroutines.thisdayinhistory.ui.configurations.StyleConfiguration
import com.coroutines.thisdayinhistory.ui.modifiers.pagerOffsetAnimation
import com.coroutines.thisdayinhistory.ui.utils.darker
import com.coroutines.thisdayinhistory.ui.utils.lighter
import com.coroutines.thisdayinhistory.ui.viewmodels.DetailViewModel
import com.coroutines.thisdayinhistory.ui.viewmodels.IDetailViewModel
fun HistoricalEvent.isDefault(): Boolean{
return this.description == HistoricalEvent.DEFAULT_DESCRIPTION
}
fun <T> NavController.getArgument(handleName: String): T? {
return this.previousBackStackEntry?.savedStateHandle?.get<T>(handleName)
}
@OptIn(ExperimentalFoundationApi::class)
@Suppress("LongParameterList")
@Composable
fun DetailScreen (
modifier: Modifier,
navController: NavController,
backHandler: () -> Unit,
darkThemeHandler: () -> Unit,
styleConfiguration: StyleConfiguration,
viewModel: IDetailViewModel = DetailViewModel()
) {
if (viewModel.isSelectedEventPlaceholder) {
navController
.getArgument<HistoricalEvent>(NAV_ARGUMENT_HISTORY_EVENT)?.let {
viewModel.selectedEvent = it
}
}
val pages = viewModel.pages
val pagerState = rememberPagerState(pageCount = {
pages.size
})
if (styleConfiguration.isDark) {
darkThemeHandler()
}
BackHandler {
backHandler()
}
val regularBackground = MaterialTheme.colorScheme.background
val dominantColor = navController
.getArgument<String>(NAV_ARGUMENT_DOMINANT_COLOR)?.toULong()
?: regularBackground.value
var imageDisplayed by remember { mutableStateOf (viewModel.selectedEvent.imageUrl ?: "") }
var adjustedColor by remember { mutableStateOf (if (styleConfiguration.isDark) Color(dominantColor).darker(
ADJUSTED_COLOR_DARKER_FACTOR_ON_DARK_THEME) else regularBackground) }
val dominantColorState = rememberDominantColorState { color ->
color.contrastAgainst(styleConfiguration.contrastAgainstColor) >= MinContrastOfPrimaryVsSurface
}
LaunchedEffect(imageDisplayed) {
dominantColorState.updateColorsFromImageUrl(imageDisplayed)
}
PreloadImages(pages = pages, dominantColorState = dominantColorState)
HorizontalPager(
modifier = Modifier
.background(adjustedColor)
.padding(
top = 50.dp,
bottom = 50.dp
),
state = pagerState,
verticalAlignment = Alignment.Top,
) { page ->
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { item ->
imageDisplayed = pages[item].getThumbnail()
try {
if (styleConfiguration.isDark) {
adjustedColor =
dominantColorState.calculateDominantColor(url = imageDisplayed)!!.color.darker(
DARKER_BG_FACTOR
)
if (adjustedColor.luminance() < MIN_LUMINANCE){
adjustedColor = adjustedColor.lighter(
ADJUSTED_COLOR_LIGHTER_FACTOR)
}
}
}
catch(e: Exception){
println("snapshotFlow exception: ${e.message}")
}
}
}
Column(
modifier = Modifier
.background(adjustedColor)
.pagerOffsetAnimation(pagerState, page),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {
val imageUrl = pages[page].getDisplayImage()
val loadingUrl = pages[page].getThumbnail()
val title = pages[page].title.replace("_", " ")
val bodyText = pages[page].extract
CollapsingEffectScreen(
modifier,
styleConfiguration,
adjustedColor,
pagerState,
imageUrl,
loadingUrl,
title,
bodyText,
)
}
}
}
@Composable
private fun PreloadImages(pages: List<Page>, dominantColorState: DominantColorState) {
Column() {
Modifier.size(1.dp)
pages.forEach { page ->
val key = page.getDisplayImage()
LaunchedEffect(page) {
dominantColorState.calculateDominantColor(key)
}
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(key)
.memoryCachePolicy(CachePolicy.ENABLED)
.memoryCacheKey(key)
.crossfade(true)
.build(),
contentDescription = key,
Modifier.size(1.dp)
)
}
}
}
NavGraphBuilder.mainGraph
Modify NavGraphBuilder.mainGraph in the com.coroutines.thisdayinhistory.graph package by implementing the DetailScreen navigation.
package com.coroutines.thisdayinhistory.graph
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.Modifier
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import androidx.navigation.navigation
import com.coroutines.thisdayinhistory.LocalAppTheme
import com.coroutines.thisdayinhistory.ui.configurations.ScreenConfiguration
import com.coroutines.thisdayinhistory.ui.configurations.StyleConfiguration
import com.coroutines.thisdayinhistory.ui.screens.about.AboutScreen
import com.coroutines.thisdayinhistory.ui.screens.detail.DetailScreen
import com.coroutines.thisdayinhistory.ui.screens.language.LanguageScreen
import com.coroutines.thisdayinhistory.ui.screens.main.HistoryScreen
import com.coroutines.thisdayinhistory.ui.screens.uitheme.ThemeScreen
import com.coroutines.thisdayinhistory.ui.viewmodels.ISettingsViewModel
fun NavGraphBuilder.mainGraph(
navController: NavController,
settingsViewModel : ISettingsViewModel
) {
navigation(startDestination = MainNavOption.HistoryScreen.name, route = NavRoutes.MainRoute.name) {
composable(MainNavOption.HistoryScreen.name) {
HistoryScreen(navController = navController, settingsViewModel = settingsViewModel)
}
composable(
MainNavOption.DetailScreen.name
)
{ backStackEntry ->
DetailScreen(
modifier = Modifier,
navController = navController ,
backHandler = { navController.popBackStack() },
darkThemeHandler = { /*TODO*/ },
styleConfiguration = StyleConfiguration(
ScreenConfiguration(LocalAppTheme.current),
MaterialTheme.typography,
"detail"
)
)
}
composable(
MainNavOption.LanguagesScreen.name
) {
LanguageScreen(navController = navController, viewModel = settingsViewModel)
}
composable(
MainNavOption.ThemeScreen.name
) {
ThemeScreen(viewModel = settingsViewModel)
}
composable(
MainNavOption.AboutScreen.name
) {
AboutScreen(viewModel = settingsViewModel)
}
}
}