Introduction to Jetpack Compose

Transcript

1. Introduction to Jetpack Compose #AndroidTechTalks
   Karan Sharma
   

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Some more.. Setup
   

   View Slide

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

   View Slide

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

   View Slide

10. Output
    Modifiers
    (Decorate)
    

    View Slide

11. Layouts
    

    View Slide

12. Themes
    Let’s style our app !
    

    View Slide

13. Themes
    

    View Slide

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

    View Slide

15. Themes (Colors) Theme.kt
    

    View Slide

16. Themes (Typography)
    Theme.kt
    

    View Slide

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

    View Slide

18. Let’s Compose !
    

    View Slide

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

    View Slide

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
    

    View Slide

21. Thank You !
    

    View Slide