feat: Add animation to Navigation

app/build.gradle

@@ -6,13 +6,13 @@ plugins {
 
 android {
     namespace 'app.myzel394.locationtest'
-    compileSdk 33
+    compileSdk 34
 
     defaultConfig {
         multiDexEnabled true
         applicationId "app.myzel394.locationtest"
         minSdk 24
-        targetSdk 33
+        targetSdk 34
         versionCode 1
         versionName "1.0"
 
@@ -69,6 +69,8 @@ dependencies {
     debugImplementation 'androidx.compose.ui:ui-tooling'
     debugImplementation 'androidx.compose.ui:ui-test-manifest'
 
+    implementation "androidx.navigation:navigation-compose:2.7.0-rc01"
+
     implementation 'com.google.dagger:hilt-android:2.46.1'
     annotationProcessor 'com.google.dagger:hilt-compiler:2.46.1'
     implementation "androidx.hilt:hilt-navigation-compose:1.0.0"
@@ -77,7 +79,6 @@ dependencies {
 
     implementation "androidx.datastore:datastore-preferences:1.0.0"
 
-    implementation "androidx.navigation:navigation-compose:2.6.0"
     implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1"
 
     coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.0.3'

app/src/main/java/app/myzel394/locationtest/ui/Navigation.kt

@@ -1,7 +1,15 @@
 package app.myzel394.locationtest.ui
 
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.foundation.background
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -12,6 +20,8 @@ import app.myzel394.locationtest.ui.screens.AudioRecorder
 import app.myzel394.locationtest.ui.screens.SettingsScreen
 import app.myzel394.locationtest.ui.screens.WelcomeScreen
 
+const val SCALE_IN = 1.25f
+
 @Composable
 fun Navigation() {
     val navController = rememberNavController()
@@ -23,16 +33,34 @@ fun Navigation() {
         .value ?: return
 
     NavHost(
+        modifier = Modifier
+            .background(MaterialTheme.colorScheme.background),
         navController = navController,
         startDestination = if (settings.hasSeenOnboarding) Screen.AudioRecorder.route else Screen.Welcome.route,
     ) {
         composable(Screen.Welcome.route) {
             WelcomeScreen(navController = navController)
         }
-        composable(Screen.AudioRecorder.route) {
+        composable(
+            Screen.AudioRecorder.route,
+            enterTransition = {
+                scaleIn(initialScale = SCALE_IN) + fadeIn()
+            },
+            exitTransition = {
+                scaleOut(targetScale = SCALE_IN) + fadeOut()
+            }
+        ) {
             AudioRecorder(navController = navController)
         }
-        composable(Screen.Settings.route) {
+        composable(
+            Screen.Settings.route,
+            enterTransition = {
+                scaleIn(initialScale = 1 / SCALE_IN) + fadeIn()
+            },
+            exitTransition = {
+                scaleOut(targetScale = 1 / SCALE_IN) + fadeOut()
+            }
+        ) {
             SettingsScreen(navController = navController)
         }
     }

app/src/main/java/app/myzel394/locationtest/ui/screens/AudioRecorder.kt

@@ -1,10 +1,5 @@
 package app.myzel394.locationtest.ui.screens
 
-import android.content.ComponentName
-import android.content.Context
-import android.content.Intent
-import android.content.ServiceConnection
-import android.os.IBinder
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -17,11 +12,9 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.navigation.NavController
-import app.myzel394.locationtest.services.RecorderService
 import app.myzel394.locationtest.services.bindToRecorderService
 import app.myzel394.locationtest.ui.components.AudioRecorder.molecules.RecordingStatus
 import app.myzel394.locationtest.ui.components.AudioRecorder.molecules.StartRecording
@@ -33,17 +26,10 @@ import app.myzel394.locationtest.ui.utils.rememberFileSaverDialog
 fun AudioRecorder(
     navController: NavController,
 ) {
-    val context = LocalContext.current
     val saveFile = rememberFileSaverDialog("audio/aac")
     val (connection, service) = bindToRecorderService()
     val isRecording = service?.isRecording?.value ?: false
 
-    LaunchedEffect(Unit) {
-        Intent(context, RecorderService::class.java).also { intent ->
-            context.bindService(intent, connection, Context.BIND_AUTO_CREATE)
-        }
-    }
-
     Scaffold(
         topBar = {
             TopAppBar(
@@ -70,7 +56,7 @@ fun AudioRecorder(
                 .fillMaxSize()
                 .padding(padding),
         ) {
-            if (isRecording && service != null)
+            if (isRecording)
                 RecordingStatus(service = service!!, saveFile = saveFile)
             else
                 StartRecording(connection = connection, service = service)

app/src/main/java/app/myzel394/locationtest/ui/screens/WelcomeScreen.kt

@@ -33,7 +33,11 @@ fun WelcomeScreen(
         .collectAsState(initial = null)
         .value ?: return
     val scope = rememberCoroutineScope()
-    val pagerState = rememberPagerState()
+    val pagerState = rememberPagerState(
+        initialPage = 0,
+        initialPageOffsetFraction = 0f,
+        pageCount = {2}
+    )
 
     Scaffold() {padding ->
         Column(
@@ -42,7 +46,7 @@ fun WelcomeScreen(
                 .padding(padding),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            HorizontalPager(pageCount = 2, state = pagerState) {position ->
+            HorizontalPager(state = pagerState) {position ->
                 when (position) {
                     0 -> ExplanationPage(
                         onContinue = {