-Kotlin Camp Unit2.pptx

This work is licensed under the Apache 2.0 License

Learn fundamentals of Kotlin, object-oriented
programming, and lambdas.
Kotlin Fundamentals

‘IF KEYWORD’ +
‘CONDITION YOU NEED TO
EVALUATE’
BOOLEAN EXPRESSION
Expressions combine values, variables,
and operators that return a value.
Boolean expressions return a boolean
value.
Use If/else statements to express
conditions

Use a when statement for multiple branches
In Kotlin, when you deal with multiple branches, you can use the
when statement instead of the if/else statement because it
improves readability, which refers to how easy it is for human
readers, typically developers, to read the code. It's very important
to consider readability when you write your code because it's likely
that other developers need to review and modify your code
throughout its lifetime

Use nullable variables
1)What is null?
In Unit 1, you learned that when you declare a variable, you need to assign it
a value immediately. For example, when you declare a favorite Actor
variable, you may assign it a "Sandra Oh" string value immediately.
However, what if you don't have a favorite actor? You might want to assign
the variable a "Nobody" or "None" value. This isn't a good approach because
your program interprets the favorite Actor variable to have a "Nobody" or "None"
value rather than no value at all. In Kotlin, you can use null to indicate that
there's no value associated with the variable.

Handle nullable variables
Previously, you learned to use the . operator to access methods and
properties of non-nullable variables. In this section, you learn how to
use it to access methods and properties of nullable variables
fun main() {
var favoriteActor: String = "Sandra Oh"
println(favoriteActor.length)
}

Add a button to an app
Learn how to respond to a button
click in an Android app.

Define a class
1)A class definition starts with the class
keyword, followed by a name and a set of curly
braces.
2)The part of the syntax before the opening curly
brace is also referred to as the class header. In
the curly braces, you can specify properties and
functions for the class.

Create an instance of a class
1)To use an object, you create the object and assign it to a variable,
similar to how you define a variable. You use the val keyword to create
an immutable variable and the var keyword for a mutable variable.
2)The val or var keyword is followed by the name of the variable, then
an = assignment operator, then the instantiation of the class object. You
can see the syntax in this diagram:

Define class methods
Call a method on an object

Define class properties
Properties are basically variables that are defined in the class
body instead of the function body. This means that the syntax
to define properties and variables are identical.

● Define a constructor
1. Default constructor 2. parameterized constructor
Syntax :

● syntax to specify a visibility modifier for a property
Visibility modifiers

● syntax to specify a visibility modifier for a method

Kotlin Practice :
CODE :
OUTPUT:

. Create an interactive Dice Roller app

● Create the layout infrastructure

● Use the debugger in Android Studio

● Run the app with the debugger

● Practice: Click behavior
App overview

COMPOSE CAMP
SESSION 2

Pathway 3:
Interact with UI
and state

Activity 1: Intro to state in Compose
Activity 2:Calculate a custom tip
Activity 3:Write automated tests
Activity 4:Project: Create an Art Space app
Create a tip calculator app that calculates the tip from user input in the app.

Activity 1: Intro to state in Compose
What you'll learn
● How to think about state in a UI.
● How Compose uses state to display data.
● How to add a text box to your app.
● How to hoist a state.
What you'll build
● A tip-calculator app called Tip Time that calculates a tip amount based
on the service amount.

Create a project.
<resources>
<string name="app_name">Tip Time</string>
<string name="calculate_tip">Calculate Tip</string>
<string name="cost_of_service">Cost of Service</string>
<string name="tip_amount">Tip amount: %s</string>
</resources>

Add a screen title
override fun onCreate(savedInstanceState: Bundle?) {
//...
setContent {
TipTimeTheme {
Surface(
//...
) {
TipTimeScreen()
}
}
}
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
TipTimeTheme {
TipTimeScreen()
}
}
Column(
modifier = Modifier.padding(32.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {}
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.sp
import androidx.compose.ui.Alignment
Text(
text = stringResource(R.string.calculate_tip),
fontSize = 24.sp,
modifier = Modifier.align(Alignment.CenterHorizontally)
)

import androidx.compose.material.TextField
@Composable
fun TipTimeScreen() {
Column(
) {
Text(
...
)
Spacer(Modifier.height(16.dp))
EditNumberField()
}
}

6. Use state in Compose
val amountInput = "0"

7. The composition
@Composable
fun EditNumberField() {
var amountInput = mutableStateOf("0")
TextField(
value = amountInput.value,
onValueChange = { amountInput.value = it },
)
}

8. Use remember function to save state
Warning: This code may throw the error that you see in this image regarding the getValue() extension function:
If so, manually add the getValue and setValue imports into the import block at the beginning of the file as you can see in
this image:

Warning: This code may throw the error that you see in this image regarding the getValue() extension function:
If so, manually add the getValue and setValue imports into the import block at the beginning of the file as you
can see in this image:

@Composable
var amountInput by remember { mutableStateOf("") }
TextField(
value = amountInput,
onValueChange = { amountInput = it },
)
}

9. State and recomposition in action

10. Modify the appearance

@Composable
TextField(
label = { Text(stringResource(R.string.cost_of_service)) },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}

11. Display the tip amount

private fun calculateTip(
amount: Double,
tipPercent: Double = 15.0
): String {
val tip = tipPercent / 100 * amount
return NumberFormat.getCurrencyInstance().format(tip)
}

@Composable
val amount = amountInput.toDoubleOrNull() ?: 0.0
val tip = calculateTip(amount)
TextField(
singleLine = true,
)
}

Show the calculated tip amount

@Composable
Column(
//...
) {
Text(
text = stringResource(R.string.tip_amount, ""),
modifier = Modifier.align(Alignment.CenterHorizontally),
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
EditNumberField()
}
}

12. State hosting
Understand stateful versus stateless composables
You should hoist the state when you need to:
● Share the state with multiple composable functions.
● Create a stateless composable that can be reused in your app.

@Composable
val tip = calculateTip(amount)
Column(
) {
Text(
fontSize = 24.sp,
)
EditNumberField(value = amountInput,
onValueChange = { amountInput = it }
)
Text(
text = stringResource(R.string.tip_amount, tip),
modifier = Modifier.align(Alignment.CenterHorizontally),
fontSize = 20.sp,
)
}
}

@Composable
fun EditNumberField(
value: String,
onValueChange: (String) -> Unit
) {
TextField(
value = value,
onValueChange = onValueChange,
singleLine = true,
)
}

13. Get the solution
To download the code for the finished activity,
you can download the repository as a zip file, unzip it, and open it in Android Studio.

Conclusion.
Congratulations! You completed this codelab and learned how to use state in a
Compose app!
Summary
● State in an app is any value that can change over time.
● The Composition is a description of the UI built by Compose when it executes
composables. Compose apps call composable functions to transform data into UI.
● Initial composition is a creation of the UI by Compose when it executes
composable functions the first time.
● Recomposition is the process of running the same composables again to update
the tree when their data changes.
● State hoisting is a pattern of moving state up to make a component stateless.

Activity 4: calculate a custom tip

What you'll learn
● How to add an action button to a virtual keyboard.
● How to set up keyboard actions.
● What a Switch composable is and how to use it.
● What the Layout Inspector is.
What you'll build
● A Tip Time App that calculates tip amounts based on the user's inputted
cost of service and tip percentage.

Starter app overview

4. Add a tip-percentage text
field
@Composable
@StringRes label: Int,
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier
) {
TextField(
//...
label = { Text(stringResource(label)) },
//...
)
}

EditNumberField(
label = R.string.how_was_the_service,
value = "",
onValueChange = { }
)
EditNumberField(
value = tipInput,
onValueChange = { tipInput = it }
)

@Composable
var tipInput by remember { mutableStateOf("") }
val tipPercent = tipInput.toDoubleOrNull() ?: 0.0
val tip = calculateTip(amount, tipPercent)
Column(
) {
Text(
fontSize = 24.sp,
)
EditNumberField(
label = R.string.bill_amount,
onValueChange = { amountInput = it }
)
EditNumberField(
value = tipInput,
)
Text(
text = stringResource(R.string.tip_amount, tip),
modifier =
Modifier.align(Alignment.CenterHorizontally),
fontSize = 20.sp,
)
}
}

5. Set an action button
@Composable
//...
) {
TextField(
//...
keyboardOptions = KeyboardOptions.Default.copy(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Next
)
)
}

@Composable
@StringRes label: Int,
keyboardOptions: KeyboardOptions,
value: String,
onValueChange: (String) -> Unit
){
TextField(
//...
keyboardOptions = keyboardOptions
)
} EditNumberField(
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
value = tipInput,
)

7. Add a switch

@Composable
fun RoundTheTipRow(roundUp: Boolean, onRoundUpChanged: (Boolean) -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
.size(48.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(stringResource(R.string.round_up_tip))
Switch(
modifier = Modifier
.fillMaxWidth()
.wrapContentWidth(Alignment.End),
checked = roundUp,
onCheckedChange = onRoundUpChanged,
colors = SwitchDefaults.colors(
uncheckedThumbColor = Color.DarkGray
)
)
}
}

1. Thumb
2. Track

private fun calculateTip(amount: Double, tipPercent: Double = 15.0, roundUp:
Boolean): String {
var tip = tipPercent / 100 * amount
if (roundUp)
tip = kotlin.math.ceil(tip)
return NumberFormat.getCurrencyInstance().format(tip)
}

8. Get the solution code
To download the code for the finished codelab,
you can download the repository as a zip file, unzip it, and open it in Android
Studio.

9. Conclusion
Congratulations! You added custom tip functionality to your Tip Time App. Now your app lets users input a
custom tip percentage and round up the tip amount. Share your work on social media with #AndroidBasics!

Activity 5: Write automated text
What you'll learn
● What automated tests in Android do.
● Why automated tests are important.
● What a local test is and what it's used for.
● What an instrumentation test is and what it's used for.
● How to write local tests for Android code.
● How to write instrumentation tests for Android apps.
● How to run automated tests.
What you'll build
● A local test
● An instrumentation test

Why automated tests are important
At first, it might seem like you don't really need tests in your app, but testing is needed in apps of all
sizes and complexities.
To grow your codebase, you need to test existing functionality as you add new pieces, which is only
possible if you have existing tests. As your app grows, manual testing takes much more effort than
automated testing. Furthermore, once you start working on apps in production, testing becomes critical
when you have a large user base. For example, you must account for many different types of devices
running many different versions of Android.
Instrumentation tests
In the context of Android development, an instrumentation test is a UI test. Instrumentation tests let you test
parts of an app that depend on the Android, and its platform APIs and services.
Unlike local tests, UI tests launch an app or part of an app, simulate user interactions, and check whether the
app reacted appropriately. Throughout this course, UI tests are run on a physical device or emulator.

Conclusion
Tests are a critical component of software quality control. As you continue
to build Android apps, ensure that you write tests alongside your app
features to ensure that your apps work properly throughout the
development process.

-Kotlin Camp Unit2.pptx

Recommended

Recommended

More Related Content

Similar to -Kotlin Camp Unit2.pptx

Similar to -Kotlin Camp Unit2.pptx (20)

Recently uploaded

Recently uploaded (20)

-Kotlin Camp Unit2.pptx