Components of Jetpack

All the components of Jetpack Compose

Transcript

1. Components in Jetpack Compose Sunku Saarthak Community Co-Lead Android
2. Agenda • Learn about Jetpack Compose and Modifier. • Jetpack Text. • Jetpack TextField, Button. • Jetpack Layout and Column.
3. What are Composable Functions Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI's construction (initializing an element, attaching it to a parent, etc.). To create a composable function, just add the @Composable annotation to the function name.
4. “Every Component is an Composable Function in Jetpack Compose.” Compose 4
5. Text in Compose Compose provides Text and TextField, which are composables following Material Design guidelines. It’s recommended to use them as they have the right look and feel for users on Android, and includes other options to simplify their customization without having to write a lot of code.
7. Text Alignment The textAlign parameter allows to set the alignment of the text within a Text composable surface area.
8. Compose modifiers Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things: • Change the composable's size, layout, behavior, and appearance • Add information, like accessibility labels • Process user input • Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable Modifiers are standard Kotlin objects. Create a modifier by calling one of the Modifier class
10. EditField Compose TextField allows users to enter and modify text.
11. Outlined TextField
12. Button in Jetpack Compose In Jetpack Compose buttons, you need to give two arguments for buttons. The first argument as onClick callback and another one is your button text element. You can add a Text-Composable or any other Composable as child elements of the Button.
13. Column in Compose Column is a Composable functions that take Composable content, so you can place items inside. For example, each child inside of a Column will be placed vertically.
14. In the layout model, the UI tree is layed out in a single pass. Each node is first asked to measure itself, then measure any children recursively, passing size constraints down the tree to children. Then, leaf nodes are sized and placed, with the resolved sizes and placement instructions passed back up the tree. Briefly, parents measure before their children, but are sized and placed after their children.
15. Resources • https://developer.android.com/jetpack/co mpose/tutorial • https://developer.android.com/jetpack/co mpose • https://developer.android.com/courses/jet pack-compose/course
16. Thank you and Q&A Sunku Saarthak https://www.linkedin.com/in/sunkusaarthak https://twitter.com/sunkusaarthak