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

DevFest Uyo—Jetpack compose: Game changer for b...

Love
November 13, 2021

DevFest Uyo—Jetpack compose: Game changer for building Modern Android UI

Love

November 13, 2021
Tweet

More Decks by Love

Other Decks in Programming

Transcript

  1. Jetpack Compose: Game changer for building Modern Android UI Love

    Sparus O’tudor Android Engineer, FrontendLabs Uyo
  2. Jetpack Compose is a modern declarative UI Toolkit to simplify

    and accelerate native Android UI development.
  3. Different Languages 30+ thousands lines of code Cognitive Overhead Multiple

    Files Deprecated Code Boilerplate Codes Multiple layers of inheritance Problems with the Traditional View System
  4. UI logic and definition are completely Separate Uses XML Satic

    Layout Definition Kotlin/Java Dynamic Logic & Behaviour Completely Separate Generates a lot of boilerplate codes
  5. Jetpack Compose is a function of State Anytime the “state“

    changes the “compose UI” changes also.
  6. Composable Functions • Annotated with @Composable • @Composable informs the

    compiler that the function is intended to convert data into UI. • Can accept parameters • Returns nothing
  7. setContent{} • The setContent block defines the activity's layout where

    we call composable functions. • The content becomes the root view of the activity. • More like setContentView() in XML.
  8. Material Theme • An implementation of Material Design. • Define

    the applications theme with its respective colors, shapes, font, etc. • Can be customized. • Mostly the root element of the screen.
  9. Modifier • An ordered, immutable collection of modifier elements that

    decorate or add behavior to Compose UI elements. • Modifiers can be chained. • Their chaining order is important.
  10. Row

  11. Box

  12. Managing Lists In Compose • Compose makes it easy to

    create lists. • These composables render only the elements that are visible on screen.
  13. LazyRow A LazyRow is a horizontally scrolling list that only

    composes and lays out the currently visible items.
  14. LazyVerticalGrid • A LazyColumn is a vertically scrolling grid. •

    It accepts the number of grid items in one row or the minimum width of one item. • Unstable API.
  15. Additional Resources • Jetpack Compose Tutorial on developer.android • Jetpack

    Compose basics Codelab • Under the hood of Jetpack Compose • Get started with Jetpack Compose • Jetpack Compose basics | Workshop