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
   

   View Slide

2. Jetpack Compose
   Getting started.
   

   View Slide

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.
   

   View Slide

4. Composable Function
   ❖ Building blocks of the UI in Compose.
   ❖ Annotated with @Composable
   

   View Slide

5. Composable Function: Preview
   ❖ @Preview annotation allows you to preview the UI without having to build and
   install your app.
   

   View Slide

6. Composable Functions
   Exercise 1:
   Our First Composable
   Function
   

   View Slide

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.
   

   View Slide

8. Content Alignment
   ❖ VerticalArrangement
   ❖ HorizontalAlignment
   

   View Slide

9. Compose Layouts
   Exercise 2
   Use Column & Row layouts to organise
   UI elements.
   Colum, Row
   

   View Slide

10. Modifiers
    ❖ Modifiers allow you to tweak the behavior and appearance of a composable.
    

    View Slide

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
    

    View Slide

12. Compose Modifiers
    Exercise 3:
    Using Modifiers to tweak appearance
    of a composable.
    

    View Slide

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.
    

    View Slide

14. Compose Layouts
    Exercise 4
    Use Box layout to draw text on an
    image..
    Box
    

    View Slide

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
    

    View Slide

16. Questions?
    

    View Slide