Webuni webinar – @stewemetal stewemetal The Future of Android Development István Juhos Jetpack Compose 

Webuni webinar – @stewemetal How we write UI now? • View objects inflated from XML layout files • For more than 10 years now 🗓 

Webuni webinar – @stewemetal How we write UI now? • View objects inflated from XML layout files • For more than 10 years now 🗓 • Tons and tons of other UI-related XMLs • Drawables/colors + selectors • Themes + styles • Custom styling attributes 

Webuni webinar – @stewemetal How we write UI now? • View objects inflated from XML layout files • For more than 10 years now 🗓 • Tons and tons of other UI-related XMLs • Drawables/colors + selectors • Themes + styles • Custom styling attributes • View Binding / Data Binding • Code generation and a pinch of pixie dust… ✨ • @BindingAdapters 

Webuni webinar – @stewemetal Imperative 👑 

Webuni webinar – @stewemetal Imperative 👑 “Imperative programming focuses on describing how a program operates step by step, rather than on high-level descriptions of its expected results.” - Wikipedia 

Webuni webinar – @stewemetal Imperative 👑 • Objects created exactly how we declare them inflate 

Webuni webinar – @stewemetal Declarative 📣 The Future (is now!) 

Webuni webinar – @stewemetal Declarative 📣 • ❌ Writing how the UI should be built • ✅ Writing what the UI should look like, and let the framework figure out how to achieve the result ConstraintLayout( modifier = Modifier .background(MaterialTheme.colors.background) .height(60.dp) .fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp), ) { Text( text = item.text, color = Grey, ) Icon( painterResource(id = drawable.ic_chevron_right), ) } * Not actual working code! * 

Webuni webinar – @stewemetal What is Compose? 

Webuni webinar – @stewemetal What is Compose? • A general-purpose, multiplatform compiler and runtime for managing a tree of nodes of any type https://jakewharton.com/a-jetpack-compose-by-any-other-name/ 

Webuni webinar – @stewemetal What is Compose? • A general-purpose, multiplatform compiler and runtime for managing a tree of nodes of any type AND ALSO • A UI toolkit and DSL to render app UI on Android and Desktop https://jakewharton.com/a-jetpack-compose-by-any-other-name/ 

Webuni webinar – @stewemetal What is Compose UI? • Declarative • Like React (Native), Flutter, and SwiftUI • Component-based • Unbundled • Kotlin-only • The UI is a function of the current UI state 

Webuni webinar – @stewemetal • Declarative • Like React (Native), Flutter, and SwiftUI • Component-based • Unbundled • Kotlin-only • The UI is a function of the current UI state f(state) UI = What is Compose UI? 

Webuni webinar – @stewemetal • We can use Composable functions to describe UI components based on the current UI state • Two-way interoperability • Works with existing View-based UI and vice versa • AndroidView composable for Views in Compose • ComposeView for Composables in Views What is Compose UI? f(state) UI = 

Webuni webinar – @stewemetal A simple list – View vs. Compose Check out the first demo project here: https://github.com/stewemetal/android-view-vs-compose 

Webuni webinar – @stewemetal A simple list – Android View 

Webuni webinar – @stewemetal A simple list – Android View ConstraintLayout 

Webuni webinar – @stewemetal A simple list – Android View MaterialToolbar RecyclerView 

Webuni webinar – @stewemetal A simple list – Android View List item view… List item view… 

Webuni webinar – @stewemetal A simple list – Android View List item view

Webuni webinar – @stewemetal A simple list – Android View Layout of a Fragment - fragment_view.xml 

Webuni webinar – @stewemetal A simple list – Android View Fragment - ViewFragment.kt class ViewFragment : Fragment() { lateinit var adapter: ViewItemAdapter override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View = inflater.inflate(R.layout.fragment_view, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) adapter = ViewItemAdapter() val list = view.findViewById(R.id.list) list.adapter = adapter adapter.submitList( mutableListOf().apply { (1..30).forEach { add(Item("View item $it")) } } ) } } 

Webuni webinar – @stewemetal A simple list – Android View Adapter - ViewItemAdapter.kt class ViewItemAdapter : ListAdapter(ItemDiffUtil()) { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder = ItemViewHolder( LayoutInflater.from(parent.context) .inflate(R.layout.layout_item, parent, false) ) override fun onBindViewHolder(holder: ItemViewHolder, position: Int) { holder.bind(getItem(position)) } inner class ItemViewHolder(itemView: View) : ViewHolder(itemView) { private val itemText: TextView = itemView.findViewById(R.id.itemText) fun bind(item: Item) { itemText.text = item.text } } } class ItemDiffUtil : DiffUtil.ItemCallback() { override fun areItemsTheSame(oldItem: Item, newItem: Item): Boolean { return oldItem == newItem } override fun areContentsTheSame(oldItem: Item, newItem: Item): Boolean { return oldItem == newItem } } 

Webuni webinar – @stewemetal A simple list – Jetpack Compose 

Webuni webinar – @stewemetal A simple list – Jetpack Compose 

Webuni webinar – @stewemetal A simple list – Jetpack Compose ComposeView (interoperability) 

Webuni webinar – @stewemetal A simple list – Jetpack Compose Composable Composable Composable 

Webuni webinar – @stewemetal Interoperability - fragment_compose.xml A simple list – Jetpack Compose 

Webuni webinar – @stewemetal Interoperability - fragment_compose.xml A simple list – Jetpack Compose Interoperability with Views 

Webuni webinar – @stewemetal A simple list – Jetpack Compose List item composable - ListItem.kt } @Composable fun ListItem( item: Item, ) { // ... 

Webuni webinar – @stewemetal A simple list – Jetpack Compose List item composable - ListItem.kt @Composable fun ListItem( item: Item, ) { // ... } @Composable fun ListItem( ) f() 

Webuni webinar – @stewemetal A simple list – Jetpack Compose List item composable - ListItem.kt } @Composable fun ListItem( item: Item, ) { // ... f(state) @Composable fun ListItem( item: Item, ) { // ... } 

Webuni webinar – @stewemetal A simple list – Jetpack Compose List item composable - ListItem.kt @Composable fun ListItem( item: Item, ) { // ... } f(state) UI = @Composable fun ListItem( item: Item, ) { // ... } 

Webuni webinar – @stewemetal A simple list – Jetpack Compose List item composable - ListItem.kt } @Composable fun ListItem( item: Item, ) { // ... 

Webuni webinar – @stewemetal @Composable fun ListItem( item: Item, ) { ConstraintLayout( modifier = Modifier .background(MaterialTheme.colors.background) .height(60.dp) .fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp), ) { // ... } A simple list – Jetpack Compose List item composable - ListItem.kt 

Webuni webinar – @stewemetal @Composable fun ListItem( item: Item, ) { ConstraintLayout( modifier = Modifier .background(MaterialTheme.colors.background) .height(60.dp) .fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp), ) { val (text, chevron) = createRefs() Text( text = item.text, color = Grey, fontSize = 16.sp, modifier = Modifier .constrainAs(text) { top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(chevron.start) bottom.linkTo(parent.bottom) width = Dimension.fillToConstraints }, ) Icon( painterResource(id = drawable.ic_chevron_right), tint = Grey, contentDescription = "Item arrow forward", modifier = Modifier .constrainAs(chevron) { top.linkTo(parent.top) start.linkTo(text.end, margin = 16.dp) end.linkTo(parent.end) bottom.linkTo(parent.bottom) width = Dimension.value(40.dp) height = Dimension.value(40.dp) }, ) } A simple list – Jetpack Compose List item composable - ListItem.kt 

Webuni webinar – @stewemetal @Composable fun ListItem( item: Item, ) { ConstraintLayout( modifier = Modifier .background(MaterialTheme.colors.background) .height(60.dp) .fillMaxWidth() .padding(horizontal = 16.dp, vertical = 8.dp), ) { val (text, chevron) = createRefs() Text( text = item.text, color = Grey, fontSize = 16.sp, modifier = Modifier .constrainAs(text) { top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(chevron.start) bottom.linkTo(parent.bottom) width = Dimension.fillToConstraints }, ) Icon( painterResource(id = R.drawable.ic_chevron_right), tint = Grey, contentDescription = "Item arrow forward", modifier = Modifier .constrainAs(chevron) { top.linkTo(parent.top) start.linkTo(text.end, margin = 16.dp) end.linkTo(parent.end) bottom.linkTo(parent.bottom) width = Dimension.value(40.dp) height = Dimension.value(40.dp) }, ) } A simple list – Jetpack Compose List item composable - ListItem.kt val (text, chevron) = createRefs() Text( text = item.text, color = Grey, fontSize = 16.sp, modifier = Modifier .constrainAs(text) { top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(chevron.start) bottom.linkTo(parent.bottom) width = Dimension.fillToConstraints }, ) 

Webuni webinar – @stewemetal @Composable fun ComposeContent() { ComposeDemoTheme { Scaffold( topBar = { TopAppBar( title = { Text("Compose implementation") }, ) }, content = { LazyColumn { items((1..30).toList()) { ListItem(Item("Compose item $it")) } } }, ) } } A simple list – Jetpack Compose Content composable - ComposeContent.kt 

Webuni webinar – @stewemetal @Composable fun ComposeContent() { ComposeDemoTheme { Scaffold( topBar = { TopAppBar( title = { Text("Compose implementation") }, ) }, content = { LazyColumn { items((1..30).toList()) { ListItem(Item("Compose item $it")) } } }, ) } } A simple list – Jetpack Compose Content composable - ComposeContent.kt LazyColumn { items((1..30).toList()) { ListItem(Item("Compose item $it")) } } The equivalent of a RecyclerView + Adapter 

Webuni webinar – @stewemetal @Composable fun ComposeContent() { ComposeDemoTheme { Scaffold( topBar = { TopAppBar( title = { Text("Compose implementation") }, ) }, content = { LazyColumn { items((1..30).toList()) { ListItem(Item("Compose item $it")) } } }, ) } } A simple list – Jetpack Compose Content composable - ComposeContent.kt 

Webuni webinar – @stewemetal Fragment - ComposeFragment.kt class ComposeFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View = inflater.inflate(R.layout.fragment_compose, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) view.findViewById(R.id.composeView) .apply { setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed) setContent { ComposeContent() } } } } A simple list – Jetpack Compose 

Webuni webinar – @stewemetal Fragment - ComposeFragment.kt A simple list – Jetpack Compose class ComposeFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View = inflater.inflate(R.layout.fragment_compose, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) view.findViewById(R.id.composeView) .apply { setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed) setContent { ComposeContent() } } } } view.findViewById(R.id.composeView) .apply { setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed) setContent { ComposeContent() } } Interoperability with Views 

Webuni webinar – @stewemetal A simple list – View vs. Compose • View • Imperative • 2 layout XMLs • Binding code in a Fragment • RecyclerView adapter • Compose • Declarative • 2 composable functions in Kotlin • 1 layout in XML (interop) • Interop code in a Fragment 

Webuni webinar – @stewemetal • Start here, please 🙏 Thinking in Compose https://developer.android.com/jetpack/compose/mental-model 

Webuni webinar – @stewemetal • UI components in Kotlin – as Composable functions • Themes in Kotlin – as Composable functions • and objects in the composition • Value resources in Kotlin • Drawables, strings, dimensions etc. can still come from the usual XML sources thanks to interop features • The UI is composed based on the current state and recomposed when a new state is provided Thinking in Compose UI 

Webuni webinar – @stewemetal • Initial composition • Calling Composables for the first time • Keeping track of the Composition Composition, recomposition https://developer.android.com/jetpack/compose/lifecycle 

Webuni webinar – @stewemetal • Initial composition • Calling Composables for the first time • Keeping track of the Composition • Recomposition • When the app state changes, Compose re-executes composables and updates the Composition Composition, recomposition https://developer.android.com/jetpack/compose/lifecycle 

Webuni webinar – @stewemetal • Initial composition • Calling Composables for the first time • Keeping track of the Composition • Recomposition • When the app state changes, Compose re-executes composables and updates the Composition Composition, recomposition https://developer.android.com/jetpack/compose/lifecycle 

Webuni webinar – @stewemetal • Use Composable functions to describe UI component hierarchies based on state data that can change over time UI state in Compose UI @Composable fun CustomButton( text: String, loading: Boolean, enabled: Boolean, onClick: () -> Unit, ) { . . . } 

Webuni webinar – @stewemetal • Use Composable functions to describe UI component hierarchies based on state data that can change over time CustomButton( // . . . loading = false, enabled = false, ) UI state in Compose UI Custom Button 

Webuni webinar – @stewemetal • Use Composable functions to describe UI component hierarchies based on state data that can change over time CustomButton( // . . . loading = false, enabled = true, ) UI state in Compose UI Custom Button 

Webuni webinar – @stewemetal • Use Composable functions to describe UI component hierarchies based on state data that can change over time CustomButton( // . . . loading = true, enabled = true, ) UI state in Compose UI 

Webuni webinar – @stewemetal A life-like project 

Webuni webinar – @stewemetal A life-like project (🐴) 

Webuni webinar – @stewemetal How does Compose fit into our lives (and code)? Let’s find out! https://github.com/stewemetal/composehydrationtracker A life-like project (🐴) 

Webuni webinar – @stewemetal Existing project? No problem! • Composables in existing views • Activities • Fragments • Views in a Composition • Two-way interoperability • Compose works well with existing View-based UI • We can reuse our existing (custom) UI elements 

Webuni webinar – @stewemetal Existing project? No problem! • Composables in existing views • Activities • Fragments • Views in a Composition • Two-way interoperability • Compose works well with existing View-based UI • We can reuse our existing (custom) UI elements • Migrate at your own pace and educate your team! 

Webuni webinar – @stewemetal 📚Resources for learning📚 

Webuni webinar – @stewemetal Resources • The official docs • https://developer.android.com/jetpack/compose/documentation • https://developer.android.com/jetpack/compose/mental-model • https://developer.android.com/jetpack/compose/state • https://developer.android.com/jetpack/compose/lifecycle • Android Developers videos • https://www.youtube.com/c/AndroidDevelopers/search?query=co mpose 

Webuni webinar – @stewemetal Resources • The Compose Runtime, Demystified • Leland Richardson, KotlinConf ‘19 • https://youtu.be/6BRlI5zfCCk 

Webuni webinar – @stewemetal Resources • Jetpack Compose internals – Jorge Castillo • https://jorgecastillo.dev/book/ • Pretty theory-heavy! 

Webuni webinar – @stewemetal Resources • Jetpack Compose basics codelab • https://developer.android.com/codelabs/jetpack- compose-basics 

Webuni webinar – @stewemetal Resources • Jetpack Compose Samples • https://github.com/android/compose-samples 

Webuni webinar – @stewemetal Resources • Android Developers Backstage (ADB) podcast • https://adbackstage.libsyn.com/ • Starting with EP 164 • https://adbackstage.libsyn.com/episode-164-jetpack- compose-compilation 

Webuni webinar – @stewemetal There’s so much more to learn about! • Compose lifecycle and how composition works • State handling • Side effects • Navigation • Animations • Accessibility • Custom theming • Integration testing • . . . 

Webuni webinar – @stewemetal stewemetal • Less code with the declarative approach • Faster iteration, faster implementation • Easier UI testing • Existing code/resources supported Photo by Xavi Cabrera The Future of Android Development István Juhos Jetpack Compose