firstlook-into-jetpackcompose.pdf

Transcript

1. First Look Into Android Jetpack Compose
2. SU MYAT @sumyathtun9 Wave Money Wave Money has brought financial inclusion to millions of Burmese through the largest nationwide agent network of Wave Shops and WavePay app.
3. Let’s get into JetPack Compose
4. So what’s is JetPack Compose
5. ‣ An unbundled Android UI toolkit designed to simplify UI development ‣ Borrowing the concepts from React, Litho, Vue, Flutter, and more
6. Android UI Toolkit ??
8. The existing UI System Vs. The new Compose Library
9. In 1) Unbundled from Android Platform
10. ‣ The existing UI system is platform dependent ‣ Compose library itself is made into a Jetpack component, that means it's a platform independent library
11. In 2) All are Kotlin API
12. ‣ Perviously, have to deal with various file (style.xml, animations.xml, and so on) ‣ XML describe the UI layout itself, then use Java/Kotlin for control logic ‣ Now Koltin has made it possible to write a declarative UI in a programming language instead of xml
13. In 3) Composable
 composition over inheritance
14. ‣ It’s cumbersome write a custom view in the existing UI System ‣ It’s inheritance (for example, TextView.class has ~30k line of code because inherit View.class ‣ Composable makes everything composable
15. <TextView android:layout_width="wrap_content" android:layout_height=“wrap_content" android:padding="16dp" android:text="Hello World"/> @Composable fun MyText() { Wrap { Padding(30.dp) { Text("Hello World") } } }
16. Changes ‣ TextView to Text() ‣ The android:padding property of TextView becomes Padding wraps Text Advantages ‣Text only responsible for text rendering ‣Padding aslo only handles padding
17. In 4) Destination of Date Flow
18. ‣ Previously, a stateful CheckBox when is clicked, it’s state become checked = true, this class updates itself and expose a listener to listen to this state change ‣ Compose Library is one of the design principle 1.the data model can now be fed into the Compose component 2. the compose doesn't change it's own state by itself, but instead, it only exposes the listener, and it's the application's responsibility to update the state
19. In 4) Get More Debugging
20. ‣ Built using all of kotlin code ‣ Debugger and breakpoint will work
21. Let’s make it our hands on Dirty :)
22. 1) TextView vs Text()
23. @Composable fun Greeting(name: String) { Padding(10.dp) { Text(text = "Hello $name") } } override fun onCreate(savedInstanceState: Bundle?) { setContent { CraneWrapper { MaterialTheme { Greeting() } } } }
24. 2) ListView vs Column()
25. @Composable fun SimpleComposable() { Padding(30.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Baseline) { for (i in 1..10) { Text("Count : $i") } } } }
26. @Composable fun Greeting(names: List<String>) { Padding(10.dp) { Column{ if(names.isEmpty()) { Text("No people") }else{ for(name in names){ Text("Hello * $name *") } } } } } Greeting( arrayListOf<String>("Honey","Smith", "John","Brad","Chilly","Kerry","Andrew"))
27. @Model class CounterModel { var counter = +state { 0 } var header = "Counter App" fun add() { counter.value++ } fun subtract() { counter.value-- } } @Composable fun CounterAppComposable(counterModel: CounterModel) { Column { androidx.ui.layout.HeightSpacer(10.dp) CounterHeader(counterModel) androidx.ui.layout.HeightSpacer(10.dp) AddSubtractButtons(counterModel) androidx.ui.layout.HeightSpacer(10.dp) CounterLabel(counterModel) } } @Composable fun CounterHeader(counterModel: CounterModel) { Text(text = counterModel.header,style = +androidx.ui.material.themeTextStyle { h3 }) } @Composable fun AddSubtractButtons(counterModel: CounterModel) { Button( text = "Add", onClick = { counterModel.add() }) androidx.ui.layout.HeightSpacer(10.dp) Button( text = "Subtract", onClick = { counterModel.subtract() }) } @Composable fun CounterLabel(counterModel: CounterModel) { Text(text = "Clicks: ${counterModel.counter.value}",style = +androidx.ui.material.themeTextStyle { h5 }) }
28. 3) Recycler View
 how am I feel
30. @Composable fun MyComposeApp() { val dividerColor = Color(0xFFC6C6C6.toInt()) VerticalScroller { Column{ mainPagesEntries.forEachIndexed { index, page -> HeightSpacer(height = 10.dp) Text(page.title) HeightSpacer(height = 10.dp) Button("Click", onClick = { TODO()}) HeightSpacer(height = 10.dp) Divider(color = dividerColor, height = 0.5.dp) } } } } val mainPagesEntries = listOf( Page("AppBarDemo"), Page("TextDemo"), Page(“ButtonDemo”) } class MyAdapter(private val myDataset: Array<String>) : RecyclerView.Adapter<MyAdapter.MyViewHol der>() { class MyViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyAdapter.MyViewHolder { val textView = LayoutInflater.from(parent.context) .inflate(R.layout.my_tex t_view, parent, false) as TextView return MyViewHolder(textView) } override fun onBindViewHolder(holder: MyViewHolder, position: Int) { holder.textView.text = myDataset[position] } override fun getItemCount() = myDataset.size }
31. Keep Learning …. Declarative UI Patterns (Google I/O'19) Compose From First Principle Diving into Jetpack Compose
32. How to get into … ‣ Installation ‣ Jetpack Compose haven’t publish yet, all dependecies prebuilt. ‣ Download link ‣ Run ./studiow