Android development with Jetpack Compose This work is licensed under the Apache 2.0 License Jetpack Compose / jet ·pak kuhm· powz / noun Jetpack Compose is a declarative & modern toolkit for building native Android UI. It simpli fi es and accelerates UI development on Android. Why do we need Compose? What does it solve and how? Before Compose UI Toolkit is tied to the OS State Management is tricky Lots of context switching Simple things still require a lot of code With Compose UI Toolkit is independent to the OS 🪄 State Management is built in 🥳 Lots of context switching 🎉 So rt ed code logic 🚀 Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ..... } } } setContent public fun ComponentActivity.setContent( parent: CompositionContext? = null, content: @Composable () ->- Unit ) { /// some magic code 🪄 } } What are we gonna learn today? TOPIC TIME(in hr:mins) Thinking in Compose 0:05 Modifiers 0:20 Layouts 0:30 State management 0:45 SideEffects 1:00 Codelab - idea Today’s Schedule Imperative <ConstraintLayout> <ImageView /> <TextView /> <TextView /> </ ConstraintLayout> Imperative View Group View Imperative textView.text = ... Imperative val textView = findViewById(R.id.textView) Declarative UI ✓ Declarative UI is cleaner, more readable, and more performant than Imperative UI. ✓ Compose allows you to do more with less code compared to XML. ✓ Compose is Intuitive. This means that you just need to tell Compose what you want to show the user. ✓ Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose. Also integrated with many Jetpack Libraries. ✓ Compose improves your build time and APK size. Declarative UI Compose @Composable fun Greeting(name: String) { } Declarative UI @Composable fun Greeting(name: String) { Text(text = "Hello $name!") } Declarative UI