Save 37% off PRO during our Black Friday Sale! »

Jetpack Compose: The new Way of Building Android UI

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.

5711a187d80c7009bbb5266a7aa8fd67?s=128

Umar Saidu Auna

November 06, 2021
Tweet

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 ...
  4. None
  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.
  7. None
  8. None
  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
  15. None
  16. None
  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() . . . . .
  34. None
  35. None
  36. 3 2 1

  37. Compose in Kotlin Mix Compose UI with any Kotlin function,

    example: for loop
  38. None
  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) } } } } }
  41. None
  42. None
  43. Getting interesting right?

  44. None
  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/
  46. None
  47. Thank you. Kano @umarauna