[1/3] Onboarding animation

app/build.gradle.kts

@@ -102,6 +102,7 @@ dependencies {
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.runtime.android)
+    implementation("org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.8")
     testImplementation(libs.junit)
     testImplementation("com.squareup.okhttp3:mockwebserver:4.12.0")
     debugImplementation("androidx.compose.ui:ui-tooling")

app/src/main/java/com/cornellappdev/score/MainActivity.kt

@@ -4,22 +4,56 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
+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 com.cornellappdev.score.nav.root.RootNavigation
+import com.cornellappdev.score.model.OnboardingPreferencesRepository
+import com.cornellappdev.score.screen.OnboardingScreen
 import com.google.firebase.Firebase
 import com.google.firebase.analytics.FirebaseAnalytics
 import com.google.firebase.analytics.analytics
 import dagger.hilt.android.AndroidEntryPoint
+import javax.inject.Inject
 
 private lateinit var firebaseAnalytics: FirebaseAnalytics
 
 @AndroidEntryPoint
 class MainActivity : AppCompatActivity() {
+    @Inject
+    lateinit var onboardingPreferencesRepository: OnboardingPreferencesRepository
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
+
+        val onboardingCompleted = onboardingPreferencesRepository.isOnboardingCompleted()
+
         setContent {
-            RootNavigation()
+            var showOnboarding by rememberSaveable {
+                mutableStateOf(!onboardingCompleted)
+            }
+
+            val completeOnboarding = remember {
+                {
+                    onboardingPreferencesRepository.markOnboardingCompleted()
+                    showOnboarding = false
+                }
+            }
+
+            if (showOnboarding) {
+                OnboardingScreen(
+                    onSignUp = completeOnboarding,
+                    onLogIn = completeOnboarding,
+                    onLater = completeOnboarding
+                )
+            } else {
+                RootNavigation()
+            }
         }
+
         firebaseAnalytics = Firebase.analytics
     }
 }

app/src/main/java/com/cornellappdev/score/components/OnboardingButtons.kt

@@ -0,0 +1,215 @@
+package com.cornellappdev.score.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.slideInVertically
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+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.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.theme.CrimsonPrimary
+import com.cornellappdev.score.theme.Style.heading3
+import com.cornellappdev.score.theme.Style.labelsNormal
+import com.cornellappdev.score.theme.White
+import kotlinx.coroutines.delay
+import kotlin.time.Duration.Companion.milliseconds
+
+@Composable
+fun OnboardingButtons(
+    onSignUp: () -> Unit,
+    onLogIn: () -> Unit,
+    onLater: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    var showSignUp by remember { mutableStateOf(false) }
+    var showLogIn by remember { mutableStateOf(false) }
+    var showLater by remember { mutableStateOf(false) }
+
+    LaunchedEffect(Unit) {
+        showSignUp = true
+        delay(160.milliseconds)
+        showLogIn = true
+        delay(180.milliseconds)
+        showLater = true
+    }
+
+    OnboardingButtonsContent(
+        onSignUp = onSignUp,
+        onLogIn = onLogIn,
+        onLater = onLater,
+        showSignUp = showSignUp,
+        showLogIn = showLogIn,
+        showLater = showLater,
+        animateEntrance = true,
+        modifier = modifier
+    )
+}
+
+@Composable
+private fun OnboardingButtonsContent(
+    onSignUp: () -> Unit,
+    onLogIn: () -> Unit,
+    onLater: () -> Unit,
+    showSignUp: Boolean,
+    showLogIn: Boolean,
+    showLater: Boolean,
+    animateEntrance: Boolean,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        OnboardingButtonSlot(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(50.dp),
+            visible = showSignUp,
+            animateEntrance = animateEntrance,
+            initialOffset = 26.dp,
+            durationMillis = 340
+        ) {
+            Button(
+                onClick = onSignUp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(48.dp),
+                shape = RoundedCornerShape(100),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Color.White,
+                    contentColor = CrimsonPrimary
+                )
+            ) {
+                Text(
+                    text = "Sign Up",
+                    style = heading3,
+                    color = CrimsonPrimary
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        OnboardingButtonSlot(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(48.dp),
+            visible = showLogIn,
+            animateEntrance = animateEntrance,
+            initialOffset = 24.dp,
+            durationMillis = 340
+        ) {
+            OutlinedButton(
+                onClick = onLogIn,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(48.dp),
+                shape = RoundedCornerShape(100),
+                border = BorderStroke(
+                    width = 1.dp,
+                    color = Color.White.copy(alpha = 0.9f)
+                ),
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = Color.White
+                )
+            ) {
+                Text(
+                    text = "Log In",
+                    style = heading3,
+                    color = White
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        OnboardingButtonSlot(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(40.dp),
+            visible = showLater,
+            animateEntrance = animateEntrance,
+            initialOffset = 18.dp,
+            durationMillis = 320
+        ) {
+            TextButton(
+                onClick = onLater,
+                colors = ButtonDefaults.textButtonColors(contentColor = Color.White)
+            ) {
+                Text(
+                    text = "Sign Up Later",
+                    style = labelsNormal
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun OnboardingButtonSlot(
+    visible: Boolean,
+    animateEntrance: Boolean,
+    initialOffset: androidx.compose.ui.unit.Dp,
+    durationMillis: Int,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    val initialOffsetPx = with(androidx.compose.ui.platform.LocalDensity.current) {
+        initialOffset.roundToPx()
+    }
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.Center
+    ) {
+        if (animateEntrance) {
+            AnimatedVisibility(
+                visible = visible,
+                enter = fadeIn(tween(durationMillis)) + slideInVertically(
+                    initialOffsetY = { initialOffsetPx },
+                    animationSpec = tween(durationMillis)
+                )
+            ) {
+                content()
+            }
+        } else if (visible) {
+            content()
+        }
+    }
+}
+
+@Preview(showBackground = true, widthDp = 393)
+@Composable
+private fun OnboardingButtonsPreview() = ScorePreview(
+    padding = 24.dp,
+    backgroundColor = CrimsonPrimary
+) {
+    OnboardingButtonsContent(
+        onSignUp = {},
+        onLogIn = {},
+        onLater = {},
+        showSignUp = true,
+        showLogIn = true,
+        showLater = true,
+        animateEntrance = false
+    )
+}

app/src/main/java/com/cornellappdev/score/model/OnboardingPreferencesRepository.kt

@@ -0,0 +1,32 @@
+package com.cornellappdev.score.model
+
+import android.content.Context
+import android.content.SharedPreferences
+import dagger.hilt.android.qualifiers.ApplicationContext
+import javax.inject.Inject
+import javax.inject.Singleton
+import androidx.core.content.edit
+
+@Singleton
+class OnboardingPreferencesRepository @Inject constructor(
+    @ApplicationContext context: Context
+) {
+    private val preferences: SharedPreferences = context.getSharedPreferences(
+        PREFERENCES_NAME,
+        Context.MODE_PRIVATE
+    )
+
+    fun isOnboardingCompleted(): Boolean =
+        preferences.getBoolean(KEY_ONBOARDING_COMPLETED, false)
+
+    fun markOnboardingCompleted() {
+        preferences.edit {
+            putBoolean(KEY_ONBOARDING_COMPLETED, true)
+        }
+    }
+
+    private companion object {
+        const val PREFERENCES_NAME = "score_app_preferences"
+        const val KEY_ONBOARDING_COMPLETED = "onboarding_completed"
+    }
+}