Android Basics with Compose

Android Basics with Compose an online course by Google

• Course goals:
  • Understand the fundamentals of Kotlin and Jetpack Compose
  • Build a series of basic Android apps
  • Use Android app architecture, Jetpack libraries and work with data according to Modern Android Development practices

• Also interesting courses
  • Jetpack Compose for Android Developers (pure Compose?)
  • Kotlin Core by JetBrains Academy

• Kotlin Playground:
  • https://play.kotlinlang.org/
  • the same: https://developer.android.com/training/kotlinplayground

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-1

• …
• multiple “paths” to complete the course:
  • for newbies
  • for existing programmers
• …

…

• Playground:
  • https://play.kotlinlang.org/
  • the same: https://developer.android.com/training/kotlinplayground

fun main() {
    println("Hello, world!")
}

• A Kotlin program requires a main function as the entry point of the program.
• To define a function in Kotlin, use the fun keyword, followed by the name of the function, any inputs enclosed in parentheses, followed by the function body enclosed in curly braces.
• The name of a function should follow camel case convention and start with a lowercase letter.
• Use the println() function call to print some text to the output.
• Refer to the Kotlin style guide for formatting and code conventions to follow when coding in Kotlin.
• Troubleshooting is the process of resolving errors in your code.

val count: Int = 2

Type inference:

val count = 2

If you need to update the value of a variable, declare the variable with the Kotlin keyword var, instead of val:

var cartTotal = 0
cartTotal = 20
println("Total: $cartTotal")

• A variable is a container for a single piece of data.
• You must declare a variable first before you use it.
• Use the val keyword to define a variable that is read-only where the value cannot change once it's been assigned.
• Use the var keyword to define a variable that is mutable or changeable.
• In Kotlin, it's preferred to use val over var when possible.
• To declare a variable, start with the val or var keyword. Then specify the variable name, data type, and initial value. For example: val count: Int = 2
• With type inference, omit the data type in the variable declaration if an initial value is provided.
• Some common basic Kotlin data types include: Int, String, Boolean, Float, and Double.
• Use the assignment operator (=) to assign a value to a variable either during declaration of the variable or updating the variable.
• You can only update a variable that has been declared as a mutable variable (with var).
• Use the increment operator (++) or decrement operator (–) to increase or decrease the value of an integer variable by 1, respectively.
• Use the + symbol to concatenate strings together. You can also concatenate variables of other data types like Int and Boolean to Strings.

• Calculations in String templates:

fun main() {
    val numberOfPhotos = 100
    val photosDeleted = 10
    println("$numberOfPhotos photos")
    println("$photosDeleted photos deleted")
    println("${numberOfPhotos - photosDeleted} photos left")
}

By default, if you don't specify a return type, the default return type is Unit. Unit means the function doesn't return a value (equivalent of void in other languages).

Any function that doesn't return a value implicitly returns Unit.

• Functions are defined with the fun keyword and contain reusable pieces of code.
• Functions help make larger programs easier to maintain and prevent the unnecessary repetition of code.
• Functions can return a value that you can store in a variable for later use.
• Functions can take parameters, which are variables available inside a function body.
  • Warning: Unlike in some languages, such as Java, where a function can change the value passed into a parameter, parameters in Kotlin are immutable. You cannot reassign the value of a parameter from within the function body.
• Arguments are the values that you pass in when you call a function.
• You can name arguments when you call a function. When you use named arguments, you can reorder the arguments without affecting the output.

birthdayGreeting(name="Rex", age=2)
// the same:
birthdayGreeting(age=2, name="Rex")

• You can specify a default argument that lets you omit the argument when you call a function.

fun birthdayGreeting(name:String="Rex", age:Int): String {
  // function body here...
}
 
// call function with two parameters
birthdayGreeting("Rex", 2)
 
// call function with only one parameter, but delivers the same result:
birthdayGreeting(age=2)

…

More Kotlin exercises can be found in Kotlin Core track by JetBrains Academy.

(Optional video)

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-2

…

…

…

• The setContent() function within the onCreate() function is used to define your layout through composable functions. All functions marked with the @Composable annotation can be called from the setContent() function or from other Composable functions. The annotation tells the Kotlin compiler that this function is used by Jetpack Compose to generate the UI.

• You add the @Composable annotation before the function.
• @Composable function names are capitalized.
• @Composable functions can't return anything.

• The GreetingPreview() function is a cool feature that lets you see what your composable looks like without having to build your entire app. To enable a preview of a composable, annotate with @Composable and @Preview. The @Preview annotation tells Android Studio that this composable should be shown in the design view of this file.

…

• Summary
  • …
  • Composable functions are like regular functions with a few differences: functions names are capitalized, you add the @Composable annotation before the function, @Composable functions can't return anything.
  • A Modifier is used to augment or decorate your composable.

…

…

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3

(Optional video)

(Optional video)

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables

• Jetpack Compose is a modern toolkit for building Android UIs.
• Compose - UI written in Kotlin
  • ⇒ simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin capabilities.
  • build your UI by defining a set of functions, called composable functions, that take in data and describe UI elements.
• Composable:
  • Describes some part of your UI.
  • Doesn't return anything.
  • Takes some input and generates what's shown on the screen.
  • All composable functions must have @Composable annotation.
• Annotations
  • without parameters
    • @Preview
  • with parameters
    • @Preview(showBackground = true)
• Composable naming
  • MUST be a noun
  • PascalCase, NOT camelCase
• Composable preview
  • must provide default value for any parameter to preview it

…

• scalable pixels
  • sp → scalable pixels
  • dp → density independent pixels

…

• UI hierachy (Parent ↔ Child)
  • Box, Column, Row etc

…

• Trailing lambda syntax
  • If the function is the last parameter in (an another) function, instead of putting the function inside the parentheses, you can place it outside the parentheses in curly braces.

Row(
    content = {
        Text("Some text")
        Text("Some more text")
    }
)

// the same in trailing lambda syntax:
Row {
    Text("Some text")
    Text("Some more text")
}

…

https://developer.android.com/codelabs/basic-android-kotlin-compose-add-images?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-add-images#9

…

• The Resource Manager tab in Android Studio helps you add and organize your images and other resources.
• An Image composable is a UI element that displays images in your app.
• An Image composable should have a content description to make your app more accessible.
• Use Box layout to stack elements on top of one another.
• ContentScale.Crop parameter scaling, which scales the image uniformly to maintain the aspect ratio so that the width and height of the image are equal to, or larger than, the corresponding dimension of the screen.
• Text that's shown to the user, such as the birthday greeting, should be extracted into a string resource to make it easier to translate your app into other languages.

…

…

https://developer.android.com/courses/android-basics-compose/unit-2

• Pathway 1: Kotlin fundamentals
  • (my conspectus of https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-1 )
• Pathway 2: Add a button to an app
  • (my conspectus of https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-2 )
• Pathway 3: Interact with UI and state
  • (my conspectus of https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-3 )

https://developer.android.com/courses/android-basics-compose/unit-3

• Pathway 1: More Kotlin fundamentals
  • (my conspectus of More Kotlin fundamentals)
• Pathway 2: Build a scrollable list
  • (my conspectus of Build a scrollable list)
• Pathway 3: Build beautiful apps
  • (my conspectus of Build beautiful apps)

…

…

…

…

…