Skip to content

Commit

Permalink
added shimmer effect and new theme
Browse files Browse the repository at this point in the history
  • Loading branch information
pramodbharti committed Oct 28, 2023
1 parent 85e951a commit c5da0c3
Show file tree
Hide file tree
Showing 16 changed files with 457 additions and 179 deletions.
14 changes: 8 additions & 6 deletions app/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,22 @@ dependencies {
implementation(libs.ui.tooling.preview)
implementation(libs.material3)
//
implementation(libs.viewmodel.compose)
implementation(libs.lifecycle.viewmodel.compose)
implementation(libs.lifecycle.runtime.compose)
implementation(libs.lifecycle.viewmodel.ktx)
implementation(libs.compose.ui.util)
implementation(libs.compose.navigation)
implementation(libs.navigation.compose)
//retrofit
implementation(libs.retrofit)
//okhttp
implementation(platform(libs.okhttp.bom))
implementation(libs.okhttp)
implementation(libs.okhttp.interceptor)
implementation(libs.logging.interceptor)
//kotlin serialization
implementation(libs.kotlin.serialization)
implementation(libs.kotlin.serialization.converter)
implementation(libs.kotlinx.serialization.json)
implementation(libs.retrofit2.kotlinx.serialization.converter)
//coil
implementation(libs.coil)
implementation(libs.coil.compose)
implementation(project(mapOf("path" to ":karousel")))

//testing libraries
Expand Down
12 changes: 11 additions & 1 deletion app/src/main/java/com/pramodbharti/filmo/MainActivity.kt
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,13 @@ import androidx.activity.compose.setContent
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.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.pramodbharti.filmo.ui.components.LandingScreen
import com.pramodbharti.filmo.ui.theme.FilmoTheme

class MainActivity : ComponentActivity() {
Expand All @@ -18,7 +23,12 @@ class MainActivity : ComponentActivity() {
FilmoTheme {
// A surface container using the 'background' color from the theme
Surface(tonalElevation = 5.dp) {
FilmoApp()
var showLandingScreen by remember { mutableStateOf(true) }
if (showLandingScreen) {
LandingScreen(onTimeOut = { showLandingScreen = false })
} else {
FilmoApp()
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions app/src/main/java/com/pramodbharti/filmo/ui/Constants.kt
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ object Constants {
const val IMAGE_URL_ORIGINAL = "https://image.tmdb.org/t/p/original"
const val IMAGE_URL_500 = "https://image.tmdb.org/t/p/w500"
const val IMAGE_URL_300 = "https://image.tmdb.org/t/p/w300"
const val ANIM_TIME_MEDIUM: Int = 500
}
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
package com.pramodbharti.filmo.ui.components

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.KeyboardArrowLeft
import androidx.compose.material3.CenterAlignedTopAppBar
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.runtime.Composable
import androidx.compose.ui.Modifier
Expand All @@ -19,21 +18,21 @@ import androidx.compose.ui.tooling.preview.Preview
@Composable
fun FilmoAppBar(
title: String,
canNavigateBack: Boolean,
canNavigateBack: Boolean = true,
modifier: Modifier = Modifier,
onBackPressed: () -> Unit = {}
) {
TopAppBar(
title = {
Text(text = title)
Text(text = title, style = MaterialTheme.typography.titleLarge)
},
colors = TopAppBarDefaults.mediumTopAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer
containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.9f)
), navigationIcon = {
if (canNavigateBack) {
IconButton(onClick = onBackPressed) {
Icon(
Icons.Filled.KeyboardArrowLeft,
imageVector = Icons.Filled.KeyboardArrowLeft,
contentDescription = "Back"
)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
package com.pramodbharti.filmo.ui.components

import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
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.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
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.size
import androidx.compose.foundation.lazy.LazyRow
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.rememberUpdatedState
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
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 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()
}
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()
)
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()
)
}
}
}
}

@Composable
fun CarouselShimmer(modifier: Modifier = Modifier) {
Box(
modifier = modifier
.fillMaxWidth()
.height(130.dp)
.shimmerEffect()
)
}

@Composable
fun PosterShimmer(modifier: Modifier = Modifier) {
Box(
modifier = modifier
.size(150.dp, 230.dp)
.shimmerEffect()
)
}

fun Modifier.shimmerEffect(): Modifier = composed {
var size by remember {
mutableStateOf(IntSize.Zero)
}
val transition = rememberInfiniteTransition()
val startOffsetX by transition.animateFloat(
initialValue = -2 * size.width.toFloat(),
targetValue = 2 * size.width.toFloat(),
animationSpec = infiniteRepeatable(animation = tween(durationMillis = 1000)),
label = "shimmer effect"
)
background(
brush = Brush.linearGradient(
colors = listOf(
Color(0xCED6D6D6),
Color(0xCEA09A9A),
Color(0xCED6D6D6)

),
start = Offset(startOffsetX, 0f),
end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
)
).onGloballyPositioned {
size = it.size
}
}

@Preview(showSystemUi = true)
@Composable
fun LandingScreenPreview() {
LandingScreen({})
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
package com.pramodbharti.filmo.ui.navigation

enum class BottomNaviagtionType {
Movies,TvShows,Favs
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,44 @@
package com.pramodbharti.filmo.ui.navigation

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.Send
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource

val list = listOf(Movies,TvShows,Favs)
val list = listOf(Movies, TvShows, Favs)

@Composable
fun FilmoBottomNavigation(
currentTab: BottomNaviagtionType,
onTabPressed: ((BottomNaviagtionType) -> Unit),
navigationItemContentList: List<NavigationItemContent>,
modifier: Modifier = Modifier
) {
NavigationBar(modifier = modifier) {
for (navItem in navigationItemContentList) {
NavigationBarItem(
selected = currentTab == navItem.navType,
onClick = { onTabPressed(navItem.navType) },
icon = {
Icon(
imageVector = navItem.icon,
contentDescription = navItem.text
)
})
}
}
}


data class NavigationItemContent(
val navType: BottomNaviagtionType,
val icon: ImageVector,
val text: String
)
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
package com.pramodbharti.filmo.ui.navigation

import android.util.Log
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.pramodbharti.filmo.ui.Constants
import com.pramodbharti.filmo.ui.screens.details.DetailsScreen
import com.pramodbharti.filmo.ui.screens.favs.FavItemsScreen
import com.pramodbharti.filmo.ui.screens.movies.MoviesScreen
Expand Down
Loading

0 comments on commit c5da0c3

Please sign in to comment.