theme improvements and refactor

pramodbharti · Oct 28, 2023 · 5a4a5cb · 5a4a5cb
1 parent 305f98d
commit 5a4a5cb
Show file tree

Hide file tree

Showing 16 changed files with 268 additions and 127 deletions.
diff --git a/app/src/main/java/com/pramodbharti/filmo/MainActivity.kt b/app/src/main/java/com/pramodbharti/filmo/MainActivity.kt
@@ -3,16 +3,20 @@ package com.pramodbharti.filmo
 import FilmoApp
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.core.view.WindowCompat
 import com.pramodbharti.filmo.ui.components.LandingScreen
 import com.pramodbharti.filmo.ui.theme.FilmoTheme
 
@@ -22,8 +26,8 @@ class MainActivity : ComponentActivity() {
         setContent {
             FilmoTheme {
                 // A surface container using the 'background' color from the theme
-                Surface(tonalElevation = 5.dp) {
-                    var showLandingScreen by remember { mutableStateOf(true) }
+                Surface {
+                    var showLandingScreen by rememberSaveable { mutableStateOf(true) }
                     if (showLandingScreen) {
                         LandingScreen(onTimeOut = { showLandingScreen = false })
                     } else {

diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/components/CastItemsRow.kt b/app/src/main/java/com/pramodbharti/filmo/ui/components/CastItemsRow.kt
@@ -1,5 +1,6 @@
 package com.pramodbharti.filmo.ui.components
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -14,15 +15,18 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import coil.size.Scale
 import com.pramodbharti.filmo.R
+import com.pramodbharti.filmo.dummydata.dummyCastData
 import com.pramodbharti.filmo.ui.Constants
 import com.pramodbharti.filmo.ui.models.Cast
 
@@ -51,18 +55,25 @@ fun CastItem(cast: Cast, modifier: Modifier = Modifier) {
                 .data("${Constants.IMAGE_URL_500}${cast.photo}")
                 .crossfade(true)
                 .build(),
-            placeholder = painterResource(id = R.drawable.placeholder),
-            error = painterResource(id = R.drawable.placeholder),
+            placeholder = painterResource(id = R.drawable.ic_launcher_foreground),
+            error = painterResource(id = R.drawable.ic_launcher_foreground),
             contentScale = ContentScale.Crop,
             contentDescription = cast.name,
             modifier = Modifier
-                .clip(CircleShape)
                 .height(80.dp)
+                .clip(CircleShape)
+                .border(width = 1.dp, color = Color.Gray, shape = CircleShape)
         )
         Text(
             text = cast.name,
             style = MaterialTheme.typography.bodySmall,
             textAlign = TextAlign.Center
         )
     }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CastItemRowPreview() {
+    CastItemsRow(casts = dummyCastData)
 }
diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/components/FilmoAppBars.kt b/app/src/main/java/com/pramodbharti/filmo/ui/components/FilmoAppBars.kt
@@ -1,5 +1,8 @@
 package com.pramodbharti.filmo.ui.components
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowLeft
 import androidx.compose.material3.CenterAlignedTopAppBar
@@ -10,25 +13,43 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.pramodbharti.filmo.R
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FilmoAppBar(
     title: String,
     canNavigateBack: Boolean = true,
     modifier: Modifier = Modifier,
-    onBackPressed: () -> Unit = {}
+    onBackPressed: () -> Unit = {},
+    scrollBehavior: TopAppBarScrollBehavior
 ) {
     TopAppBar(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         title = {
-            Text(text = title, style = MaterialTheme.typography.titleLarge)
+            if (canNavigateBack)
+                Text(text = title, style = MaterialTheme.typography.titleLarge)
+            else {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(
+                        imageVector = ImageVector.vectorResource(R.drawable.ic_launcher_foreground),
+                        contentDescription = null,
+                        modifier = Modifier.size(48.dp)
+                    )
+                    Text(text = "Filmo")
+                }
+            }
         },
-        colors = TopAppBarDefaults.mediumTopAppBarColors(
-            containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.9f)
-        ), navigationIcon = {
+        navigationIcon = {
             if (canNavigateBack) {
                 IconButton(onClick = onBackPressed) {
                     Icon(
@@ -38,7 +59,7 @@ fun FilmoAppBar(
                 }
             }
         },
-        modifier = modifier
+        scrollBehavior = scrollBehavior
     )
 }
 

diff --git a/app/src/main/java/com/pramodbharti/filmo/ui/components/LandingScreen.kt b/app/src/main/java/com/pramodbharti/filmo/ui/components/LandingScreen.kt
@@ -1,5 +1,7 @@
 package com.pramodbharti.filmo.ui.components
 
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
@@ -17,6 +19,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -27,104 +32,52 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import com.pramodbharti.filmo.R
+import com.pramodbharti.filmo.ui.theme.FilmoTheme
 import kotlinx.coroutines.delay
 
 private const val SplashWaitTime: Long = 2000
 
 @Composable
 fun LandingScreen(onTimeOut: () -> Unit, modifier: Modifier = Modifier) {
-    Box(
-        modifier = modifier
-            .fillMaxSize()
-            .background(Color(0xFF26282F))
-    ) {
-        val currentOnTimeout by rememberUpdatedState(onTimeOut)
-        LaunchedEffect(Unit) {
-            delay(SplashWaitTime)
-            currentOnTimeout()
+    Surface {
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+        ) {
+            val currentOnTimeout by rememberUpdatedState(onTimeOut)
+            LaunchedEffect(Unit) {
+                delay(SplashWaitTime)
+                currentOnTimeout()
+            }
+            Image(
+                painter = painterResource(id = R.drawable.ic_launcher_foreground),
+                contentDescription = null,
+                modifier = Modifier.align(Alignment.Center)
+            )
         }
-        Image(
-            painter = painterResource(id = R.drawable.ic_launcher_foreground),
-            contentDescription = null,
-            modifier = Modifier.align(Alignment.Center)
-        )
     }
 }
 
 @Composable
 fun ShimmerLoadingScreen(modifier: Modifier = Modifier) {
-    Column() {
-        Box(
-            modifier = modifier
-                .fillMaxWidth()
-                .height(130.dp)
-                .shimmerEffect()
-        )
+    Column {
+        CarouselShimmer()
         Spacer(modifier = Modifier.height(8.dp))
-        LazyRow(
-            modifier = modifier,
-            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            items(7) {
-                Box(
-                    modifier = modifier
-                        .size(150.dp, 230.dp)
-                        .shimmerEffect()
-                )
-            }
-        }
-
-        LazyRow(
-            modifier = modifier,
-            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            items(7) {
-                Box(
-                    modifier = modifier
-                        .size(150.dp, 230.dp)
-                        .shimmerEffect()
-                )
-            }
-        }
-
-        LazyRow(
-            modifier = modifier,
-            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            items(7) {
-                Box(
-                    modifier = modifier
-                        .size(150.dp, 230.dp)
-                        .shimmerEffect()
-                )
-            }
-        }
-
-        LazyRow(
-            modifier = modifier,
-            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            items(7) {
-                Box(
-                    modifier = modifier
-                        .size(150.dp, 230.dp)
-                        .shimmerEffect()
-                )
-            }
-        }
+        PosterRowShimmer()
+        PosterRowShimmer()
+        PosterRowShimmer()
+        PosterRowShimmer()
     }
 }
 
@@ -139,19 +92,28 @@ fun CarouselShimmer(modifier: Modifier = Modifier) {
 }
 
 @Composable
-fun PosterShimmer(modifier: Modifier = Modifier) {
-    Box(
-        modifier = modifier
-            .size(150.dp, 230.dp)
-            .shimmerEffect()
-    )
+fun PosterRowShimmer(modifier: Modifier = Modifier) {
+    LazyRow(
+        modifier = modifier,
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        items(7) {
+            Box(
+                modifier = modifier
+                    .size(150.dp, 230.dp)
+                    .clip(RoundedCornerShape(16.dp))
+                    .shimmerEffect()
+            )
+        }
+    }
 }
 
 fun Modifier.shimmerEffect(): Modifier = composed {
     var size by remember {
         mutableStateOf(IntSize.Zero)
     }
-    val transition = rememberInfiniteTransition()
+    val transition = rememberInfiniteTransition(label = "")
     val startOffsetX by transition.animateFloat(
         initialValue = -2 * size.width.toFloat(),
         targetValue = 2 * size.width.toFloat(),
@@ -174,8 +136,24 @@ fun Modifier.shimmerEffect(): Modifier = composed {
     }
 }
 
-@Preview(showSystemUi = true)
+@Preview(showBackground = true, showSystemUi = true, uiMode = UI_MODE_NIGHT_YES, name = "Dark")
+@Preview(showBackground = true, showSystemUi = true, uiMode = UI_MODE_NIGHT_NO, name = "Light")
+@Composable
+fun ShimmerLoadingPreview() {
+    FilmoTheme {
+        Surface {
+            ShimmerLoadingScreen()
+        }
+    }
+}
+
+@Preview(showBackground = true, showSystemUi = true, uiMode = UI_MODE_NIGHT_YES, name = "Dark")
+@Preview(showBackground = true, showSystemUi = true, uiMode = UI_MODE_NIGHT_NO, name = "Light")
 @Composable
 fun LandingScreenPreview() {
-    LandingScreen({})
+    FilmoTheme {
+        Surface {
+            LandingScreen({})
+        }
+    }
 }