영화 상세 화면 gradient 효과 부여

app/src/main/java/com/jik/movie/ui/MovieApp.kt

@@ -1,22 +1,22 @@
 package com.jik.movie.ui
 
+import android.annotation.SuppressLint
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.jik.core.designsystem.component.MovieNavigationBar
 import com.jik.core.designsystem.component.MovieNavigationBarItem
-import com.jik.core.designsystem.component.NavigationBarCornerSize
 import com.jik.core.designsystem.theme.MovieTheme
 import com.jik.movie.navigation.MovieNavHost
 import com.jik.movie.navigation.TopLevelDestination
 
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun MovieApp() {
     MovieTheme {
@@ -34,13 +34,9 @@ fun MovieApp() {
             },
             contentWindowInsets = WindowInsets(0.dp)
         ) {
-            val bottomPadding = it.calculateBottomPadding()
-
             MovieNavHost(
                 navController = appState.navController,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(bottom = if (bottomPadding > 0.dp) bottomPadding - NavigationBarCornerSize else bottomPadding)
+                modifier = Modifier.fillMaxSize()
             )
         }
     }

core/designsystem/src/main/java/com/jik/core/designsystem/component/TopAppBar.kt

@@ -1,9 +1,18 @@
 package com.jik.core.designsystem.component
 
 import androidx.annotation.StringRes
-import androidx.compose.material3.*
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
@@ -26,6 +35,7 @@ fun MovieTopAppBar(
     titleStyle: TextStyle = MaterialTheme.typography.titleLarge,
     titleWeight: FontWeight = FontWeight.Bold,
     canNavigateBack: Boolean = false,
+    backIconTint: Color = MaterialTheme.colorScheme.onBackground,
     navigateBack: () -> Unit = {}
 ) {
     TopAppBar(
@@ -47,7 +57,7 @@ fun MovieTopAppBar(
                     Icon(
                         imageVector = ArrowBackRounded,
                         contentDescription = "Back",
-                        tint = MaterialTheme.colorScheme.onBackground
+                        tint = backIconTint
                     )
                 }
             }

core/ui/build.gradle.kts

@@ -58,6 +58,9 @@ dependencies {
     // coil
     implementation(libs.compose.coil)
 
+    // palette
+    implementation(libs.palette)
+
     // test
     testImplementation(libs.junit)
     testImplementation(libs.coroutines.test)

core/ui/src/main/java/com/jik/core/ui/palette/Palette.kt

@@ -0,0 +1,39 @@
+package com.jik.core.ui.palette
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import androidx.core.graphics.drawable.toBitmap
+import androidx.palette.graphics.Palette
+import coil.compose.AsyncImagePainter
+import coil.compose.rememberAsyncImagePainter
+import coil.request.ImageRequest
+import coil.size.Size
+
+
+@Composable
+fun ExtractRepresentativeColor(imageUrl: String, onColorExtracted: (Color) -> Unit) {
+    val painter = rememberAsyncImagePainter(
+        model = ImageRequest.Builder(LocalContext.current)
+            .data(imageUrl)
+            .size(Size.ORIGINAL)
+            .allowHardware(false)
+            .build()
+    )
+    val painterState = painter.state
+    val defaultColor = Color.Transparent.toArgb()
+    if (painterState is AsyncImagePainter.State.Success) {
+        val bitmap = painterState.result.drawable.toBitmap()
+        Palette.from(bitmap).generate { palette ->
+            palette?.let {
+                val vibrantColor = it.getVibrantColor(defaultColor)
+                if (vibrantColor != defaultColor) {
+                    onColorExtracted(Color(vibrantColor))
+                } else {
+                    onColorExtracted(Color(it.getDominantColor(defaultColor)))
+                }
+            }
+        }
+    }
+}

feature/detail/src/main/java/com/jik/feature/detail/DetailScreen.kt

@@ -1,5 +1,7 @@
 package com.jik.feature.detail
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -8,8 +10,14 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 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.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.Lifecycle
@@ -18,6 +26,7 @@ import com.jik.core.designsystem.component.LoadingWheel
 import com.jik.core.designsystem.component.PosterCard
 import com.jik.core.designsystem.component.Refresh
 import com.jik.core.model.MovieInfo
+import com.jik.core.ui.palette.ExtractRepresentativeColor
 import com.jik.core.ui.state.UiState
 import com.jik.feature.detail.component.DetailMovieInfo
 import com.jik.feature.detail.component.TopBar
@@ -33,6 +42,7 @@ fun DetailScreen(
     val detailUiState = viewModel.detailUiState.collectAsStateWithLifecycle(
         minActiveState = Lifecycle.State.CREATED
     ).value
+    val isDarkMode = isSystemInDarkTheme()
 
     when (detailUiState) {
         is UiState.Loading -> {
@@ -45,12 +55,25 @@ fun DetailScreen(
         }
 
         is UiState.Success -> {
-            Column(modifier = modifier) {
+            val movieInfo = detailUiState.data
+            var backgroundColor by remember { mutableStateOf(Color.Transparent) }
+            val colorStops = arrayOf(
+                0.0f to backgroundColor.copy(alpha = if (isDarkMode) 1f else 0.6f),
+                0.6f to Color.Transparent
+            )
+
+            ExtractRepresentativeColor(imageUrl = movieInfo.getBackdropUrl()) {
+                backgroundColor = it
+            }
+
+            Column(
+                modifier = modifier.background(brush = Brush.verticalGradient(colorStops = colorStops))
+            ) {
                 TopBar(
                     modifier = Modifier.fillMaxWidth(),
                     navigateUp = navigateUp
                 )
-                Content(movieInfo = detailUiState.data)
+                Content(movieInfo = movieInfo)
             }
         }
 

feature/detail/src/main/java/com/jik/feature/detail/component/DetailMovieInfo.kt

@@ -12,16 +12,15 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Divider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -77,18 +76,18 @@ private fun ReleaseDateAndRating(
 ) {
     Row(
         modifier = modifier.height(IntrinsicSize.Min),
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        verticalAlignment = Alignment.CenterVertically
     ) {
         Text(
             text = movieInfo.getReleaseDateString(),
             color = MaterialTheme.colorScheme.secondary,
             style = MaterialTheme.typography.labelMedium
         )
 
-        Divider(
-            modifier = Modifier
-                .fillMaxHeight()
-                .width(1.dp),
+        VerticalDivider(
+            modifier = Modifier.fillMaxHeight(),
+            thickness = 1.dp,
             color = MaterialTheme.colorScheme.secondary
         )
 

feature/detail/src/main/java/com/jik/feature/detail/component/DetailMovieInfoCast.kt

@@ -80,6 +80,7 @@ private fun CastItem(
         Text(
             text = castItem.character,
             style = MaterialTheme.typography.labelSmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
             textAlign = TextAlign.Center,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis

feature/detail/src/main/java/com/jik/feature/detail/component/DetailTopBar.kt

@@ -1,8 +1,10 @@
 package com.jik.feature.detail.component
 
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import com.jik.core.designsystem.component.MovieTopAppBar
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -14,6 +16,7 @@ internal fun TopBar(
     MovieTopAppBar(
         titleRes = null,
         modifier = modifier,
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
         canNavigateBack = true,
         navigateBack = navigateUp
     )

feature/detail/src/main/java/com/jik/feature/detail/navigation/DetailNavigation.kt

@@ -3,6 +3,7 @@ package com.jik.feature.detail.navigation
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.lifecycle.SavedStateHandle
@@ -43,7 +44,9 @@ object DetailNavigation {
         ) {
             StatusBarColor(color = Color.Transparent)
             DetailScreen(
-                modifier = Modifier.fillMaxSize(),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .navigationBarsPadding(),
                 navigateUp = navigateUp
             )
         }

feature/home/src/main/java/com/jik/feature/home/navigation/HomeNavigation.kt

@@ -1,6 +1,5 @@
 package com.jik.feature.home.navigation
 
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.ui.graphics.Color
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
@@ -17,7 +16,6 @@ object HomeNavigation {
         navigate(route, navOptions)
     }
 
-    @OptIn(ExperimentalAnimationApi::class)
     fun NavGraphBuilder.installHomeScreen(
         onPosterClick: (Long) -> Unit
     ) {

gradle/libs.versions.toml

@@ -24,6 +24,7 @@ ksp = "1.8.10-1.0.9"
 splashscreen = "1.0.1"
 media3 = "1.4.0"
 chaquopy = "15.0.1"
+palette = "1.0.0"
 
 androidGradlePlugin = "8.1.4"
 
@@ -92,6 +93,9 @@ splashscreen = { group = "androidx.core", name = "core-splashscreen", version.re
 media3-exoplayer = { group = "androidx.media3", name = "media3-exoplayer", version.ref = "media3" }
 media3-ui = { group = "androidx.media3", name = "media3-ui", version.ref = "media3" }
 
+# Palette
+palette = { group = "androidx.palette", name = "palette", version.ref = "palette" }
+
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
 android-library = { id = "com.android.library", version.ref = "androidGradlePlugin" }