Navigation with Animation
Initial page
This function to show initial route for use on Android jetpack compose.
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.navigation.compose.currentBackStackEntryAsState
import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.composable
import com.google.accompanist.navigation.animation.rememberAnimatedNavController
fun Navigation(...) {
// Create initial remember animation controller
val navController = rememberAnimatedNavController()
// Use AnimationNavhost function
AnimatedNavHost(
// Require rememberAnimatedNavController(), Start Destination (home or etc.)
navController, startDestination = Route.Home.route //home ,
) {
// Create composable
composable(
// Set composable path name and with query data to page
Route.EnterApproveCode.route + "/{data}",
// Animation when enter to page
enterTransition = { ->
slideInHorizontally(
initialOffsetX = { 1000 },
)
},
// Animation when exit from page
exitTransition = { ->
slideOutHorizontally(
targetOffsetX = { 1000 },
)
},
// Animation when enter to page with popup
popEnterTransition = { ->
slideInHorizontally(
initialOffsetX = { -1000 },
)
},
) {
// navBackStack use when send data to this page
navBackStack ->
val data = JSONObject(navBackStack.arguments?.getString("data"))
// Composable page require
EnterApproveCodeScreen(context, navController, data)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Navigation between page
This function to show navigation on Android jetpack compose.
// NavController is function pass from top of Navigation
// .navigate is navigation from this page to route to want.
// .navigate function call path to go to page and add data end string of slash
navController.navigate(
"amount/" +
"${
JSONObject(
"{" +
"transaction_type:\"sale\"," +
"title:\"Sale\"" +
"}"
)
}"
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Navigation force back to top of component
This function to navigation to main component.
navController.popBackStack()
1
Route sealed
sealed class Route(var route: String, var title: String) {
object Home : Route("home", "Home")
}
1
2
3
2
3
How to use sealed class
Route.xxx.route
1