More Related Content
Similar to Compose Camp S1.pptx
Similar to Compose Camp S1.pptx (20)
Recently uploaded
Recently uploaded (20)
Compose Camp S1.pptx
- 1. This work is licensed under the Apache 2.0 License
- 2. This work is licensed under the Apache 2.0 License Day 1 of Compose Camp ● Kotlin Basics ● Installing Android studio ● Build a Basic Layout
- 3. This work is licensed under the Apache 2.0 License Maruthi R GDSC LEAD SIT Camp leaders Abhishek S Compose Camp Facilitator
- 4. This work is licensed under the Apache 2.0 License What is Compose Camp? Community-organized events focused around how to build Android apps using Jetpack Compose, where attendees get hands-on coding experience with Compose.
- 5. This work is licensed under the Apache 2.0 License Less code Do more with less code And avoid entire classes Of bugs. Code is simpler, easier to maintain Why Jetpack Compose Intuitive Just describe your UI, and compose takes care of the rest. As app state changes, your UI automatically updates Accelerates Development Compatible with all your existing code so you can adopt when and where you want iterate fast with live previews and full Android Studio support Powerful Create beautiful apps with direct access to the Android platform APIs and built-in support for Material Design, Dark Theme, animations, and more.
- 6. This work is licensed under the Apache 2.0 License ● Basic computer literacy ● Basic math skills ● (Optional) Android device & USB cable Prerequisites
- 7. This work is licensed under the Apache 2.0 License ● Set up Android Studio on your computer ● Learn the basics of the Kotlin programming language ● Learn Jetpack Compose ● Learn to create Android App Compose Camp Learning Objectives
- 8. This work is licensed under the Apache 2.0 License Kotlin Kotlin is an open-source statically typed programming language that targets the JVM, Android, JavaScript and Native.
- 9. This work is licensed under the Apache 2.0 License Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. Jetpack Compose
- 10. This work is licensed under the Apache 2.0 License Ok! Lets get Started
- 11. This work is licensed under the Apache 2.0 License Kotlin Playground Write and run Kotlin code in the browser. https://play.kotlinlang.org/
- 12. This work is licensed under the Apache 2.0 License Program A series of instructions for a computer to perform some action. fun main() { println("Hello, world!") } Output: Hello, world!
- 13. This work is licensed under the Apache 2.0 License 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!
- 14. Functions A function is a segment of a program that performs a specific task. You can have many functions in your program
- 15. This work is licensed under the Apache 2.0 License Defining a function Functions begin with the fun keyword. fun displayIntroduction() { }
- 16. This work is licensed under the Apache 2.0 License Defining a function Functions have a name so that they can be called. fun displayIntroduction() { }
- 17. This work is licensed under the Apache 2.0 License Defining a function Functions need a set of parentheses after the function name in order to surround the function inputs or parameters. fun displayIntroduction() { }
- 18. This work is licensed under the Apache 2.0 License Defining a function The curly braces make up the function body and contain the instructions needed to execute a task. fun displayIntroduction() { // Body }
- 19. This work is licensed under the Apache 2.0 License Putting it together fun main() { // code } Output: Welcome to Compose Camp!
- 20. This work is licensed under the Apache 2.0 License A container for a single piece of data. Variables
- 21. This work is licensed under the Apache 2.0 License My name is and I am years old Variables name age
- 22. This work is licensed under the Apache 2.0 License My name is and I am years old Variables Name value: Abhishek Age value: 19 Output: My name is Abhishek and I am 19 years old Name value: Janet Age value: 49 Output: My name is Janet and I am 49 years old name age
- 23. This work is licensed under the Apache 2.0 License 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
- 24. This work is licensed under the Apache 2.0 License 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
- 25. This work is licensed under the Apache 2.0 License Defining a variable Variables start with a var or val keyword. fun main() { val name: String = "Abhi" var age: Int = 19 }
- 26. This work is licensed under the Apache 2.0 License Defining a variable All variables must have a name. fun main() { val name: String = "Abhi" var age: Int = 19 }
- 27. This work is licensed under the Apache 2.0 License Defining a variable Data type is the type of data that the variable holds. fun main() { val name: String = "Abhi" var age: Int = 19 }
- 28. This work is licensed under the Apache 2.0 License Defining a variable The initial value is the value that is stored in the variable. fun main() { val name: String = "Abhi" var age: Int = 19 // val name = “Abhi” // var age = 19 }
- 29. This work is licensed under the Apache 2.0 License 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 }
- 30. This work is licensed under the Apache 2.0 License Putting it together fun main() { // Define a variable storing name of a person // Define a variable storing age of a person // Print Statement and use of ‘$’ operator }
- 31. This work is licensed under the Apache 2.0 License Putting it together fun main() { // Call a function } // Define a function fun firstFunction() { // Function Body }
- 32. This work is licensed under the Apache 2.0 License Return Value We have to mention what has to be returned by the function by providing the data type for it. If a function does not return anything then it is having ‘Unit’ return type fun firstFunction() : String { // Body return “value” }
- 33. This work is licensed under the Apache 2.0 License Parameters We can define various parameters or inputs for the function fun firstFunction(age : Int): Int{ // body return age } fun main(){ // calling the function }
- 34. This work is licensed under the Apache 2.0 License Function with multiple parameters fun firstFunction(age : Int, name : String){ // body } fun main(){ firstFucntion(21, “yourName”) }
- 35. This work is licensed under the Apache 2.0 License Named arguments fun firstFunction(age : Int, name : String){ // body } fun main(){ firstFunction(name = “YourName”, age = 20) } We need to keep in mind the order of parameters while passing the arguments so we can use named arguments.
- 36. This work is licensed under the Apache 2.0 License Function with default parameters fun firstFunction(age : Int, name : String = “noName”){ // body } fun main(){ firstFucntion(21, “YourName”) firstFunction(21) }
- 37. This work is licensed under the Apache 2.0 License Installing Android Studio
- 38. This work is licensed under the Apache 2.0 License Android Studio Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA. Learners will use Android Studio to build their Android apps using Compose.
- 39. This work is licensed under the Apache 2.0 License Android Studio System Requirements Source Computers must meet these system requirements in order to download Android Studio on them. Windows 64-bit Microsoft® Windows® 8/10 x86_64 CPU architecture; 2nd generation Intel Core or newer, or AMD CPU with support for a Windows Hypervisor 8 GB RAM or more 8 GB of available disk space minimum (IDE + Android SDK + Android Emulator) 1280 x 800 minimum screen resolution Mac MacOS® 10.14 (Mojave) or higher ARM-based chips, or 2nd generation Intel Core or newer with support for Hypervisor.Framework 8 GB RAM or more 8 GB of available disk space minimum (IDE + Android SDK + Android Emulator) 1280 x 800 minimum screen resolution Linux Any 64-bit Linux distribution that supports Gnome, KDE, or Unity DE; GNU C Library (glibc) 2.31 or later. x86_64 CPU architecture; 2nd generation Intel Core or newer, or AMD processor with support for AMD Virtualization (AMD-V) and SSSE3 8 GB RAM or more 8 GB of available disk space minimum (IDE + Android SDK + Android Emulator) 1280 x 800 minimum screen resolution Chrome OS For information on recommended devices and specifications, as well as Android Emulator support, visit chromeos.dev.
- 40. This work is licensed under the Apache 2.0 License Download Android Studio Note: If attendees encounter an issue with Android Studio, help them file a bug report.
- 41. This work is licensed under the Apache 2.0 License Android Studio
- 42. This work is licensed under the Apache 2.0 License Android Studio - Project View
- 43. This work is licensed under the Apache 2.0 License Android Studio - Code View
- 44. This work is licensed under the Apache 2.0 License Android Studio - Code View
- 45. This work is licensed under the Apache 2.0 License Android Studio - Design View
- 46. This work is licensed under the Apache 2.0 License Android Studio - Design View
- 47. This work is licensed under the Apache 2.0 License Android Studio - Split View
- 48. This work is licensed under the Apache 2.0 License 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?
- 49. This work is licensed under the Apache 2.0 License Creating an emulator
- 50. This work is licensed under the Apache 2.0 License Creating an emulator
- 51. This work is licensed under the Apache 2.0 License
- 52. This work is licensed under the Apache 2.0 License Running your app on a physical device
- 53. This work is licensed under the Apache 2.0 License 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 ● Kotlin 101 course
- 54. This work is licensed under the Apache 2.0 License THANK YOU for participating in Compose Camp Day 1
Editor's Notes
- Here are some the prerequisites that will be helpful. Having basic computer literacy and basic math skills is recommended. You’ll also need a computer and access to the internet to take the online course. [Mention WiFi instructions if necessary.]
- Let’s talk about what you will learn as part of this series of Compose Camp events. First and foremost, the goal is for you to build your first Android apps with Jetpack Compose. To do this, you will learn the Kotlin Programming Language and install Android Studio on your computer, which is an application to build Android apps. At the end, we’ll also talk about resources on how you can continue learning and building apps.
- To make it easier for you to learn, you’ll be writing your code in the Kotlin Playground which you can access via the web browser. The site looks something like this. You can write your code in this window and run it by hitting the green Run button. The result of your code (known as the output) will show up at the bottom of the window (where it says “Hello, world!”). To illustrate a few important concepts that you’ll learn in this pathway, we will go through a short code demo to create a program in Kotlin.
- In Kotlin Playground, you will learn to explore and modify simple programs in Kotlin. You can think of a program as a series of instructions for a computer or mobile device to perform some action. In this program, the action is printing “Hello, world!”.
- A Kotlin program is required to have a main function, which is the entry point, or starting point, of the program. You may be asking what a function is…
- 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. Creating separate functions for specific tasks has a number of benefits. Reusable code: Rather than copying and pasting code that you need to use more than once, you can simply call a function wherever needed. Readability: Ensuring functions do one and only one specific task helps other developers and teammates, as well as your future self to know exactly what a piece of code does.
- We will demonstrate how to define a function with a function called displayIntroduction() that we will use to print our name and age. A function definition starts with the fun keyword. A keyword is a reserved word that has a special meaning in Kotlin, in this case the fun keyword tells Kotlin that you are going to make a function.
- Functions need to have a descriptive name so that they can be called from other parts of the program.
- Functions need a set of parentheses which you can use to optionally pass information into the function. displayIntroduction() won’t need information passed in. You will learn more about passing in inputs into functions later in the course.
- Functions need curly braces that contain the instructions needed to execute a task.
- The task of the displayIntroduction() function, is to print your name and age. In order to do that you will save both your name and age into variables.
- In computer programming, a variable is a container for a single piece of data. You can envision it as a box that contains a value. The box has a label, which is the name of the variable. By referring to the box by its name, you have access to the value it holds.
- You may be thinking, why store your name and age in variables when you can use them directly? The problem is that when your code uses values directly in all the instructions, your program will only work for that specific case. In this example, there are boxes in the sentence that contain values for both name and age.
- If you change the values of the variables the output will change. In the first example, the value of the name variable is “Meghan” and the value of the age variable is 28. The corresponding output prints “My name is Meghan and I am 28 years old”. In the second example, the value of the name variable is “Janet” and the value of the age variable is 49. The corresponding output prints “My name is Janet and I am 49 years old”.
- When you decide what aspects of your app can be variables, it's important to specify what type of data can be stored in those variables. In Kotlin, there are some common basic data types. This table shows a different data type in each row. For each data type, there's a description of what kind of data it can hold and example values. A String holds text so you will use it to store your name, and an Int holds an integer number so you will use it to store your age.
- Now, let’s jump into how you define a variable. You can declare a variable using either val or var. With val, the variable is read-only, which means you can only read, or access, the value of the variable. Once the value is set, you cannot edit or modify its value. With var, the variable is mutable, which means the value can be changed or modified. The value can be mutated. In Kotlin, it's preferred to use val over var when possible. We will store your name as a val because that will not change. We will store your age as a var because it changes every year.
- To demonstrate how to define a variable we will define both name and age variables. Before you use a variable, you must declare it. To declare a variable, start with the val or var keyword.
- All variables must have a name that they can be referenced by.
- The data type specifies the type of data that the variable holds. Note that a colon separates the name and data type.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- Let’s finish putting the displayIntroduction() function together. We have our variables but they don’t do anything yet. Let’s add a print statement to print out your introduction using println to print to the output in Kotlin Playground. In order to print your variables, you will use String templates which allow you to include variable references in a string by using the $ sign before the variable name. [You can learn more about String Templates here]
- Finally, we will replace the contents of the main() function with a call to the displayIntroduction() function when we run it, “Hi I’m Meghan and I am 28 years old” will print to the output. In this lecture we went over functions and variables and how to put them together to create a function that introduces you. Soon you will go deeper into these concepts and try them out for yourself in the codelabs.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- In the variable declaration, the equal sign symbol (=) follows the data type. The equal sign symbol is called the assignment operator. The assignment operator assigns a value to the variable. The variable’s initial value is the data stored in the variable.
- This is what Android Studio looks like: let’s talk about the different components of it.
- The Project view displays the files and folders of our project.
- The Code view is where we will view and edit code.
- To see the Design tab, we click Design at the top right of the window.
- The Design tab is where we can preview what our app looks like. Currently, the Design tab shows the default app that displays the text “Hello Android!”.
- To see the Split view, we click Split at the top right of the window.
- This is the Split view where you can see both the Code and Design tabs. You’ll be working in split view during Compose Camp. This is helpful because you are able to see how your code updates are reflected in the apps UI.
- 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. The emulator is a great option to be familiar with even if you do have a physical device because it allows you to simulate your app on a variety of mobile devices without having to own any of them. The emulator allows you to test on multiple devices to make sure that your app runs as expected on different phones, sizes, API levels and more.
- You can create your own emulator in Android Studio using the Device Manager. As you can see, you are able to choose from a variety of devices.
- You can also choose from a variety API levels.
- When the emulator runs you will see this in Android Studio. The device shows the text “Howdy Meghan!”
- [Ideally demoing running an app on a physical device will be better than showing this video as the students will be able to see it come together in real time. It could be fun to change the colors and rerun so that they see the changes.] You can also run an app on your physical device. You will be trying it out yourself in the session. Connect your Android device to your computer with a USB cable. This dialog should appear on your device, which asks you to allow USB debugging. Select the Always allow from this computer checkbox and then tap OK. In Android Studio on your computer, make sure your device is selected in the dropdown. Click the Run button. Android Studio installs the app on your device and runs it.
- We are excited to see you at the next Compose Camp session! Before the next session, it is strongly recommended that you download Android Studio. In the meantime you can check out these additional resources, which professional developers use to stay up to date on Android. As you get into more advanced features, you will likely need to learn more programming concepts. You can check out the Learn Kotlin By Example or the Kotlin language website resources for that. Thank you so much for being a part of Compose Camp! Good luck on the beginning of your Android developer journey!