Jetpack Compose: The new Way of Building Android UI

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Transcript

1. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 1 Jetpack compose: The new way of building Android UI 1 1 Umar Saidu Auna Software Engineer, gidimo tech community Organizer umarauna February 19, 2022
2. GDG Location In the beningi beginning 1.0 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/hello_world_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello World" android:textSize="25sp" android:gravity="center" android:textColor="@color/blue_600" /> </LinearLayout>
3. GDG Location In the beningi beginning 1.1 class Beginning : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.begining) val textTexView: TextView = findViewById(R.id.hello_world_text_view) textTexView.setOnClickListener { Toast.makeText(applicationContext, "Hello World", Toast.LENGTH_LONG).show() } } }
4. GDG Location In the beningi beginning 1.2
5. GDG Location Now… Text( text = “Hello World”, style = MaterialTheme.typography.body2, color = Color.White, modifier = Modifier.padding(8.dp) )
6. Getting interesting right?
7. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 7 Challenges 7 7
8. findViewById() – XML val textTexView: TextView = findViewById(R.id.hello_world_text_view)
9. data binding and view binding //initialize it private lateinit var binding:BottomSheetBuyUnitBinding //bind it to Fragment binding = BottomSheetBuyUnitBinding.inflate(inflater, container,false) return binding.root //make use of it binding.backImageView.setOnClickListener { dismiss() }
10. APIs are showing signs of ageing - v3, v7, andridx
11. Recyclerview <RecyclerView/> <LayoutItem/> RecyclerViewAdapter() ViewHolder() OnItemClickListerner()
12. View Class keeps getting bigger and bigger - View Class has over 31110 lines of code - All the Views(TextView, Button, ImageView, RadioButton etc) inherits from the View Class - Becomes difficult to maintain
13. More Challenges
15. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 15 Jetpack Compose 15 15
16. Modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. Jetpack Compose
19. 1. React 2. Litho 3. Vue.js 4. Flutter ... but it’s written completely in Kotlin and is fully compatible with the existing Android view system. Inspired by
20. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 20 Declarative UI 20 20
21. Declarative UI is a UI that’s designed in a declarative way. You describe what it should be like. Declarative UI
22. This pattern is an emerging trend that allows the developers to design the user interface based on the data received. Declarative Imperative This is the most common paradigm; it involves having a separate prototype/model of the application’s UI.
23. This design paradigm makes use of one programming language to create an entire application. Declarative Imperative A good example is XML layouts in Android. We design the widgets and components which are then rendered for the user to see and interact with.
24. This on the other hand focuses on the what Declarative Imperative This design focuses on the how rather than the what
27. “Everything is a function”
28. Compose -> UI as Function View/XML -> UI as Objects Compose Everywhere
29. • Simplify • Less code • Fix what’s broken Goal
30. • Layouts ◦ Column ◦ Row ◦ Flex(column/row) ◦ Box(similar to Framelayout) ◦ ConstraintLayout Components
31. • Built-in Components ◦ Button ◦ Text ◦ Checkbox ◦ Navigation Drawer ◦ Navigation Bar ◦ Scaffold ◦ AppBar Components
32. • Custom View ◦ Layout ◦ Draw Components
33. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 33 Getting Started 33 33
34. New Project
35. Existing Project(gradle:app)
36. Existing Project(gradle:module)
37. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 37 Jetpack Compose Basics 37 37
38. 1. Regular function annotated with @Composable. 2. Enables your function to call other @Composable functions within it. Compose function
39. 1. Use setContent to define layout 2. Call composable function instead of XML file Compose in Android app
40. 1. Set Preview Content with @Preview annotation. 2. Build Project. Preview Change with @Preview
41. Live Preview in Android Studio
42. 1. Are used to modify the composable UI elements for example adding margin, padding or defining the width and height. 2. Available modifiers are:background(), clickable, scrollable, draggable, swipeable, width(), height(), size(), padding() . . . . . Modifiers
45. 3 2 1
46. Mix Compose UI with any Kotlin function, example: for loop Compose in Kotlin
48. A layout composable that places its children in a vertical sequence. COlumn - Vertical Arrangements
49. GDG Location Column Column( modifier = Modifier.padding(16.dp) ) { Text( text = "Happy Meal", style = TextStyle( fontSize = 26.sp ) ) Spacer(modifier = Modifier.padding(top = 10.dp)) Text( text = "800 Calories", style = TextStyle( fontSize = 17.sp ) ) Spacer(modifier = Modifier.padding(top = 10.dp)) Text( text = "$5.99", style = TextStyle( color = Color(0XFF85BB65), fontSize = 17.sp ) ) }
50. A layout composable that places its children in a horizontal sequence. ROw - Horizontal Arrangements
51. GDG Location ROw Row( modifier = Modifier .fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween ) { Text( text = "Happy Meal", style = TextStyle( fontSize = 26.sp ) ) Text( text = "$5.99", style = TextStyle( color = Color(0XFF85BB65), fontSize = 17.sp ), modifier = Modifier.align(Alignment.CenterVertically ) ) }
52. A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It’s similar to a Recyclerview in the classic Android View system. LAzy COlumn
53. @Composable fun Planets(planets: List<Planets>) { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme .colors.background) { Column() { Text( text = stringResource (R.string.planets), style = MaterialTheme .typography.h4, modifier = Modifier.padding(10.dp) ) val planet = planets.maxByOrNull { it.moon } Text( text = getGreetingMessage (planet), style = MaterialTheme .typography.h6, modifier = Modifier.padding(10.dp) ) LazyColumn() { items(planets) { planet -> PlanetImageList (planet) } } } } }
56. Components we converted to compose
57. Components we converted to compose
58. • goo.gle/compose-pathway • goo.gle/compose-samples • goo.gle/compose-docs • goo.gle/compose-slack • goo.gle/compose-feedback • https://developer.android.com/jetpack/compose/tutorial • https://foso.github.io/Jetpack-Compose-Playground/material/button/ Codelabs
60. This work is licensed under the Apache 2 license. Android Development with Kotlin v1.0 6 0 Questions? Thank you! 6 0 6 0 Umar Saidu Auna Software Engineer, gidimo tech community Organizer umarauna