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

    View full-size slide

  2. Today we’ll explore ..
    Composable Functions
    Compose Layouts
    Compose UI
    Themes and Styling
    Flutter v/s Compose

    View full-size slide

  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

    View full-size slide

  4. Unidirectional
    Data
    Flow
    ● Decoupling State from UI
    ● Single source of Truth - State

    View full-size slide

  5. Composable Functions
    • @Composable annotation
    • Do not return anything.
    • Can execute in any order
    • Can execute in parallel.
    • They have memory

    View full-size slide

  6. Setup
    https://developer.android.com/jetpack/compose/setup
    1.4
    minSDKVersion
    21
    4.2

    View full-size slide

  7. Some more.. Setup

    View full-size slide

  8. Output
    Recomposition
    ● Composables are called repetitively
    ● Recompose when State changes
    ● Skips recomposition when no state change

    View full-size slide

  9. Jetpack Compose
    # Declarative UI
    Toolkit
    Screen
    EditText
    Form
    EditText
    Button
    Search Bar
    Icon EditText
    Login
    Email
    Password

    View full-size slide

  10. Output
    Modifiers
    (Decorate)

    View full-size slide

  11. Themes
    Let’s style our app !

    View full-size slide

  12. Themes (Colors) Colors.kt
    Theme.kt

    View full-size slide

  13. Themes (Colors) Theme.kt

    View full-size slide

  14. Themes (Typography)
    Theme.kt

    View full-size slide

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

    View full-size slide

  16. Let’s Compose !

    View full-size slide

  17. Flutter v/s Compose
    # Production Ready
    #Declarative UI
    # Widgets # Composables
    # Hot Reload
    # Hot UI
    # Instant Run
    # Preview
    Compose for Web
    Compose for Desktop

    View full-size slide

  18. • 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

    View full-size slide