Your first Android app and Building app UI

This presentation use form event #JuaraAndroid Online session #1 Talk about Your first Android app and Building app UI

Transcript

1. This work is licensed under the Apache 2.0 License Cendekia Luthfieta Nazalia Software Engineer PLN Icon Plus || Content Creator Hello, Buddy!
2. This work is licensed under the Apache 2.0 License Instagram : @luthfieta 150+ IT contents TikTok : @luthfieta 130+ IT contents Youtube : Cendekia Luthfieta NZ 100+ tutorial IT videos
3. This work is licensed under the Apache 2.0 License ARE YOU READY? Ig : hasbullalive
4. This work is licensed under the Apache 2.0 License Your first Android app and Building app UI Unit 1 (3 pathways) and Unit 2 (3 pathways)
5. This work is licensed under the Apache 2.0 License Get to know about Kotlin Kotlin adalah bahasa pemrograman modern, disajikan secara statis yang berjalan pada platform Java Virtual Machine (JVM). Kotlin menggunakan compiler LLVM yang artinya, dapat dikompilasi ke dalam kode JavaScript. source : dicoding.com
6. This work is licensed under the Apache 2.0 License Theory🙅🏻‍♀️ Theory and Practice🙆🏻‍♀️ Prepare your tools
7. LOOKING AT THE PAST
8. This work is licensed under the Apache 2.0 License Reference : https:/ /medium.com/mobile-app-development-publication/how-android-access-view-item-the-past-to-the-future-bb003ae84527
9. Jetpack Compose? This work is licensed under the Apache 2.0 License Jetpack Compose is the modern toolkit for building native user interfaces for Android apps. Compose makes it easier and faster to build UIs on Android.
10. This work is licensed under the Apache 2.0 License • Less Code Do more with less code and avoid entire classes of bugs. Code is simpler and easier to maintain • Intuitive Just describe your UI, and Compose takes care of the rest. As app state changes, your UI automatically updates. • Accelerates Development Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support. • Powerful Create beautiful apps with direct access to the Android platform APIs and built-in support for Material Design, Dark theme, animations, and more Benefits of using Jetpack Compose
11. Layout in Compose This work is licensed under the Apache 2.0 License
12. This work is licensed under the Apache 2.0 License Column Row Box Constraint Layout
13. This work is licensed under the Apache 2.0 License Arrangement
14. This work is licensed under the Apache 2.0 License
15. This work is licensed under the Apache 2.0 License Alignment
16. This work is licensed under the Apache 2.0 License 1. Column 2. Row 3. Box
17. This work is licensed under the Apache 2.0 License Modifier
18. This work is licensed under the Apache 2.0 License @Composable fun SearchResult(result: SearchResult, modifier: Modifier = Modifier) { Row(modifier = modifier .padding(8.dp) .background(MaterialTheme.colors.surface) ) { Image(modifier = Modifier.size(72.dp)) Column(modifier = Modifier .padding(16.dp) .align(Alignment.CenterVertically) ) { Text(result.title) Text(result.subtitle) } } } List of Compose modifiers | Jetpack Compose | Android Developers
19. STATE
20. This work is licensed under the Apache 2.0 License Any Value that can change over time
21. @Composable fun CartItem() { var quantity: Int = 1 Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } State not tracked by Compose
22. @Composable fun CartItem() { var quantity: Int = 1 Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } State not tracked by Compose This state is not tracked by Compose
23. This work is licensed under the Apache 2.0 License State changes need to be tracked by Compose
24. This work is licensed under the Apache 2.0 License Three way to create state 1. val mutableState = remember { mutableStateOf(default) } 2. var value by remember { mutableStateOf(default) } 3. val (value, setValue) = remember { mutableStateOf(default) }
25. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
26. This work is licensed under the Apache 2.0 License State created in composables needs to be remembered
27. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
28. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
29. @Composable fun CartItem() { var quantity by rememberSaveable { mutableStateOf(1) } Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } Property delegate
30. @Composable fun CartItem() { val quantity = rememberSaveable { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } BONUS — rememberSaveable State survives configuration changes
31. Let’s do some practice This work is licensed under the Apache 2.0 License
32. This work is licensed under the Apache 2.0 License Study Case
33. This work is licensed under the Apache 2.0 License Congratulation, Buddy!
34. This work is licensed under the Apache 2.0 License 🧐Page not scrollable 🧐 Repetitive Code because the list was created manually 🧐 Less interactive display Is studying Units 1 and 2 enough?
35. This work is licensed under the Apache 2.0 License Wait for #2 Online Session Unit 3: Display lists and use Material Design What's the solution?
36. This work is licensed under the Apache 2.0 License Deck is available at https://speakerdeck.com/luthfieta : luthfieta : luthfieta : Cendekia Luthfieta NZ Don’t forget to git push your knowledge through your social media. Let’s Grow Together! Thank You