Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose: The new Way of Building Androi...

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.

Umar Saidu Auna

November 06, 2021
Tweet

More Decks by Umar Saidu Auna

Other Decks in Programming

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 findViewById() – XML data binding and view binding APIs

    are showing signs of ageing RecyclerView View Class keeps getting bigger and bigger ...
  3. 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.
  4. 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.
  5. Declarative UI Declarative UI is a UI that’s designed in

    a declarative way. You describe what it should be like.
  6. 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
  7. 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
  8. Declarative This on the other hand focuses on the what

    This design focuses on the how rather than the what Imperative
  9. Components • Layouts ◦ Column ◦ Row ◦ Flex(column/row) ◦

    Box(similar to Framelayout) ◦ ConstraintLayout(almost done)
  10. Components • Built-in Components ◦ Button ◦ Text ◦ Checkbox

    ◦ Navigation Drawer ◦ Navigation Bar ◦ Checkbox ◦ AppBar
  11. Compose function • Regular function annotated with @Composable. • Enables

    your function to call other @Composable functions within it.
  12. Compose in Android app • Use setContent to define layout

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

    • Call composable function instead of XML file
  14. Preview Change with @Preview • Prepare Android Studio 4.0 Preview

    • Set Preview Content with @Preview annotation. • Build Project.
  15. 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() . . . . .
  16. 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.
  17. @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) } } } } }
  18. 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/