Introduction to Jetpack Compose (By: Tauheed Ali) - Android Seekho Season 2

Talk by Tauheed Ali (https://www.linkedin.com/in/tauheed007/) at Android Seekho Season 2 by GDG Lahore.

Transcript

1. This work is licensed under the Apache 2.0 License
2. This work is licensed under the Apache 2.0 License https://www.linkedin.com/in/tauheed007
3. This work is licensed under the Apache 2.0 License What is Android Seekho? #Android Seekho is an online self-study program to help developers to learn Android Development using the first-class support of Jetpack Compose * Note: One session will utilize Kotlin Koans material
4. This work is licensed under the Apache 2.0 License Jetpack Compose for Android Developers
5. This work is licensed under the Apache 2.0 License • What is Compose ??? Jetpack Compose
6. This work is licensed under the Apache 2.0 License Thinking in Compose
7. This work is licensed under the Apache 2.0 License Construct UI by describing what, not how.
8. This work is licensed under the Apache 2.0 License goo.gle/compose-samples
9. This work is licensed under the Apache 2.0 License You are not a coder or developer you are problem solver code is just your tool so don't spend all your time only thinking about code instead invest time into understanding the problem and exploring other tools you can add to your tool box then tackle the problem with a fresh perspective ProTip for developers
10. This work is licensed under the Apache 2.0 License
11. This work is licensed under the Apache 2.0 License Survey answer Image Text Radio button
12. This work is licensed under the Apache 2.0 License <LinearLayout android:orientation=“horizontal” > <ImageView android:id=”@+id/answer_image” ... /> <TextView android:id=”@+id/answer_text” ... /> <RadioButton android:id=”@+id/answer_radio_button” ... /> </LinearLayout> <!-- survey_answer.xml -->
13. This work is licensed under the Apache 2.0 License class SurveyQuestionActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val image = findViewById(R.id.answer_image) val text = findViewById(R.id.answer_text) val radioButton = findViewById(R.id.answer_radio_button) // ... } } // SurveyQuestionActivity.kt
14. This work is licensed under the Apache 2.0 License class SurveyQuestionActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { // ... image.setImage(...) text.setText(...) // ... } } // SurveyQuestionActivity.kt
15. This work is licensed under the Apache 2.0 License
16. This work is licensed under the Apache 2.0 License
17. This work is licensed under the Apache 2.0 License
18. This work is licensed under the Apache 2.0 License
19. This work is licensed under the Apache 2.0 License
20. This work is licensed under the Apache 2.0 License Survey answer Image Text Radio button
21. This work is licensed under the Apache 2.0 License Composable functions Composable functions are the basic building block of a UI in Compose. A composable function: • Describes some part of your UI. • Doesn't return anything. • Takes some input and generates what's shown on the screen. • Might emit several UI elements.
22. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(false, onClick = { /* … */ }) } } // SurveyAnswer.kt
23. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(false, onClick = { /* … */ }) } } // SurveyAnswer.kt
24. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(false, onClick = { /* … */ }) } } // SurveyAnswer.kt
25. This work is licensed under the Apache 2.0 License Construct UI by describing what, not how.
26. This work is licensed under the Apache 2.0 License Event handler UI element onClick()
27. This work is licensed under the Apache 2.0 License UI State
28. This work is licensed under the Apache 2.0 License UI 2 State 2
29. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { /* … */ }) } } // SurveyAnswer.kt
30. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { selected = !selected }) } } // SurveyAnswer.kt
31. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { selected = !selected }) } } // SurveyAnswer.kt
32. Describe what, not how UI elements are functions State controls UI Events control State 1 2 3 4
33. This work is licensed under the Apache 2.0 License Code is the enemy for developers every developer should write as little code as possible here's why more code means more potential bugs more code means more code to maintain more code means more effort to rewrite later strive for less more readable code always ProTip for developers
34. This work is licensed under the Apache 2.0 License Layout Modifiers Modifiers are used to decorate or add behavior to Jetpack Compose UI elements. For example, you can add backgrounds, padding or behavior to rows, text, or buttons. To set them, a composable or a layout needs to accept a modifier as a parameter.
35. This work is licensed under the Apache 2.0 License Column
36. This work is licensed under the Apache 2.0 License Row
37. This work is licensed under the Apache 2.0 License Compose Toolkit
38. This work is licensed under the Apache 2.0 License goo.gle/compose-samples
39. This work is licensed under the Apache 2.0 License
40. This work is licensed under the Apache 2.0 License
41. This work is licensed under the Apache 2.0 License MaterialTheme( colorScheme = MyAppsColorScheme, typography = MyAppsTypography, shapes = MyAppsShapes ) { // Content goes here }
42. This work is licensed under the Apache 2.0 License
43. This work is licensed under the Apache 2.0 License
44. This work is licensed under the Apache 2.0 License
45. This work is licensed under the Apache 2.0 License
46. This work is licensed under the Apache 2.0 License
47. This work is licensed under the Apache 2.0 License Scaffold( topBar = { SmallTopAppBar(/* ... */) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingActionButton(/* ... */) }, content = { /* ... */ } )
48. This work is licensed under the Apache 2.0 License SurveyTopAppBar SurveyBottomBar Question
49. This work is licensed under the Apache 2.0 License
50. This work is licensed under the Apache 2.0 License
51. This work is licensed under the Apache 2.0 License
52. This work is licensed under the Apache 2.0 License
53. This work is licensed under the Apache 2.0 License
54. This work is licensed under the Apache 2.0 License Surface Surface in Jetpack Compose is a composable that represents a visual container or surface on which you can place other UI elements. It serves as a canvas for building and organizing your user interface.
55. This work is licensed under the Apache 2.0 License Surface { Text("Hello Compose") } Hello Compose
56. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.primary, ) { Text("Hello Compose") } Hello Compose
57. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(8.dp), ) { Text("Hello Compose") } Hello Compose
58. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(8.dp), border = BorderStroke(2.dp, MaterialTheme.colorScheme.outline ) ) { Text("Hello Compose") } Hello Compose
59. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(8.dp), border = BorderStroke(2.dp, MaterialTheme.colorScheme.surfaceVariant ), shadowElevation = 8.dp, tonalElevation = 8.dp, ) { Text("Hello Compose") } Hello Compose
60. This work is licensed under the Apache 2.0 License
61. This work is licensed under the Apache 2.0 License
62. goo.gle/compose-material-ref m3.material.io
63. This work is licensed under the Apache 2.0 License Standard layouts - How to organize components
64. This work is licensed under the Apache 2.0 License Row { Component1() Component2() Component3() } 1 2 3 Row
65. This work is licensed under the Apache 2.0 License 1 2 3 Column Column { Component1() Component2() Component3() }
66. This work is licensed under the Apache 2.0 License 2 1 3 Box Box { Component1() Component2() Component3() }
67. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
68. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( verticalAlignment = Alignment.CenterVertically ) { /* ... */ } }
69. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { /* ... */ } }
70. goo.gle/compose-layouts-docs
71. This work is licensed under the Apache 2.0 License Modifiers So far, we’ve covered styling, components, and layouts. But how do we control things like sizes, padding, and other appearances? You do that by using Modifiers. Modifiers allow you to decorate or augment a composable. Every composable function in the compose toolkit accepts a Modifier as a parameter. Modifiers can be chained together until you achieve your desired
72. This work is licensed under the Apache 2.0 License Text("Hello Compose") Hello Compose
73. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) ) Hello Compose
74. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) ) Hello Compose
75. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) ) Hello Compose
76. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .alpha(0.5f) ) Hello Compose
77. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .alpha(0.5f) .clickable { // Called when Text clicked } ) Hello Compose
78. This work is licensed under the Apache 2.0 License Box(Modifier.size(150.dp)) { Text("Hello Compose") } Hello Compose
79. This work is licensed under the Apache 2.0 License Box(Modifier.size(150.dp)) { Text( "Hello Compose!", Modifier.align( Alignment.BottomEnd ) ) } Hello Compose
80. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row(...) { Image(answer.image) Text(answer.text) RadioButton(/* … */) } } Desired Current
81. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( Modifier.fillMaxWidth(), /* ... */ ) { Image(answer.image) Text(answer.text) RadioButton(/* ... */) } } Desired Current
82. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( Modifier.fillMaxWidth() .padding(16.dp), /* ... */ ) { Image(answer.image) Text(answer.text) RadioButton(/* ... */) } } Desired Current
83. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Surface( border = BorderStroke( 1.dp, MaterialTheme.colorScheme.outline ), shape = MaterialTheme.shapes.small ) { Row(/* ... */) { } } } Desired Current
84. goo.gle/compose-modifiers goo.gle/compose-modifiers-list
85. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Surface( border = BorderStroke( 1.dp, MaterialTheme.colorScheme.outline ), shape = MaterialTheme.shapes.small ) { Row(Modifier.fillMaxWidth().padding(16.dp)) { Image(answer.image) Text(answer.text) RadioButton(/* … */) } } }
86. This work is licensed under the Apache 2.0 License
87. This work is licensed under the Apache 2.0 License Giveaway
88. Roadmap to Compose :-
89. This work is licensed under the Apache 2.0 License https://www.linkedin.com/in/tauheed007 The End
90. This work is licensed under the Apache 2.0 License THANK YOU Happy Learning!!