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
   

   View Slide

2. Challenges
   

   View Slide

3. Challenges
   findViewById() – XML
   data binding and view binding
   APIs are showing signs of ageing
   RecyclerView
   View Class keeps getting bigger and bigger
   ...
   

   View Slide

4. View Slide

5. Jetpack Compose
   

   View Slide

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.
   

   View Slide

7. View Slide

8. View Slide

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.
   

   View Slide

10. Declarative UI
    

    View Slide

11. Declarative UI
    Declarative UI is a UI that’s designed in a
    declarative way.
    You describe what it should be like.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. Declarative
    This on the other hand
    focuses on the what
    This design focuses on the
    how rather than the what
    Imperative
    

    View Slide

15. View Slide

16. View Slide

17. “Everything is a function”
    

    View Slide

18. Compose Everywhere
    View/XML -> UI as Objects
    Compose -> UI as Function
    

    View Slide

19. Goal
    ● Simplify
    ● Less code
    ● Fix what’s broken
    

    View Slide

20. Components
    ● Layouts
    ○ Column
    ○ Row
    ○ Flex(column/row)
    ○ Box(similar to Framelayout)
    ○ ConstraintLayout(almost done)
    

    View Slide

21. Components
    ● Built-in Components
    ○ Button
    ○ Text
    ○ Checkbox
    ○ Navigation Drawer
    ○ Navigation Bar
    ○ Checkbox
    ○ AppBar
    

    View Slide

22. Components
    ● Custom View
    ○ Draw
    ○ Layout
    

    View Slide

23. Getting Started
    

    View Slide

24. New Project
    

    View Slide

25. Existing Project(gradle:app)
    

    View Slide

26. Existing Project(gradle:module)
    

    View Slide

27. Jetpack Compose
    Basics
    

    View Slide

28. Compose function
    ● Regular function annotated with @Composable.
    ● Enables your function to call other @Composable
    functions within it.
    

    View Slide

29. Compose in Android app
    ● Use setContent to define layout
    ● Call composable function instead of XML file
    

    View Slide

30. Compose in Android app
    ● Use setContent to define layout
    ● Call composable function instead of XML file
    

    View Slide

31. Preview Change with @Preview
    ● Prepare Android Studio 4.0 Preview
    ● Set Preview Content with @Preview annotation.
    ● Build Project.
    

    View Slide

32. Live Preview in Android Studio
    

    View Slide

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() . . . . .
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Compose in Kotlin
    Mix Compose UI with any Kotlin function, example: for loop
    

    View Slide

38. View Slide

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.
    

    View Slide

40. @Composable
    fun Planets(planets: List) {
    // 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)
    }
    }
    }
    }
    }
    

    View Slide

41. View Slide

42. View Slide

43. Getting interesting right?
    

    View Slide

44. View Slide

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/
    

    View Slide

46. View Slide

47. Thank you.
    Kano
    @umarauna
    

    View Slide