Introduction to Jetpack Compose

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 !