DevFest Uyo—Jetpack compose: Game changer for building Modern Android UI

Transcript

1. Jetpack Compose: Game changer for building Modern Android UI Love Sparus O’tudor Android Engineer, FrontendLabs Uyo
2. What is Jetpack Compose? Holla Jetty Packy😊
3. Jetpack Compose is a modern declarative UI Toolkit to simplify and accelerate native Android UI development.
4. What ever happened to our famous XML?🤔
5. Different Languages 30+ thousands lines of code Cognitive Overhead Multiple Files Deprecated Code Boilerplate Codes Multiple layers of inheritance Problems with the Traditional View System
6. UI logic and definition are completely Separate Uses XML Satic Layout Definition Kotlin/Java Dynamic Logic & Behaviour Completely Separate Generates a lot of boilerplate codes
7. A Quick Look at Jetpack Compose
8. Jetpack Compose favours Composition over Inheritance is a Human has a Composition Inheritance
9. Declarative UI Focus on the “WHAT” and not the “HOW”
10. Jetpack Compose is a function of State Anytime the “state“ changes the “compose UI” changes also.
11. @Preview @Composable setContent{} Compose Preview Material Theme
12. Composable Functions • Annotated with @Composable • @Composable informs the compiler that the function is intended to convert data into UI. • Can accept parameters • Returns nothing
13. Composable Functions
14. “Composable functions can only be called in the context of another compose function...”
15. setContent{} • The setContent block defines the activity's layout where we call composable functions. • The content becomes the root view of the activity. • More like setContentView() in XML.
16. setContent{}
17. Material Theme • An implementation of Material Design. • Define the applications theme with its respective colors, shapes, font, etc. • Can be customized. • Mostly the root element of the screen.
18. Material Theme
19. Modifier • An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. • Modifiers can be chained. • Their chaining order is important.
20. Modifier
21. Layouts Column Row Box Constraint Layout
22. Column
23. Row
24. Box
25. Say Goodbye to RecyclerView Welcome LazyRow and LazyColumn 🤩
26. Managing Lists In Compose • Compose makes it easy to create lists. • These composables render only the elements that are visible on screen.
27. LazyRow A LazyRow is a horizontally scrolling list that only composes and lays out the currently visible items.
28. LazyColumn A LazyColumn is a vertically scrolling list.
29. LazyVerticalGrid • A LazyColumn is a vertically scrolling grid. • It accepts the number of grid items in one row or the minimum width of one item. • Unstable API.
30. LazyVerticalGrid
31. More Components • Button • Image • Icons, etc.
32. Ready to take a deep dive?
33. Additional Resources • Jetpack Compose Tutorial on developer.android • Jetpack Compose basics Codelab • Under the hood of Jetpack Compose • Get started with Jetpack Compose • Jetpack Compose basics | Workshop
34. Questions?
35. Thank You!