Jetpack Compose: The new Way of Building Android UI

I gave a talk on Jetpack Compose, which is a Modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Transcript

1. Jetpack Compose: The new Way of Building Android UI Umar Saidu Auna Software Engineer, gidimo, A tech community organizer. Kano @umarauna
2. Challenges
3. Challenges findViewById() – XML data binding and view binding APIs are showing signs of ageing RecyclerView View Class keeps getting bigger and bigger ...
5. Jetpack Compose
6. Jetpack Compose Modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
9. Inspired by 1. React 2. Litho 3. Vue.js 4. Flutter ... but it’s written completely in Kotlin and is fully compatible with the existing Android view system.
10. Declarative UI
11. Declarative UI Declarative UI is a UI that’s designed in a declarative way. You describe what it should be like.
12. Declarative This pattern is an emerging trend that allows the developers to design the user interface based on the data received. This is the most common paradigm; it involves having a separate prototype/model of the application’s UI. Imperative
13. Declarative This design paradigm makes use of one programming language to create an entire application. A good example is XML layouts in Android. We design the widgets and components which are then rendered for the user to see and interact with. Imperative
14. Declarative This on the other hand focuses on the what This design focuses on the how rather than the what Imperative
17. “Everything is a function”
18. Compose Everywhere View/XML -> UI as Objects Compose -> UI as Function
19. Goal • Simplify • Less code • Fix what’s broken
20. Components • Layouts ◦ Column ◦ Row ◦ Flex(column/row) ◦ Box(similar to Framelayout) ◦ ConstraintLayout(almost done)
21. Components • Built-in Components ◦ Button ◦ Text ◦ Checkbox ◦ Navigation Drawer ◦ Navigation Bar ◦ Checkbox ◦ AppBar
22. Components • Custom View ◦ Draw ◦ Layout
23. Getting Started
24. New Project
25. Existing Project(gradle:app)
26. Existing Project(gradle:module)
27. Jetpack Compose Basics
28. Compose function • Regular function annotated with @Composable. • Enables your function to call other @Composable functions within it.
29. Compose in Android app • Use setContent to define layout • Call composable function instead of XML file
30. Compose in Android app • Use setContent to define layout • Call composable function instead of XML file
31. Preview Change with @Preview • Prepare Android Studio 4.0 Preview • Set Preview Content with @Preview annotation. • Build Project.
32. Live Preview in Android Studio
33. Modifiers • Are used to modify the composable UI elements for example adding margin, padding or defining the width and height. • Available modifiers are:background(), clickable, scrollable, draggable, swipeable, width(), height(), size(), padding() . . . . .
36. 3 2 1
37. Compose in Kotlin Mix Compose UI with any Kotlin function, example: for loop
39. LAzy COlumn A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It’s similar to a Recyclerview in the classic Android View system.
40. @Composable fun Planets(planets: List<Planets>) { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme .colors.background) { Column() { Text( text = stringResource (R.string.planets), style = MaterialTheme .typography.h4, modifier = Modifier.padding(10.dp) ) val planet = planets.maxByOrNull { it.moon } Text( text = getGreetingMessage (planet), style = MaterialTheme .typography.h6, modifier = Modifier.padding(10.dp) ) LazyColumn() { items(planets) { planet -> PlanetImageList (planet) } } } } }
43. Getting interesting right?
45. Codelabs • goo.gle/compose-pathway • goo.gle/compose-samples • goo.gle/compose-docs • goo.gle/compose-slack • goo.gle/compose-feedback • https://developer.android.com/jetpack/compose/tutorial • https://foso.github.io/Jetpack-Compose-Playground/material/button/
47. Thank you. Kano @umarauna