First Look Into Android Jetpack Compose 

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. 

Let’s get into JetPack Compose 

So what’s is JetPack Compose 

‣ An unbundled Android UI toolkit designed to simplify UI development ‣ Borrowing the concepts from React, Litho, Vue, Flutter, and more 

Android UI Toolkit ?? 

No content

The existing UI System Vs. The new Compose Library 

In 1) Unbundled from Android Platform 

‣ The existing UI system is platform dependent ‣ Compose library itself is made into a Jetpack component, that means it's a platform independent library 

In 2) All are Kotlin API 

‣ 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 

In 3) Composable
 composition over inheritance 

‣ 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 

@Composable fun MyText() { Wrap { Padding(30.dp) { Text("Hello World") } } } 

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 

In 4) Destination of Date Flow 

‣ 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 

In 4) Get More Debugging 

‣ Built using all of kotlin code ‣ Debugger and breakpoint will work 

Let’s make it our hands on Dirty :) 

1) TextView vs Text() 

@Composable fun Greeting(name: String) { Padding(10.dp) { Text(text = "Hello $name") } } override fun onCreate(savedInstanceState: Bundle?) { setContent { CraneWrapper { MaterialTheme { Greeting() } } } } 

2) ListView vs Column() 

@Composable fun SimpleComposable() { Padding(30.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Baseline) { for (i in 1..10) { Text("Count : $i") } } } } 

@Composable fun Greeting(names: List) { Padding(10.dp) { Column{ if(names.isEmpty()) { Text("No people") }else{ for(name in names){ Text("Hello * $name *") } } } } } Greeting( arrayListOf("Honey","Smith", "John","Brad","Chilly","Kerry","Andrew")) 

@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 }) } 

3) Recycler View
 how am I feel 

No content

@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) : RecyclerView.Adapter() { 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 } 

Keep Learning …. Declarative UI Patterns (Google I/O'19) Compose From First Principle Diving into Jetpack Compose 

How to get into … ‣ Installation ‣ Jetpack Compose haven’t publish yet, all dependecies prebuilt. ‣ Download link ‣ Run ./studiow 

No content