Compose Camp #1.pptx

This work is licensed under the Apache 2.0 License
Kotlin Fundamentals

Compose apps are written in
the Kotlin programming
language.
Kotlin is the language that the
majority of professional Android
developers use to build apps.

Kotlin Playground
Write and run Kotlin code in
the browser.
https://play.kotlinlang.org/

Program
A series of instructions for a
computer to perform some
action.
fun main() {
println("Hello, world!")
}
Output:
Hello, world!

Functions
A function is a segment of a program that
performs a specific task.
You can have many functions in your program

main Function
The main function is the entry
point, or starting point, of the
program.
Start here
fun main() {
println("Hello, world!")
}
Output:
Hello, world!

Defining a function
Functions begin with the fun
keyword.
fun displayIntroduction() {
}

Defining a function
Functions have a name so that
they can be called.
}

Defining a function
Functions need a set of parentheses
after the function name in order to
surround the function inputs or
parameters.
}

Defining a function
The curly braces make up the
function body and contain the
instructions needed to execute
a task.
// Body
}

Putting it together
fun main() {
firstFunction() // Call a function
}
// Define a function
fun firstFunction() {
// Function Body
}

Basic data types
Kotlin Data type What kind of data it can contain Example literal values
String Text
“Add contact”
“Search”
Int Whole integer number
32
-59873
Double Decimal number
2.0
-37123.9999
Float
Decimal number (less precise than a Double).
Has an f or F at the end of the number.
5.0f
-1630.209f
Boolean
true or false. Use this data type when there
are only two possible values.
true
false

A container for a single piece of
data.
Variables

val keyword
Use when you expect the variable value will
not change.
Example: name
var keyword
Use when you expect the variable value can
change.
Example: age
Defining a variable

Defining a variable
Variables start with a var or val
keyword.
fun main() {
val name: String = "Bhavye"
var age: Int = 20
}

Defining a variable
All variables must have a name.
fun main() {
val name: String = "Meghan"
var age: Int = 28
}

Defining a variable
Data type is the type of data
that the variable holds.
fun main() {
var age: Int = 28
}

Defining a variable
The initial value is the value that
is stored in the variable.
fun main() {
var age: Int = 28
// val name = “Meghan”
// var age = 28
}

Defining a variable
If we want to define a variable
with no initial value.
fun main() {
val name: String
var age: Int
// var age => Error
}

Compose Camp Ses 3
Android Basics with Compose:
Unit 1&2

Welcome back
Any questions?

TOPIC TIME
Presentation 12:00 - 12:30
Download and Install Android Studio 12:30- 1:30
Create your first Android app 1:30 - 2:30
Run your first app on the Android emulator 2:30 - 2:45
Connect your physical Android device 2:45 - 3:00
Wrap up 3:00 - 3:15
Today’s Schedule

Android Basics
with Compose
Course

Unit 1: Your first
Android App

Session Overview

Android Studio

Android Studio - Project View

Android Studio - Code View

Android Studio - Design View

Android Studio - Split View

Android Studio - Greeting function

Greeting()
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}

Greeting()
@Composable
Text(text = "Howdy $name!")
}

DefaultPreview()
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
FirstComposeProjectTheme {
Greeting("Android")
}
}

DefaultPreview()
@Composable
Greeting("Meghan")
}
}

Greeting()
@Composable
Text(text = "Howdy $name!")
}
@Composable
Greeting("Meghan")
}
}

App for the day

The Android Emulator emulates Android devices on your computer
so that you can test your application on a variety of devices and
Android API levels without needing to have each physical device.
What is an emulator?

Creating an emulator

Let’s get started
Let’s get started

Pet Adoption App

PetName()
@Composable
fun PetName() {
}

PetName()
@Composable
fun PetName() {
Text()
}

PetName()
@Composable
fun PetName() {
Text(text = "Bark! My name is Koda.")
}

DefaultPreview()
@Composable
PetAdoptionTheme {
PetName()
}
}

DefaultPreview()

PetInformation()
@Composable
fun PetInformation() {
Text(text = "I'm three years old and I like to bark.")
}

Column and Row
Column
Row

PetAdoptionColumn()
@Composable
fun PetAdoptionInformation() {
Column {
}
}

PetAdoptionColumn()
@Composable
Column {
PetName()
PetInformation()
}
}

DefaultPreview()
@Composable
PetAdoptionTheme {
PetAdoptionInformation()
}
}

Resources()

Accessing Resources
R.drawable.koda

PetImage()
@Composable
fun PetImage() {
}

PetImage()
@Composable
fun PetImage() {
val image =
}

PetImage()
@Composable
fun PetImage() {
val image = painterResource(...)
}

PetImage()
@Composable
fun PetImage() {
val image = painterResource(id = R.drawable.koda)
}

PetImage()
@Composable
fun PetImage() {
Image(painter = ,
contentDescription = )
}

PetImage()
@Composable
fun PetImage() {
Image(painter = image,
contentDescription = )
}

PetImage()
@Composable
fun PetImage() {
Image(painter = image,
contentDescription = "Gray and white dog with a
collar sitting on a bed")
}

PetAdoptionInformation()
@Composable
Column {
PetImage()
PetName()
PetInformation()
}
}

g.co/android/basics-compose
Start here:

Unit 1: Pathway 2

Have a Question? Just ask
Work on Unit 1, Pathway 2

Thank You
And congrats!

Share what you’ve
learned using
.#ComposeCamp
on Twitter
For a chance to be
featured by Android,
submit your tips on
learning Compose to
goo.gle/compose-tips

Learn More
All the learning resources and code will be
Shared

See you at the next Compose Camp Session!
Optional resources to check out:
● Official Android Developers Site: developer.android.com
● Official Android Developers Blog (for announcements)
● Android Developers Medium Blog (for more technical articles)
● Android Developers YouTube channel
● Follow @AndroidDev on Twitter
● Follow @AndroidDev on LinkedIn
● Subscribe to the Android Developer Newsletter

Compose Camp #1.pptx

More Related Content

Similar to Compose Camp #1.pptx

Compose Camp #1.pptx

Editor's Notes