Made design improvements to favorites actors screen

Made design improvements to home, favorites screen pager
RajashekarRaju · Apr 22, 2023 · 133bdfa · 133bdfa
1 parent 92befe6
commit 133bdfa
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 124 deletions.
diff --git a/app/src/main/java/com/developersbreach/composeactors/ui/components/Components.kt b/app/src/main/java/com/developersbreach/composeactors/ui/components/Components.kt
@@ -77,11 +77,12 @@ fun ApiKeyMissingShowSnackbar(
 
 @Composable
 fun AppDivider(
-    verticalPadding: Dp
+    verticalPadding: Dp,
+    thickness: Dp = 1.dp
 ) {
     Divider(
         color = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
-        thickness = 1.dp,
+        thickness = thickness,
         startIndent = 0.dp,
         modifier = Modifier.padding(vertical = verticalPadding)
     )

diff --git a/app/src/main/java/com/developersbreach/composeactors/ui/components/DynamicThemeGenerator.kt b/app/src/main/java/com/developersbreach/composeactors/ui/components/DynamicThemeGenerator.kt
@@ -13,6 +13,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.core.graphics.drawable.toBitmap
 import androidx.palette.graphics.Palette
 import coil.Coil
+import coil.imageLoader
 import coil.request.ImageRequest
 import coil.request.SuccessResult
 import coil.size.Scale
@@ -123,7 +124,7 @@ private suspend fun calculateSwatchesInImage(
         .allowHardware(false)
         .build()
 
-    val bitmap = when (val result = Coil.execute(r)) {
+    val bitmap = when (val result = r.context.imageLoader.execute(r)) {
         is SuccessResult -> result.drawable.toBitmap()
         else -> null
     }
@@ -147,10 +148,10 @@ private suspend fun calculateSwatchesInImage(
 
 @Composable
 fun ImageBackgroundThemeGenerator(
-    podcastImageUrl: String,
+    imageUrl: String,
+    backgroundColor: Color = MaterialTheme.colors.background,
     content: @Composable () -> Unit
 ) {
-    val backgroundColor = MaterialTheme.colors.background
     val dominantColorState = rememberDominantColorState(
         defaultColor = MaterialTheme.colors.background
     ) { color ->
@@ -159,8 +160,8 @@ fun ImageBackgroundThemeGenerator(
     }
     DynamicThemePrimaryColorsFromImage(dominantColorState) {
         // Update the dominantColorState with colors coming from the podcast image URL
-        LaunchedEffect(podcastImageUrl) {
-            dominantColorState.updateColorsFromImageUrl(podcastImageUrl)
+        LaunchedEffect(imageUrl) {
+            dominantColorState.updateColorsFromImageUrl(imageUrl)
         }
         content()
     }

diff --git a/app/src/main/java/com/developersbreach/composeactors/ui/components/TabsContainer.kt b/app/src/main/java/com/developersbreach/composeactors/ui/components/TabsContainer.kt
@@ -1,9 +1,12 @@
 package com.developersbreach.composeactors.ui.components
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Tab
@@ -14,33 +17,40 @@ import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun TabsContainer(
+    modifier: Modifier = Modifier,
     tabs: List<TabItem>,
-    tabPage: MutableState<Int>
+    pagerState: PagerState
 ) {
+    val coroutineScope = rememberCoroutineScope()
+
     CompositionLocalProvider(
         LocalRippleTheme provides TransparentRippleTheme
     ) {
         TabRow(
+            modifier = modifier.fillMaxWidth(),
             backgroundColor = MaterialTheme.colors.background,
-            selectedTabIndex = tabPage.value,
+            selectedTabIndex = pagerState.currentPage,
+            divider = { },
             indicator = { tabPositions ->
                 RoundedTabIndicator(
-                    modifier = Modifier.tabIndicatorOffset(tabPositions[tabPage.value])
+                    modifier = Modifier.tabIndicatorOffset(tabPositions[pagerState.currentPage])
                 )
             }
         ) {
             tabs.forEachIndexed { tabIndex, currentTab ->
                 Tab(
-                    selected = tabPage.value == tabIndex,
+                    selected = pagerState.currentPage == tabIndex,
                     selectedContentColor = MaterialTheme.colors.primary,
                     unselectedContentColor = MaterialTheme.colors.primary.copy(0.50f),
-                    onClick = { tabPage.value = tabIndex },
+                    onClick = { coroutineScope.launch { pagerState.animateScrollToPage(tabIndex) } },
                     text = {
                         Text(
                             text = currentTab.tabName,
@@ -59,7 +69,7 @@ private fun RoundedTabIndicator(
 ) {
     Spacer(
         modifier
-            .padding(horizontal = 24.dp)
+            .padding(horizontal = 40.dp)
             .height(2.dp)
             .background(
                 MaterialTheme.colors.primary,

diff --git a/...rc/main/java/com/developersbreach/composeactors/ui/screens/actorDetails/ActorDetailsUI.kt b/...rc/main/java/com/developersbreach/composeactors/ui/screens/actorDetails/ActorDetailsUI.kt
@@ -49,7 +49,7 @@ internal fun ActorDetailsUI(
         }
     ) {
         ImageBackgroundThemeGenerator(
-            podcastImageUrl = actorProfileUrl
+            imageUrl = actorProfileUrl
         ) {
             Box {
                 // Draws gradient from image and overlays on it.

diff --git a/...rc/main/java/com/developersbreach/composeactors/ui/screens/favorites/FavoritesScreenUI.kt b/...rc/main/java/com/developersbreach/composeactors/ui/screens/favorites/FavoritesScreenUI.kt
@@ -1,28 +1,31 @@
 package com.developersbreach.composeactors.ui.screens.favorites
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.developersbreach.composeactors.data.model.FavoriteActor
 import com.developersbreach.composeactors.data.model.Movie
+import com.developersbreach.composeactors.ui.components.AppDivider
 import com.developersbreach.composeactors.ui.components.TabItem
 import com.developersbreach.composeactors.ui.components.TabsContainer
 import com.developersbreach.composeactors.ui.screens.favorites.tabs.FavoriteActorsTabContent
 import com.developersbreach.composeactors.ui.screens.favorites.tabs.FavoriteMoviesTabContent
 import com.developersbreach.composeactors.ui.theme.ComposeActorsTheme
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun FavoritesScreenUI(
     favoriteMovies: List<Movie>,
@@ -32,7 +35,7 @@ fun FavoritesScreenUI(
     favoriteActors: List<FavoriteActor>,
     removeFavoriteActor: (FavoriteActor) -> Unit,
 ) {
-    val tabPage = rememberSaveable { mutableStateOf(0) }
+    val favoritesPagerState = rememberPagerState()
     val favoriteTabs = listOf(
         TabItem("Actors"),
         TabItem("Movies")
@@ -41,15 +44,16 @@ fun FavoritesScreenUI(
     Column(
         Modifier.fillMaxSize()
     ) {
-
-        TabsContainer(favoriteTabs, tabPage)
-
-        Box(
+        TabsContainer(tabs = favoriteTabs, pagerState = favoritesPagerState)
+        AppDivider(thickness = 1.dp, verticalPadding = 0.dp)
+        HorizontalPager(
+            state = favoritesPagerState,
+            pageCount = favoriteTabs.size,
             modifier = Modifier
                 .weight(1f)
                 .fillMaxWidth()
         ) {
-            when (tabPage.value) {
+            when (it) {
                 0 -> FavoriteActorsTabContent(
                     getSelectedActorDetails = selectedActor,
                     favoriteActors = favoriteActors,
@@ -67,7 +71,7 @@ fun FavoritesScreenUI(
 }
 
 @Composable
-fun FeatureComingSoonTextUI() {
+private fun FeatureComingSoonTextUI() {
     Box(
         contentAlignment = Alignment.Center,
         modifier = Modifier.fillMaxSize()
@@ -91,7 +95,8 @@ private fun FavoriteScreenUIPreview() {
             selectedMovie = {},
             removeFavoriteMovie = {},
             selectedActor = {},
-            favoriteActors = emptyList()
-        ) {}
+            favoriteActors = emptyList(),
+            removeFavoriteActor = {}
+        )
     }
 }