Compose Camp#3 - Practical Hands-on

1. Introduction with Kotlin
Quick Quiz
Composables
This work is licensed under the Apache 2.0 License
Hands-on DiceRoller App
Modifier

2. What is Jetpack Compose?
Jetpack Compose is a modern toolkit for building
Android UIs. Compose simplifies and accelerates
UI development on Android with less code,
powerful tools, and intuitive Kotlin capabilities.
With Compose, you can build your UI by defining
a set of functions, called composable functions,
that take in data and emit UI elements.

3. 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.

4. Composable Function Naming
The compose function that returns nothing and bears
the @Composable annotation MUST be named using pascal case. Pascal case
refers to a naming convention in which the first letter of each word in a compound
word is capitalized. The difference between pascal case and camel case is that all
words in pascal case are capitalized. In camel case, the first word is not
capitalized.
The Compose function:
• MUST be a noun: DoneButton()
• NOT a verb or verb phrase: DrawTextField()
• NOT a nouned preposition: TextFieldWithLink()
• NOT an adjective: Bright()
• NOT an adverb: Outside()
• Nouns MAY be prefixed by descriptive adjectives: RoundIcon()

5. @Annotations
Annotations are means of attaching extra information to code. This information helps
tools like the Jetpack Compose compiler, and other developers understand the app's code.
An annotation is applied by prefixing its name(the annotation) with the @ character at the
beginning of the declaration, you are annotating.
Annotations with parameters

6. This work is licensed under the Apache 2.0 License
UI Hierarchy
There are three basic, standard layout elements in Compose
are Column, Row and Box composables. Column, Row and Box are
composable functions that take composable content as arguments, so you can
place items inside these layout elements.
For example, each child element inside a Row composable is placed
horizontally next to each other in a row.

7. This work is licensed under the Apache 2.0 License
Box layout is used to stack elements on top of one
another. Box layout also lets us configure the
specific alignment of the elements that it contains.
Box Layout
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 needs to
accept a modifier as a parameter.
Modifier

8. This work is licensed under the Apache 2.0 License

9. This work is licensed under the Apache 2.0 License
Stargazing at State
QUIZ

10. This work is licensed under the Apache 2.0 License
What is Jetpack Compose?
a.A Modern toolkit to develop
Android UI
b.Toolkit to design libraries
c.Database Interface
d.Plugin to build APK

11. This work is licensed under the Apache 2.0 License
Composable functions are the basic building block of Compose.?
a. True
b. False

12. This work is licensed under the Apache 2.0 License
What annotation is used to annotate a Composable function?
a.@Annotation
b.@ComposableFunction
c.@Composable
d.@Preview

13. This work is licensed under the Apache 2.0 License
The three basic standard layout elements in Compose are
Choose as many answers as you see fit.
a.Column
b.Row
c.Text
d.Box

14. This work is licensed under the Apache 2.0 License
In Kotlin, the entrypoint of a program is the ___.
a.Println() statement
b.val Variable
c.main() function
d.return() statement

15. This work is licensed under the Apache 2.0 License
Which function is used is to load a drawable image resource.
a.The stringResource() function
b.The painterResource() function
c.The ImageResource() function
d.The loadResource() function

16. This work is licensed under the Apache 2.0 License
It is considered best practice to declare a variable that will not change using var instead of val.
a.True
b.False

17. This work is licensed under the Apache 2.0 License
The Box layout stacks the UI elements on top of one another.
a. True
b. False

18. This work is licensed under the Apache 2.0 License
What parameter is used to align the child element to the beginning of the parent?
a.Alignment.End
b.Alignment.Begin
c.Alignment.Start
d.Alignment.Top

19. This work is licensed under the Apache 2.0 License
Lets Build Something…