Dev

.gitignore

@@ -12,5 +12,4 @@
 /captures
 .externalNativeBuild
 .cxx
-local.properties
-gradle.properties
+local.properties

app/build.gradle.kts

@@ -65,7 +65,7 @@ dependencies {
 
 
     /*Accompanist*/
-    val accompanistVersion = "0.24.1-alpha"
+    val accompanistVersion = "0.24.2-alpha"
     implementation("com.google.accompanist:accompanist-pager:$accompanistVersion")
     implementation("com.google.accompanist:accompanist-placeholder:$accompanistVersion")
     implementation("com.google.accompanist:accompanist-appcompat-theme:$accompanistVersion")
@@ -110,7 +110,8 @@ dependencies {
 
     implementation("androidx.core:core-ktx:1.7.0")
     implementation("androidx.appcompat:appcompat:1.4.1")
-    implementation("com.google.android.material:material:1.5.0")
+    implementation("com.google.android.material:material:1.6.0-alpha02")
+    implementation("androidx.compose.material3:material3:1.0.0-alpha05")
     implementation("androidx.compose.ui:ui:$composeVersion")
     implementation("androidx.compose.material:material:$composeVersion")
     implementation("androidx.compose.ui:ui-tooling-preview:$composeVersion")

app/src/main/java/st/slex/csplashscreen/di/module/UseCaseModule.kt

@@ -2,6 +2,7 @@ package st.slex.csplashscreen.di.module
 
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.paging.PagingSource
 import com.google.accompanist.pager.ExperimentalPagerApi
 import dagger.Binds
@@ -29,6 +30,7 @@ interface UseCaseModule {
     @Binds
     fun bindsTopicsPagingSource(source: TopicsPagingSource): PagingSource<Int, TopicsModel>
 
+    @ExperimentalMaterial3Api
     @FlowPreview
     @ExperimentalCoroutinesApi
     @ExperimentalPagerApi

app/src/main/java/st/slex/csplashscreen/ui/BottomAppBarNavigation.kt

@@ -0,0 +1,57 @@
+package st.slex.csplashscreen.ui
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+private val listOfItems: List<BottomAppBarResource> = listOf(
+    BottomAppBarResource.TopicsScreen,
+    BottomAppBarResource.MainScreen,
+    BottomAppBarResource.SearchScreen
+)
+
+@Composable
+fun mainBottomAppBar(navController: NavController): @Composable () -> Unit = {
+    val selectedItem = remember {
+        mutableStateOf(BottomAppBarResource.MainScreen.destination)
+    }
+    NavigationBar(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        listOfItems.forEach { item ->
+            NavigationBarItem(
+                selected = selectedItem.value == item.destination,
+                onClick = onBottomAppBarClick(navController, item, selectedItem),
+                icon = { Icon(item.icon, item.destination) },
+                label = { Text(text = item.destination) },
+                alwaysShowLabel = false
+            )
+        }
+    }
+}
+
+private fun onBottomAppBarClick(
+    navController: NavController,
+    item: BottomAppBarResource,
+    selectedItem: MutableState<String>
+): () -> Unit = {
+    selectedItem.value = item.destination
+    navController.navigate(item.route) {
+        navController.graph.startDestinationRoute?.let { route ->
+            popUpTo(route) {
+                inclusive = true
+                saveState = true
+            }
+        }
+        launchSingleTop = true
+        restoreState = false
+    }
+}

app/src/main/java/st/slex/csplashscreen/ui/BottomAppBarResource.kt

@@ -0,0 +1,33 @@
+package st.slex.csplashscreen.ui
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Search
+import androidx.compose.material.icons.outlined.Star
+import androidx.compose.ui.graphics.vector.ImageVector
+import st.slex.csplashscreen.ui.navigation.NavHostResource
+
+
+sealed interface BottomAppBarResource {
+
+    val destination: String
+    val icon: ImageVector
+    val route: String
+        get() = destination
+
+    object MainScreen : BottomAppBarResource {
+        override val destination: String = NavHostResource.MainScreen.destination
+        override val icon: ImageVector = Icons.Outlined.Home
+    }
+
+    object TopicsScreen : BottomAppBarResource {
+        override val destination: String = NavHostResource.TopicsScreen.destination
+        override val icon: ImageVector = Icons.Outlined.Star
+    }
+
+    object SearchScreen : BottomAppBarResource {
+        override val destination: String = NavHostResource.SearchPhotosScreen.destination
+        override val icon: ImageVector = Icons.Outlined.Search
+        override val route: String = "$destination/ "
+    }
+}

app/src/main/java/st/slex/csplashscreen/ui/MainActivity.kt

@@ -4,26 +4,14 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.animation.ExperimentalAnimationApi
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Star
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.navigation.NavController
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Scaffold
 import androidx.navigation.compose.rememberNavController
 import com.google.accompanist.insets.ProvideWindowInsets
 import com.google.accompanist.pager.ExperimentalPagerApi
-import dagger.Lazy
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.FlowPreview
-import st.slex.csplashscreen.ui.navigation.NavHostResource
 import st.slex.csplashscreen.ui.navigation.NavigationHost
 import st.slex.csplashscreen.ui.theme.CSplashScreenTheme
 import javax.inject.Inject
@@ -36,8 +24,12 @@ import javax.inject.Inject
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
 
+    private lateinit var navigationHost: NavigationHost
+
     @Inject
-    lateinit var navigationHost: Lazy<NavigationHost>
+    fun injection(navigationHost: NavigationHost) {
+        this.navigationHost = navigationHost
+    }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -46,75 +38,12 @@ class MainActivity : ComponentActivity() {
             ProvideWindowInsets {
                 CSplashScreenTheme {
                     Scaffold(
-                        bottomBar = { MainBottomAppBar(navController = navController) }
-                    ) {
-                        navigationHost.get().CreateNavigationHost(navController = navController)
-                    }
-                }
-            }
-        }
-    }
-
-    @Composable
-    private fun MainBottomAppBar(navController: NavController) {
-        val listOfItems: List<BottomAppBarResource> = listOf(
-            BottomAppBarResource.TopicsScreen,
-            BottomAppBarResource.MainScreen,
-            BottomAppBarResource.SearchScreen
-        )
-        BottomAppBar(modifier = Modifier.fillMaxWidth()) {
-            val selectedItem =
-                remember { mutableStateOf(BottomAppBarResource.MainScreen.destination) }
-            BottomNavigation {
-                listOfItems.forEach {
-                    BottomNavigationItem(
-                        icon = {
-                            Icon(it.icon, it.destination)
-                        },
-                        label = { Text(text = it.destination) },
-                        selected = selectedItem.value == it.destination,
-                        onClick = {
-                            selectedItem.value = it.destination
-                            navController.navigate(it.route) {
-                                navController.graph.startDestinationRoute?.let { route ->
-                                    popUpTo(route) {
-                                        inclusive = true
-                                        saveState = true
-                                    }
-                                }
-                                launchSingleTop = true
-                                restoreState = true
-                            }
-                        },
-                        alwaysShowLabel = false
+                        bottomBar = mainBottomAppBar(navController = navController),
+                        content = navigationHost.createNavigationHost(navController)
                     )
                 }
             }
         }
     }
-
-    private sealed interface BottomAppBarResource {
-
-        val destination: String
-        val icon: ImageVector
-        val route: String
-            get() = destination
-
-        object MainScreen : BottomAppBarResource {
-            override val destination: String = NavHostResource.MainScreen.destination
-            override val icon: ImageVector = Icons.Filled.Home
-        }
-
-        object TopicsScreen : BottomAppBarResource {
-            override val destination: String = NavHostResource.TopicsScreen.destination
-            override val icon: ImageVector = Icons.Filled.Star
-        }
-
-        object SearchScreen : BottomAppBarResource {
-            override val destination: String = NavHostResource.SearchPhotosScreen.destination
-            override val icon: ImageVector = Icons.Filled.Search
-            override val route: String = "$destination/ "
-        }
-    }
 }
 

app/src/main/java/st/slex/csplashscreen/ui/components/AnimationsFuns.kt

@@ -0,0 +1,58 @@
+package st.slex.csplashscreen.ui.components
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.PagerScope
+import com.google.accompanist.pager.calculateCurrentOffsetForPage
+import com.google.android.material.animation.AnimationUtils
+import kotlin.math.absoluteValue
+
+@ExperimentalPagerApi
+@SuppressLint("RestrictedApi")
+fun Modifier.animatePager(
+    scope: PagerScope,
+    page: Int,
+    lazyListState: LazyListState,
+    id: String
+): Modifier = animatePager(scope, page).setScrollingColumnAnimation(lazyListState, id)
+
+@SuppressLint("RestrictedApi")
+@ExperimentalPagerApi
+fun Modifier.animatePager(scope: PagerScope, page: Int): Modifier = this.graphicsLayer {
+    val pageOffset = scope.calculateCurrentOffsetForPage(page).absoluteValue
+    AnimationUtils.lerp(
+        0.85f,
+        1f,
+        1f - pageOffset.coerceIn(0f, 1f)
+    ).also { scale ->
+        scaleX = scale
+        scaleY = scale
+    }
+    alpha = AnimationUtils.lerp(
+        0.5f,
+        1f,
+        1f - pageOffset.coerceIn(0f, 1f)
+    )
+}
+
+fun LazyListState.normalizedPosition(key: String?): Float = with(layoutInfo) {
+    visibleItemsInfo.firstOrNull {
+        it.key == key
+    }?.let {
+        val center = (viewportEndOffset + viewportStartOffset - it.size) / 2F
+        (it.offset.toFloat() - center) / center
+    } ?: 0F
+}
+
+fun Modifier.setScrollingColumnAnimation(
+    lazyListState: LazyListState,
+    id: String?
+): Modifier = graphicsLayer {
+    val value = 1 - (lazyListState.normalizedPosition(id).absoluteValue * 0.05f)
+    alpha = value
+    scaleX = value
+    scaleY = value
+}