Jetpack Compose, The New Way Building Android UI

Jetpack Compose is 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. We can try to develop Android UI with no XML. Just using Kotlin API.

Transcript

1. Jetpack Compose The New Way Building Android UI I Wayan Dharmana Associate Android Developer
2. 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. Jetpack Compose Less Code Do more with Less Code. Intuitive Just describe your UI, let Compose take care others. Accelerate Development Compatible with all your existing code. Powerful Create beautiful app with built-in support for Material Design, Dark Theme, etc
5. Declarative UI
6. Declarative UI Declarative UI is a UI that's designed in a declarative way. You describe what it should be like.
7. Imperative vs Declarative “Saya pengen makan mie Instan”
8. Imperative vs Declarative IMPERATIVE • Masukan air ke dalam panci • Nyalakan Kompor • Tunggu Air Mendidih • Masukkan Mie • Siapkan Bumbu Mie • Aduk Mie hingga Matang • Buang Air Rebusan Mie • Tuang Mie ke Atas Bumbu DECLARATIVE • Sebuah Meja ◦ Berisi Makanan ▪ Mie Instan Goreng / Kuah “Saya pengen makan mie Instan”
9. FYI, Jetpack Compose is currently in Developer Preview. We need to install Android Studio 4.0 Preview before Try http://d.android.com/studio/preview
10. @Composable Function
11. @Composable Function • Regular function annotated with @Composable • Enables your function to call other @Composable functions within it
12. Compose in Android App • Use setContent to define layout • Call composable function instead of XML file
13. Preview Changes with @Preview • Prepare Android Studio 4.0 Preview • Set Preview Content with @Preview annotation. • Build Project
14. Live Preview in Android Studio 4.0 Preview
15. Modifier • List of properties that provide additional decoration/context for a UI component • Available modifiers are: Spacing, AspectRatio and modifiers for Row and Column
17. Compose is Reusable! MyGradientButton Login Page Register Page OTP Page Booking Page
18. 3 2 1
19. Container Function Need UI with common configuration? Try Container function.
20. Compose in Kotlin Mix Compose UI with any Kotlin function, example: for loop.
22. State in Compose
23. Manage State with @Model • @Model annotation can help us to manage data state • Composable functions who read values from @Model parameters will automatically be recompose if the data changes.
24. Manage State with @Model • Setup @Model function (CounterState) • Setup Counter as @Composable function • Put Counter below List
25. Manage State with @Model • Setup @Model function (CounterState) • Setup Counter as @Composable function • Put Counter below List
26. Manage State with @Model
27. Flexible Layout
28. Flexible Layout We can use Column and Row to arrange layout easily.
29. Flexible Layout EXAMPLE: Set Counter Button Align Center
30. Theming with Jetpack Compose
31. Need Material Design Guideline? Check http://material.io/
32. Theme your app with MaterialTheme MaterialTheme is a Composable function that reflects the styling principles from Google Material Design.
33. Theme your Text with themeTextStyle Update your text font, size, and color with style. Example: set Text with H2 size
34. Custom Theme? Why Not. Customize and build your own theme. Prepare custom color & composable function.
35. Custom Theme? Why Not. Let’s Implement your CustomTheme
36. And Then... Conclusion?
37. WOW. Saya bisa menghasilkan 1.000 USD / hari membuat layout Android TANPA keluar rumah menggunakan XML dengan Jetpack Compose SKIP TO LIVE CODE > klub-ngoding.site
38. LIVE CODE Keep Calm & Let me Code
39. Thank You Everyone!