Getting Started: Jetpack Compose Layouts

Jetpack Compose is the modern UI toolkit for building native Android UI. It simplifies UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

In this talk, we'll look at composable functions, composable previews, and common layouts such as Column, Row, and Box layouts. We'll also cover modifiers and how to use them to tweak the appearance and behavior of composables.

Transcript

1. Beatrice Kinya Android Engineer @ Kyosk Digital Android Author @ kodeco.com @B__Kinya | Beatrice Kinya
2. Jetpack Compose Getting started.
3. What? ❖ Modern toolkit for building native Android UI. ❖ Uses Kotlin, no xml code. ❖ Declarative functions and intuitive Kotlin APIs that simplify development of the app ui.
4. Composable Function ❖ Building blocks of the UI in Compose. ❖ Annotated with @Composable
5. Composable Function: Preview ❖ @Preview annotation allows you to preview the UI without having to build and install your app.
6. Composable Functions Exercise 1: Our First Composable Function
7. Layouts ❖ Column: used to arrange UI elements vertically. ❖ Row: Used to arrange UI elements horizontally. ❖ Box: UI elements are stacked on top of each other.
8. Content Alignment ❖ VerticalArrangement ❖ HorizontalAlignment
9. Compose Layouts Exercise 2 Use Column & Row layouts to organise UI elements. Colum, Row
10. Modifiers ❖ Modifiers allow you to tweak the behavior and appearance of a composable.
11. More on Modifiers ❖ Compose Layouts and Modifier - MAD skills: https://www.youtube.com/watch?v=LjeHsvPIdpY&list=PLWz5rJ2EKKc94tpHND8pW8Qt8ZfT1a4c q ❖ Compose modifiers talk: https://speakerdeck.com/bkinya/compose-modifiers
12. Compose Modifiers Exercise 3: Using Modifiers to tweak appearance of a composable.
13. Box layout ❖ Children of the box layout are stacked on top of each other. ❖ Use align modifier to specify where the composable should be drawn.
14. Compose Layouts Exercise 4 Use Box layout to draw text on an image.. Box
15. Resources ❖ Github Project: https://github.com/BKinya/Todo-App ❖ Compose Layouts and Modifier - MAD skills: https://www.youtube.com/watch?v=LjeHsvPIdpY&list=PLWz5rJ2EKKc94tpHND8pW8Qt8ZfT1a4c q ❖ Compose modifiers talk: https://speakerdeck.com/bkinya/compose-modifiers
16. Questions?