Session 1 ppt.pptx

WELCOMETOCOMPOSECAMP2022
Hosted
By:

This work is licensed under the Apache 2.0 License
Compose Camp is a hands-on introduction to
learning how you can build Android apps with
Jetpack Compose.
What is Compose Camp?

• Basic computer literacy
• Basic math skills
• Computer & headphones
• Internet connection
• (Optional) Android device & USB cable
Prerequisites

• Build your first Android apps
• Set up Android Studio on your computer
• Learn the basics of the Kotlin programming language
• Learn Jetpack Compose
• Discover resources to continue learning
Compose Camp Learning Objectives

TOPIC TIME
Presentation 6:00 - 6:05
Pathway 1 6:05 - 6:35
QNA for pathway 1 6:35 - 6:40
Pathway 2 6:40 - 7:00
QNA for Pathway 2 7:00 - 7:05
Pathway 3 7:05 - 7:25
QNA for Pathway 3 7:25 - 7:30
Quiz 7:30 - 7:35
Today’s Schedule

A Pathway

Take a Quiz

Earn badges!

Google Developer
Profile
Carrie Sawyer

Omveer Panwar
DGI
Aritra Saha
SIT
Aniket Sen
JGEC

Compose Camp
Android Basics with Compose:
Unit 1 Pathway 1

Unit 1: Your first
Android App

Pathway Overview

Kotlin Programming
Language
Use Kotlin to start writing Android apps.
Kotlin helps developers be more
productive.

Kotlin Playground
Write and run Kotlin code in
the browser.

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

Code
Step by step instructions for what
the computer should do.
fun main() {
}
Output:
Hello, world!

main Function
The main function is the entry
point, or starting point, of the
program.
Start here
fun main() {
}
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 or
only a single one.

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

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

Putting it together
// We will fill this out!
}
Output:
Hi I’m Meghan and I am 28 years old

A container for a single piece of data.
Variables

My name is and I am years
old
Variables
name age

My name is and I am years old
Variables
Name value: Meghan
Age value: 28
Output:
My name is Meghan and I
am 28 years old
Name value: Janet
Age value: 49
Output:
My name is Janet and I am
49 years old
name age

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

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.
val name: String = "Meghan"
var age : Int = 28
}

Defining a variable
All variables must have a name.
var age: Int = 28
}

Defining a variable
Data type is the type of data
that the variable holds.
var age: Int = 28
}

Defining a variable
The initial value is the value that
is stored in the variable.
var age: Int = 28
}

Putting it together
val name = "Meghan"
val age = 28
println("Hi I'm $name and I am $age years old")
}

Putting it together
fun main() {
displayIntroduction()
}
val name = "Meghan"
val age = 28
println("Hi I'm $name and I am $age years old")
}
Output:
Hi I’m Meghan and I am 28 years old

Pathway 1 Completed!

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

Unit 1: Pathway 1

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

Compose Camp
Unit 1 Pathway 2

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")
}
}

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

Favorite Color App

Running your app on
a physical device

Unit 1: Pathway 2

Have a Question?
Just ask

Compose Camp
Unit 1 Pathway 3

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

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()
}
}

Unit 1: Pathway 3

Have a Question?
Just ask

What'smorefunthana
quickendsessionquiz?

Go to: www.slido.com

Enter Code: 3911153
and enter your name

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

Learn More

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

Session 1 ppt.pptx

More Related Content

Similar to Session 1 ppt.pptx

Recently uploaded

Session 1 ppt.pptx

Editor's Notes