3. This work is licensed under the Apache 2.0 License
● Lazy Layouts
● Navigation
● Timer
Overview
4. This work is licensed under the Apache 2.0 License
Lazy Layouts
5.
6.
7. This work is licensed under the Apache 2.0 License
8. This work is licensed under the Apache 2.0 License
9. This work is licensed under the Apache 2.0 License
Same Work,
Fewer Code
10. This work is licensed under the Apache 2.0 License
Structure of Lazy Layouts :-
● Both Lazy row and Lazy column
have the same structure
● Multiple items can be stacked
● Modifiers can be used for
making adjustments
11. This work is licensed under the Apache 2.0 License
Indexing Items
12. This work is licensed under the Apache 2.0 License
Lazy Rows
and
Lazy Columns
13. This work is licensed under the Apache 2.0 License
Basic Structure
14. This work is licensed under the Apache 2.0 License
● Using SpacedBy
15. This work is licensed under the Apache 2.0 License
● Using Padding Modifier
16. This work is licensed under the Apache 2.0 License
● Using Content Padding
17. This work is licensed under the Apache 2.0 License
Lazy
Column
18. This work is licensed under the Apache 2.0 License
● Items of the list are displayed in a
vertical manner
● A padding of 40 dp is applied on all
sides
Lazy Column
19. This work is licensed under the Apache 2.0 License
Lazy Grids
20.
21. This work is licensed under the Apache 2.0 License
Structure of Lazy Grids
22. This work is licensed under the Apache 2.0 License
Structure of Lazy Grids
23. This work is licensed under the Apache 2.0 License
Structure of Lazy Grids
24. This work is licensed under the Apache 2.0 License
LazyGrid
25. This work is licensed under the Apache 2.0 License
Lazy Grids
● Grid of 3 columns are
created
● Items are filled
horizontally
26. This work is licensed under the Apache 2.0 License
Trying it Out
27. This work is licensed under the Apache 2.0 License
Lazy Column within a Lazy Row
Stacking Lazy Layouts
28. This work is licensed under the Apache 2.0 License
In Jetpack Compose
Navigation
29. This work is licensed under the Apache 2.0 License
● Navigation in Jetpack Compose is a
way to get around different layouts
and composable functions in the
android app.
What is Navigation in Jetpack
Compose?
30. This work is licensed under the Apache 2.0 License
Set Up Dependencies
31. This work is licensed under the Apache 2.0 License
Navigation
● NavHost -An empty container that
displays destinations from your navigation
graph.
● NavController - NavController manages
app navigation within a NavHost.
32. This work is licensed under the Apache 2.0 License
Setting Up . . .
● To set up navigation in
jetpack, a
navController is
required.
33. This work is licensed under the Apache 2.0 License
Using NavHost
● “startDestination” is
the start screen of
Navigation.
● The composables
inside NavHost are
the screens to which
navigation is to be
done.
34. This work is licensed under the Apache 2.0 License
Using NavController
● To navigate to a
composable destination,
“navigate” function is used.
● “navigate” takes a single
String parameter that
represents the
destination’s route.
35. This work is licensed under the Apache 2.0 License
Using Sealed Class
● A Sealed Class can be
used to store the routes
to various destinations.
● Sealed Classes only
allows classes inside of
this screen class to
inherit from screen or
classes inside it hence
providing a layer of
security.
36. This work is licensed under the Apache 2.0 License
Putting it all together
A NavHost is created
37. This work is licensed under the Apache 2.0 License
Putting it all together
A Composable function is
created
Calls second_screen via NavHost
38. This work is licensed under the Apache 2.0 License
Putting it all together
Another Composable
function is created
Calls third_screen via NavHost
39. This work is licensed under the Apache 2.0 License
Putting it all together
Another Composable
function is created
Calls first_screen via NavHost
40. This work is licensed under the Apache 2.0 License
Putting it all together
Initiates the Navigation
41. This work is licensed under the Apache 2.0 License
ComposeNavigation()
first_screen
second_screen
third_screen
