Skip to content

feat: Implement navigation animations #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PranavPurwar merged 6 commits into from
Mar 7, 2026
Merged

feat: Implement navigation animations #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6f71055
feat: Implement `MainActivity` with Jetpack Compose Navigation spring…
quantavil Mar 5, 2026
6f553d6
refactor: Standardize TopAppBar to use pinned scroll behavior and the…
quantavil Mar 5, 2026
25a75b0
fixed the home screen navigation behavior, now it properly restore …
quantavil Mar 5, 2026
355f7f3
remove java home
PranavPurwar Mar 5, 2026
a34f4b3
refactor: replace TopAppBar with MediumTopAppBar across multiple scre…
quantavil Mar 7, 2026
1963586
refactor: Replace `TopAppBarDefaults.pinnedScrollBehavior` with `exit…
quantavil Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@
.externalNativeBuild
.cxx
local.properties
gradle.properties
*.patch
65 changes: 41 additions & 24 deletions Reef/src/main/java/dev/pranav/reef/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.animation.*
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
Expand Down Expand Up @@ -127,7 +129,7 @@ class MainActivity: ComponentActivity() {
currentDestination?.hasRoute<Screen.Usage>() == true -> 1
currentDestination?.hasRoute<Screen.Timer>() == true -> 2
currentDestination?.hasRoute<Screen.Settings>() == true -> 3
else -> 0
else -> -1
}
}

Expand Down Expand Up @@ -210,22 +212,25 @@ class MainActivity: ComponentActivity() {
restoreState = true
}
when (index) {
0 -> if (selectedNavIndex != 0) navController.navigate(
Screen.Home,
options
)
0 -> navController.navigate(Screen.Home) {
popUpTo(navController.graph.startDestinationId) {
saveState = true
}
launchSingleTop = true
restoreState = false
}

1 -> if (selectedNavIndex != 1) navController.navigate(
1 -> navController.navigate(
Screen.Usage,
options
)

2 -> if (selectedNavIndex != 2) navController.navigate(
2 -> navController.navigate(
Screen.Timer,
options
)

3 -> if (selectedNavIndex != 3) navController.navigate(
3 -> navController.navigate(
Screen.Settings,
options
)
Expand All @@ -249,31 +254,43 @@ class MainActivity: ComponentActivity() {
)
),
enterTransition = {
fadeIn(animationSpec = tween(250)) +
slideInHorizontally(
initialOffsetX = { it / 8 },
animationSpec = tween(250)
fadeIn(animationSpec = tween(300)) +
slideIntoContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Start,
animationSpec = spring(
dampingRatio = 0.8f,
stiffness = 300f
)
)
},
exitTransition = {
fadeOut(animationSpec = tween(250)) +
slideOutHorizontally(
targetOffsetX = { -it / 8 },
animationSpec = tween(250)
fadeOut(animationSpec = tween(300)) +
slideOutOfContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Start,
animationSpec = spring(
dampingRatio = 0.8f,
stiffness = 300f
)
)
},
popEnterTransition = {
fadeIn(animationSpec = tween(250)) +
slideInHorizontally(
initialOffsetX = { -it / 8 },
animationSpec = tween(250)
fadeIn(animationSpec = tween(300)) +
slideIntoContainer(
towards = AnimatedContentTransitionScope.SlideDirection.End,
animationSpec = spring(
dampingRatio = 0.8f,
stiffness = 300f
)
)
},
popExitTransition = {
fadeOut(animationSpec = tween(250)) +
slideOutHorizontally(
targetOffsetX = { it / 8 },
animationSpec = tween(250)
fadeOut(animationSpec = tween(300)) +
slideOutOfContainer(
towards = AnimatedContentTransitionScope.SlideDirection.End,
animationSpec = spring(
dampingRatio = 0.8f,
stiffness = 300f
)
)
}
) {
Expand Down
3 changes: 1 addition & 2 deletions Reef/src/main/java/dev/pranav/reef/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,12 +120,11 @@ fun HomeContent(
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(paddingValues)
.verticalScroll(rememberScrollState())
.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {

Spacer(Modifier.height(8.dp))

FocusModeCard(
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/PermissionsCheckActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ fun PermissionsScreen(onBackClick: () -> Unit) {

Scaffold(
topBar = {
TopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.required_permissions)) },
navigationIcon = {
IconButton(onClick = onBackClick) {
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/screens/CreateRoutineScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ fun CreateRoutineScreen(
contentWindowInsets = WindowInsets(0),
snackbarHost = { SnackbarHost(snackbarHostState) },
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = {
Text(
if (currentRoutine != null) stringResource(R.string.edit_routine)
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/screens/DailyLimitScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ fun DailyLimitScreen(
contentWindowInsets = WindowInsets(0),
containerColor = MaterialTheme.colorScheme.surface,
topBar = {
TopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.daily_usage_limit)) },
navigationIcon = {
IconButton(onClick = onBackPressed) {
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/screens/NotificationSettingsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ fun NotificationSettingsContent(

Scaffold(
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.notifications_settings_title)) },
navigationIcon = {
IconButton(onClick = onBackPressed) {
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/screens/PomodoroSettingsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ fun PomodoroSettingsContent(

Scaffold(
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.pomodoro_settings_title)) },
navigationIcon = {
IconButton(onClick = onBackPressed) {
Expand Down
13 changes: 8 additions & 5 deletions Reef/src/main/java/dev/pranav/reef/screens/RoutinesScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ fun RoutinesScreen(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
contentWindowInsets = WindowInsets(0),
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.routines)) },
colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
scrollBehavior = scrollBehavior,
Expand All @@ -90,10 +90,13 @@ fun RoutinesScreen(
snackbarHost = { SnackbarHost(snackbarHostState) }
) { paddingValues ->
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(
start = 16.dp,
end = 16.dp,
top = paddingValues.calculateTopPadding() + 8.dp,
bottom = paddingValues.calculateBottomPadding() + 8.dp
),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/screens/ScreenWrappers.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ fun UsageScreenWrapper(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
contentWindowInsets = WindowInsets(0),
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.app_usage)) },
colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
scrollBehavior = scrollBehavior
Expand Down
7 changes: 1 addition & 6 deletions Reef/src/main/java/dev/pranav/reef/screens/SettingsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,6 @@ fun SettingsContent(
val scrollBehavior =
TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

LaunchedEffect(currentScreen) {
scrollBehavior.state.heightOffset = 0f
scrollBehavior.state.contentOffset = 0f
}

Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
contentWindowInsets = WindowInsets(0),
Expand All @@ -34,7 +29,7 @@ fun SettingsContent(
enter = fadeIn(),
exit = fadeOut()
) {
LargeTopAppBar(
MediumTopAppBar(
title = { Text(stringResource(R.string.settings)) },
colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
scrollBehavior = scrollBehavior
Expand Down
79 changes: 35 additions & 44 deletions Reef/src/main/java/dev/pranav/reef/timer/TimerScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package dev.pranav.reef.timer

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
Expand Down Expand Up @@ -63,47 +64,39 @@ fun TimerContent(
val showRunningView = isTimerRunning || isPaused
var selectedMode by remember { mutableIntStateOf(0) }

val setupScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
val runningScrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

val scrollBehavior = if (showRunningView) runningScrollBehavior else setupScrollBehavior
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
contentWindowInsets = WindowInsets(0),
topBar = {

LargeTopAppBar(
title = {
Column(
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text(
stringResource(R.string.focus_mode_title)
)

if (!showRunningView) {
FocusModeGroup(
selectedMode = selectedMode,
onSelectionChange = { selectedMode = it })

Spacer(modifier = Modifier.height(8.dp))
Column(modifier = Modifier.animateContentSize()) {
MediumTopAppBar(
title = {
Text(stringResource(R.string.focus_mode_title))
},
actions = {
IconButton(onClick = { navController.navigate(Screen.FocusStats) }) {
Icon(
Icons.Outlined.BarChart,
contentDescription = "Focus Stats"
)
}
}
},
actions = {
IconButton(onClick = { navController.navigate(Screen.FocusStats) }) {
Icon(
Icons.Outlined.BarChart,
contentDescription = "Focus Stats"
)
}
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent
),
scrollBehavior = scrollBehavior
)
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent
),
scrollBehavior = scrollBehavior
)

if (!showRunningView) {
FocusModeGroup(
selectedMode = selectedMode,
onSelectionChange = { selectedMode = it }
)
Spacer(modifier = Modifier.height(8.dp))
}
}
}
) { paddingValues ->
Box(
Expand All @@ -130,15 +123,13 @@ fun TimerContent(
.verticalScroll(rememberScrollState())
.padding(horizontal = 24.dp)
) {
Column(modifier = Modifier.fillMaxWidth()) {
Spacer(modifier = Modifier.height(24.dp))

Box(modifier = Modifier.fillMaxWidth()) {
if (selectedMode == 0) {
SimpleFocusSetup(onStartTimer)
} else {
PomodoroFocusSetup(onStartTimer)
}
Spacer(modifier = Modifier.height(16.dp))

Box(modifier = Modifier.fillMaxWidth()) {
if (selectedMode == 0) {
SimpleFocusSetup(onStartTimer)
} else {
PomodoroFocusSetup(onStartTimer)
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/ui/about/AboutScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ fun AboutScreen(
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = {
Text(
stringResource(R.string.about),
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/ui/focusstats/FocusSessionDetailScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ fun FocusSessionDetailScreen(sessionId: String, onBackPressed: () -> Unit) {
Scaffold(
contentWindowInsets = WindowInsets(0),
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = {
Text(
"Session Detail",
Expand Down
2 changes: 1 addition & 1 deletion Reef/src/main/java/dev/pranav/reef/ui/focusstats/FocusStatsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ fun FocusStatsScreen(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
contentWindowInsets = WindowInsets(0),
topBar = {
LargeTopAppBar(
MediumTopAppBar(
title = {
Text(
"Focus Stats",
Expand Down
Loading