Skip to content

Added better transition animation in Navigation #77

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
aritra-tech merged 1 commit into from
Sep 24, 2023
Merged

Added better transition animation in Navigation #77

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
163 changes: 97 additions & 66 deletions app/src/main/java/com/aritra/notify/navigation/NotifyApp.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
package com.aritra.notify.navigation

import android.Manifest
import android.os.Build
import androidx.annotation.RequiresApi
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
Expand All @@ -12,10 +11,12 @@ import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavHostController
import androidx.navigation.NavType.Companion.IntType
import androidx.navigation.compose.NavHost
Expand All @@ -24,32 +25,15 @@ import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.aritra.notify.R
import com.aritra.notify.components.dialog.PermissionDialog
import com.aritra.notify.components.dialog.RationaleDialog
import com.aritra.notify.ui.screens.notes.addNoteScreen.AddNotesScreen
import com.aritra.notify.ui.screens.notes.editNoteScreen.EditNotesScreen
import com.aritra.notify.ui.screens.notes.homeScreen.NoteScreen
import com.aritra.notify.ui.screens.settingsScreen.SettingsScreen
import com.google.accompanist.permissions.ExperimentalPermissionsApi
import com.google.accompanist.permissions.isGranted
import com.google.accompanist.permissions.rememberPermissionState
import com.google.accompanist.permissions.shouldShowRationale

@Composable
fun NotifyApp(navController: NavHostController = rememberNavController()) {

val bottomNavItem = listOf(
BottomNavItem(
name = "Notes",
route = NotifyScreens.Notes.name,
icon = R.drawable.note_outline
),
BottomNavItem(
name = "Settings",
route = NotifyScreens.Settings.name,
icon = R.drawable.settings_outline
),
)
val bottomNavItem = getBottomNavItems()
val screensWithHiddenNavBar = listOf(
NotifyScreens.AddNotes.name,
"${NotifyScreens.UpdateNotes.name}/{noteId}"
Expand All @@ -58,54 +42,34 @@ fun NotifyApp(navController: NavHostController = rememberNavController()) {

Scaffold(
bottomBar = {
if (backStackEntry.value?.destination?.route !in screensWithHiddenNavBar) {
NavigationBar(modifier = Modifier.height(75.dp)) {
bottomNavItem.forEach { item ->
NavigationBarItem(
alwaysShowLabel = true,
icon = {
Icon(
painter = painterResource(id = item.icon),
contentDescription = item.name,
tint = if (backStackEntry.value?.destination?.route == item.route)
MaterialTheme.colorScheme.onSurface
else
MaterialTheme.colorScheme.secondary
)
},
label = {
Text(
text = item.name,
color = if (backStackEntry.value?.destination?.route == item.route)
MaterialTheme.colorScheme.onSurface
else
MaterialTheme.colorScheme.secondary,
fontWeight = if (backStackEntry.value?.destination?.route == item.route)
FontWeight.Bold
else
FontWeight.Normal,
)
},
selected = backStackEntry.value?.destination?.route == item.route,
onClick = {
navController.navigate(item.route) {
popUpTo(navController.graph.startDestinationId)
launchSingleTop = true
}
}
)
}
}
}
BottomNavigationBar(
backStackEntry,
bottomNavItem,
screensWithHiddenNavBar,
navController
)
}
) {
NavHost(
navController = navController,
startDestination = NotifyScreens.Notes.name,
modifier = Modifier
.padding(it)
modifier = Modifier.padding(it),
enterTransition = {
slideIntoContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left,
animationSpec = tween(700)
)
},
exitTransition = {
slideOutOfContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left,
animationSpec = tween(700)
)
}
) {
composable(route = NotifyScreens.Notes.name) {
composable(
route = NotifyScreens.Notes.name,
) {
NoteScreen(
onFabClicked = { navController.navigate(NotifyScreens.AddNotes.name) },
navigateToUpdateNoteScreen = { noteId ->
Expand All @@ -115,20 +79,87 @@ fun NotifyApp(navController: NavHostController = rememberNavController()) {
}
composable(
route = "${NotifyScreens.UpdateNotes.name}/{noteId}",
arguments = listOf(navArgument("noteId") { type = IntType })
arguments = listOf(navArgument("noteId") { type = IntType }),
) { backStack ->
val noteId = backStack.arguments?.getInt("noteId") ?: 0
EditNotesScreen(
noteId = noteId,
navigateBack = { navController.popBackStack() }
)
}
composable(NotifyScreens.AddNotes.name) {
composable(
route = NotifyScreens.AddNotes.name,
) {
AddNotesScreen(navigateBack = { navController.popBackStack() })
}
composable(NotifyScreens.Settings.name) {
composable(
route = NotifyScreens.Settings.name,
) {
SettingsScreen()
}
}
}
}

@Composable
fun BottomNavigationBar(
backStackEntry: State<NavBackStackEntry?>,
bottomNavItem : List<BottomNavItem>,
screensWithHiddenNavBar: List<String>,
navController: NavHostController
) {
if (backStackEntry.value?.destination?.route !in screensWithHiddenNavBar) {
NavigationBar(modifier = Modifier.height(75.dp)) {
bottomNavItem.forEach { item ->
NavigationBarItem(
alwaysShowLabel = true,
icon = {
Icon(
painter = painterResource(id = item.icon),
contentDescription = item.name,
tint = if (backStackEntry.value?.destination?.route == item.route)
MaterialTheme.colorScheme.onSurface
else
MaterialTheme.colorScheme.secondary
)
},
label = {
Text(
text = item.name,
color = if (backStackEntry.value?.destination?.route == item.route)
MaterialTheme.colorScheme.onSurface
else
MaterialTheme.colorScheme.secondary,
fontWeight = if (backStackEntry.value?.destination?.route == item.route)
FontWeight.Bold
else
FontWeight.Normal,
)
},
selected = backStackEntry.value?.destination?.route == item.route,
onClick = {
navController.navigate(item.route) {
popUpTo(navController.graph.startDestinationId)
launchSingleTop = true
}
}
)
}
}
}
}

fun getBottomNavItems(): List<BottomNavItem> {
return listOf(
BottomNavItem(
name = "Notes",
route = NotifyScreens.Notes.name,
icon = R.drawable.note_outline
),
BottomNavItem(
name = "Settings",
route = NotifyScreens.Settings.name,
icon = R.drawable.settings_outline
),
)
}