Now in Jetpack Compose

Jetpack compose is Android’s modern toolkit for building native UI. By using compose, we are able to write UI code intuitively with less lines of code yet powerful with direct access to Android platform APIs. Jetpack compose is currently in developer preview, however there are many amazing things you can do now. In this talk, we will explore few examples with live demo.

Transcript

1. Hassan Abid GDE Android Singapore @hassanabidpk Now in Jetpack Compose Android Night April 2020
3. What is JetPack Compose? Modern toolkit for building Native Android UI Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
4. Getting Started Setup
6. Add compose to existing project
7. Add compose to existing project
8. • Modifiers • Compose Reusability • Container Functions • State in Compose • Flexible Layouts Components Declarative UI
9. • Modifier parameters tell a UI element how to lay out, display, or behave within its parent layout • Layout modifiers can change the way a UI component is measured and laid out. Modifiers @Composable fun Greeting(name: String) { Surface(color = Color.Yellow) { Text(text = "Hello $name!", modifier = Modifier.padding(24.dp)) } }
10. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyApp() } } } Compose reusability
11. Compose reusability @Composable fun MyApp() { MaterialTheme { Surface(color = Color.Yellow) { Greeting(name = "Android") } } } @Composable fun Greeting(name: String) { Text (text = "Hello $name!", modifier = LayoutPadding(24.dp)) } @Preview @Composable fun DefaultPreview() { MyApp() }
12. • Container function can have the common configuration of our app • See an example below Making Container functions @Composable fun MyApp(children: @Composable() () -> Unit) { MaterialTheme { Surface(color = Color.Yellow) { children() } } }
13. Container function Example @Composable internal fun ThemedPreview( colors: ColorPalette = lightThemeColors, typography: Typography = themeTypography, children: @Composable() () -> Unit ) { MaterialTheme(colors = colors, typography = typography) { Surface { children() } } }
14. State in Compose
15. • Manage state with @Model • Composable functions who reads value from @Model parameters will automatically be recomposed if the data changes • Example : Button click event State in Compose
16. Managing State with @Model @Model class CounterState(var count: Int = 0) @Composable fun Counter(state: CounterState) { Button(onClick = { state.count++ }) { Text("I've been clicked ${state.count} times") } }
17. Flexible Layouts
18. Flexible Layouts @Composable fun FlexibleLayout() { MaterialTheme { Surface(color = Color.Green) { Column(modifier = Modifier.fillMaxHeight()) { Column(modifier = Modifier.weight(1f)) { Text(text = "Hello World") Divider(color = Color.Blue) Text(text = "Hello World 2") } Text(text = "Outside Hello World") } } } }
19. App Theme
20. @Composable fun AndroidNightTheme( themeColors: ColorPalette = lightThemeColors, children: @Composable() () -> Unit ) { MaterialTheme(colors = themeColors) { Surface { children() } } }
21. @Preview("light theme") @Composable fun ThemedPreview() { AndroidNightTheme(lightThemeColors) { Text(text = "Android Day!") } } @Preview("dark theme") @Composable fun ThemedPreviewDark() { AndroidNightTheme(darkThemeColors) { Text(text = "Android Night!") } }
22. “Jetpack Compose is in Technical Preview, please do not use Compose in production apps. You can provide feedback or report bugs here . ” - Official Docs
23. • Github Repo : https://github.com/hassanabidpk/compose-android-night-sample Sample Code
24. • Official Compose Sample (JetNews) https://github.com/android/compose-samples • Google I/O 2019 Talk https://www.youtube.com/watch?v=VsStyq4Lzxo • Understanding Compose (Android Dev Summit 2019) https://www.youtube.com/watch?v=Q9MtlmmN4Q0 • Compose Runtime, Demystified (Kotlin Conf 2019) https://www.youtube.com/watch?v=6BRlI5zfCCk Resources
25. Hassan Abid GDE Android Singapore @hassanabidpk Thank You!