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

Introduction to Jetpack Compose

Karan
January 14, 2023

Introduction to Jetpack Compose

Karan

January 14, 2023
Tweet

More Decks by Karan

Other Decks in Programming

Transcript

  1. Introduction to Jetpack Compose #AndroidTechTalks Karan Sharma

  2. Today we’ll explore .. Composable Functions Compose Layouts Compose UI

    Themes and Styling Flutter v/s Compose
  3. Why should we use Jetpack Compose ? # Less Code,

    less bugs # Declarative UI Approach, No XML # Compatible with Android Views # Material Design, Dark Theme, Animations # Unidirectional Data Flow
  4. Unidirectional Data Flow • Decoupling State from UI • Single

    source of Truth - State
  5. Composable Functions • @Composable annotation • Do not return anything.

    • Can execute in any order • Can execute in parallel. • They have memory
  6. Setup https://developer.android.com/jetpack/compose/setup 1.4 minSDKVersion 21 4.2

  7. Some more.. Setup

  8. Output Recomposition • Composables are called repetitively • Recompose when

    State changes • Skips recomposition when no state change
  9. Jetpack Compose # Declarative UI Toolkit Screen EditText Form EditText

    Button Search Bar Icon EditText Login Email Password
  10. Output Modifiers (Decorate)

  11. Layouts

  12. Themes Let’s style our app !

  13. Themes

  14. Themes (Colors) Colors.kt Theme.kt

  15. Themes (Colors) Theme.kt

  16. Themes (Typography) Theme.kt

  17. (Typography) add different fonts add fonts to your Theme Themes

  18. Let’s Compose !

  19. Flutter v/s Compose # Production Ready #Declarative UI # Widgets

    # Composables # Hot Reload # Hot UI # Instant Run # Preview Compose for Web Compose for Desktop
  20. • https://developer.android.com/courses/pathways/compose • https://developer.android.com/jetpack/compose • https://developer.android.com/jetpack/compose/setup • https://jetpackcompose.app/ • https://www.jetbrains.com/lp/compose-desktop/

    • https://compose-web.ui.pages.jetbrains.team/ • https://google.github.io/accompanist/ References
  21. Thank You !