vwiki

User Tools

Site Tools

Trace:
android_basics_with_compose

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
android_basics_with_compose [2025/05/24 09:07] – [Pathway 2: Setup Android Studio] kalaschnikowandroid_basics_with_compose [2025/12/26 16:53] (current) – [Unit 3: Display lists and use Material Design] kalaschnikow
Line 1: Line 1:
 +====== Android Basics with Compose ======
 +
 +[[https://developer.android.com/courses/android-basics-compose/course|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
 +    * [[https://developer.android.com/courses/jetpack-compose/course|Jetpack Compose for Android Developers]] (pure Compose?)
 +    * [[https://hyperskill.org/courses/18|Kotlin Core]] by JetBrains Academy
 +
 +
 +  * Kotlin Playground: 
 +    * https://play.kotlinlang.org/
 +    * the same: https://developer.android.com/training/kotlinplayground
 +
 +===== Unit 1: Your first Android app =====
 +
 +==== Pathway 1: Introduction to programming in Kotlin ====
 +
 +https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-1
 +
 +=== 1. Before you begin ===
 +  * ...
 +  * multiple "paths" to complete the course:
 +    * for newbies
 +    * for existing programmers
 +  * ...
 +
 +=== 2. Welcome to Android Basics with Compose ===
 +...
 +
 +=== 3. Your first program in Kotlin ===
 +
 +  * Playground: 
 +    * https://play.kotlinlang.org/
 +    * the same: https://developer.android.com/training/kotlinplayground
 +
 +<code kotlin>
 +fun main() {
 +    println("Hello, world!")
 +}
 +</code>
 +
 +  * 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 [[https://developer.android.com/kotlin/style-guide|Kotlin style guide]] for formatting and code conventions to follow when coding in Kotlin.
 +  * Troubleshooting is the process of resolving errors in your code.
 +
 +=== 4. Create and use variables in Kotlin ===
 +
 +<code>
 +val count: Int = 2
 +</code>
 +
 +Type inference:
 +<code>
 +val count = 2
 +</code>
 +
 +If you need to update the value of a variable, declare the variable with the Kotlin keyword var, instead of val:
 +<code>
 +var cartTotal = 0
 +cartTotal = 20
 +println("Total: $cartTotal")
 +</code>
 +
 +
 +  * 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:
 +<code kotlin>
 +fun main() {
 +    val numberOfPhotos = 100
 +    val photosDeleted = 10
 +    println("$numberOfPhotos photos")
 +    println("$photosDeleted photos deleted")
 +    println("${numberOfPhotos - photosDeleted} photos left")
 +}
 +</code>
 +
 +=== 5. Create and use functions in Kotlin ===
 +
 +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.
 +<code kotlin>
 +birthdayGreeting(name="Rex", age=2)
 +// the same:
 +birthdayGreeting(age=2, name="Rex")
 +</code>
 +  * You can specify a default argument that lets you omit the argument when you call a function.
 +<code kotlin>
 +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)
 +
 +</code>
 +
 +=== 6. Practice Problems: Kotlin Basics ===
 +
 +...
 +
 +More Kotlin exercises can be found in [[https://hyperskill.org/courses/18|Kotlin Core track by JetBrains Academy]].
 +
 +=== 7. What's next ===
 +
 +(Optional video)
 +
 +
 +==== Pathway 2: Setup Android Studio ====
 +
 +https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-2
 +
 +=== 1. Introduction to Android Studio ===
 +... 
 +
 +=== 2. Download and install Android Studio ===
 +...
 +
 +=== 3. Create your first Android app ===
 +...
 +
 +  * 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.
 +
 +
 +=== 4. Run your first app on the Android Emulator ===
 +...
 +
 +=== 5. How to connect your Android device ===
 +...
 +
 +
 +==== Pathway 3. Build a basic layout ====
 +
 +https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3
 +
 +=== 1. Intro to Jetpack Compose ===
 +
 +(Optional video)
 +
 +
 +=== 2. Design a birthday card app ===
 +
 +(Optional video)
 +
 +=== 3. Build a simple app with text composables ===
 +
 +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.
 +<code>
 +Row(
 +    content = {
 +        Text("Some text")
 +        Text("Some more text")
 +    }
 +)
 +
 +// the same in trailing lambda syntax:
 +Row {
 +    Text("Some text")
 +    Text("Some more text")
 +}
 +</code>
 +...
 +
 +=== 4. Add images to your Android app ===
 +
 +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.
 +
 +=== 5. Practice: Compose Basics ===
 +...
 +
 +=== 6. Project: Create a business card app ===
 +
 +...
 +
 +
 +===== Unit 2: Building app UI =====
 +
 +https://developer.android.com/courses/android-basics-compose/unit-2
 +
 +  * [[Pathway 1 Kotlin fundamentals|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|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|Pathway 3: Interact with UI and state]] 
 +    * (my conspectus of https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-3 )
 +
 +===== Unit 3: Display lists and use Material Design =====
 +
 +https://developer.android.com/courses/android-basics-compose/unit-3
 +
 +  * [[Pathway 1 More Kotlin fundamentals|Pathway 1: More Kotlin fundamentals]]
 +    * (my conspectus of [[https://developer.android.com/courses/pathways/android-basics-compose-unit-3-pathway-1|More Kotlin fundamentals]])
 +  * [[Pathway 2 Build a scrollable list|Pathway 2: Build a scrollable list]]
 +    * (my conspectus of [[https://developer.android.com/courses/pathways/android-basics-compose-unit-3-pathway-2|Build a scrollable list]])
 +  * [[Pathway 3 Build beautiful apps|Pathway 3: Build beautiful apps]]
 +    * (my conspectus of [[https://developer.android.com/courses/pathways/android-basics-compose-unit-3-pathway-3|Build beautiful apps]])
 +
 +===== Unit 4: Navigation and app architecture =====
 +
 +...
 +
 +===== Unit 5: Connect to the internet =====
 +
 +...
 +
 +===== Unit 6: Data persistence =====
 +
 +...
 +
 +===== Unit 7: WorkManager =====
 +
 +...
 +
 +===== Unit 8: Views and Compose =====
 +
 +...
 +
 +
 +
 +
 +
 +
 +