Download to read offline
Session-1 edited.pptx
- 3. This work islicensed under the Apache 2.0 License Compose Camp 15 October,2022 Introduction to Kotlin & Jetpack compose
- 4. This work islicensed 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?
- 5. This work islicensed under the Apache 2.0 License • 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 • Kickstart your Android Development journey Compose Camp Learning Objectives
- 6. This work islicensed under the Apache 2.0 License Hi, Everyone Your Compose Camp Facilitator😉 I’m Zuhair Hassan Mohammad
- 7. This work islicensed under the Apache 2.0 License Hi, Everyone Your Compose Camp Facilitator😉 I’m Dandu Akhil Reddy
- 8. This work islicensed under the Apache 2.0 License 2 3 4 1 2019 Simple Coding Java 2020 2021 Bootcamp and pear teaching + My first Internship as Android Developer 2022 Participated in open source contribution + Regular Coding + Internship First android project + Got to learn Debugging and Error solving in android My journey
- 9. How to learnandroid ? • Don't try to remember code. • Don't hesitate to search error on StackOverFlow. • Try collaboration project to practice. • Ignore autogenerated files
- 10. This work islicensed under the Apache 2.0 License ➢ Introduction to Jetpack Compose ➢ Basics of Kotlin ➢ Overview of Android Studio ➢ UI element of compose and previews ➢ Q&A session Day 1 Agenda
- 12.
- 13.
- 14. This work islicensed under the Apache 2.0 License Jetpack Compose • Jetpack Compose is a modern toolkit for building native Android UI. • Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
- 15. What was therebefore compose ?
- 16. XML • Similar toHTML • Have multiple tags to declare UI element
- 17. Nowadays every techindustry
- 19. • Compose appsare written in the Kotlin programming language. • Kotlin is the language that the majority of professional Android developers use to build apps.
- 20. This work islicensed under the Apache 2.0 License Kotlin • Use Kotlin to start writing Android apps. • Kotlin helps developers be more productive. • Improved Java • Works on JVM
- 21. This work islicensed under the Apache 2.0 License Kotlin Playground Write and run Kotlin code in the browser.
- 22. This work islicensed 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!
- 23. This work islicensed under the Apache 2.0 License A container for a single piece of data. Attribute or Variables
- 24. This work islicensed under the Apache 2.0 License fun main() { val name: String = "Meghan" var age: Int = 28 } Defining a Attribute Variables start with a var or val keyword.
- 25. This work islicensed 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 Attribute
- 26. This work islicensed under the Apache 2.0 License My name is and I am years old. Attribute name age
- 27. This work islicensed 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
- 28. Functions A function isa segment of a program that performs a specific task. You can have many functions in your program or only a single one.
- 29. This work islicensed under the Apache 2.0 License Defining a function Functions begin with the fun keyword. fun displayIntroduction() { }
- 30. This work islicensed under the Apache 2.0 License Defining a function Functions have a name so that they can be called. fun displayIntroduction() { }
- 31. This work islicensed 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. fun displayIntroduction() { }
- 32. This work islicensed 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() { }
- 33. This work islicensed under the Apache 2.0 License Functions fun displayIntroduction() { val name: String = "Meghan" var age: Int = 28 } fun displayIntroduction() { val name = "Meghan" var age = 28 } 1 2
- 34. This work islicensed under the Apache 2.0 License Putting it together fun displayIntroduction() { val name = "Meghan" val age = 28 println("Hi I'm $name and I am $age years old") }
- 35. This work islicensed under the Apache 2.0 License Putting it together fun main() { displayIntroduction() } fun 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
- 37.
- 38. This work islicensed under the Apache 2.0 License Android Studio
- 39. This work islicensed under the Apache 2.0 License Android Studio
- 40. Project Structure This workis licensed under the Apache 2.0 License
- 41. AndroidManifest.xml This work islicensed under the Apache 2.0 License
- 43. Composable and HigherOrder function Annotation -@Composable -@Preview This work is licensed under the Apache 2.0 License
- 44. Basic functions ofJetpack Compose • Text • Column • Row • Box This work is licensed under the Apache 2.0 License
- 45. Basic Layouts This workis licensed under the Apache 2.0 License
- 46. This work islicensed under the Apache 2.0 License Let’s talk about Resources
- 47. This work islicensed under the Apache 2.0 License g.co/android/basics-compose Start here:
- 48. This work islicensed under the Apache 2.0 License Android Basics with Compose Course
- 49. This work islicensed under the Apache 2.0 License
- 50. This work islicensed under the Apache 2.0 License Unit 1: Your first Android App
- 51. This work islicensed under the Apache 2.0 License A Pathway
- 52. This work islicensed under the Apache 2.0 License Take a Quiz
- 53. This work islicensed under the Apache 2.0 License Earn badges!
- 54. This work islicensed under the Apache 2.0 License Google Developer Profile Carrie Sawyer
- 55. This work islicensed 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
- 56. This work islicensed under the Apache 2.0 License 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
- 57. This work islicensed under the Apache 2.0 License Q&A
- 58. This work islicensed under the Apache 2.0 License THANK YOU for participating Compose Camp Day 1 Do participate next session as well
Editor's Notes
- #5 In Compose Camp, you will learn how to build Android apps using Jetpack Compose, Android’s modern UI toolkit. Compose Camp is for everyone from absolute beginners through experienced developers. Through Compose Camp you will: Learn the latest Android Development Tools. Connect with other developers so that you can learn from each other and grow your network. Apply your new skills by creating apps that you can add to your personal portfolio of apps.
- #6 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.
- #7 Helloooooo everyone, excited ?? tea coffee breakfast all ok lets start how many of you actually know me?? Very few, ok let me introduce my self in brief myself rohit I am from final year computer dept, And I will be the facilitator for this compose camp
- #8 Currently working at IITM as Machine Learning Project Intern okok one question what is IITM actually No its Indian institute of tropical meteorology you can say weather forecasting Ok let it be here I am building nearal network model
- #9 Ok enough about my current status lets start with my jurny till today in short. In very first sem of clg don’t had idea about c of coding. But still started coding in java like printing pattern. from second sem we all got that pendemic vacation I took advantage of that and started creating project directly without thinking of life cycle, I was just watching videos on youtube to built project directly. And that’s the thing I have been doing so far. Before android I didn’t know oop concept and all, but clearing that concept in project was too much fun for me. You will fill that too After that in 3rd year started conducting bootcamp and all with other industy expert in our clg and also got my first internship as an Android Dev. Specially worked for 2 startup and now in final year itself started working in opensource.
- #10 Before starting with actual session There are 3 tips from my side.
- #11 So lets take look what our todays agenda we will see UI element like Text, Image on screen
- #12 Ok What is this? Its android tell me what actually android is Anyone, it is an OS by google like ur windows. No big deal ------ tell me current version of android that is rolled out ------ android oreo kitkat, jellybean patta hai
- #15 Ok give me a name of your using and made in compose any?? Hint where the all app are listed
- #16 Any guess
- #17 Xml is kind of similar to HTML not exactly but has tags and all this an example of xml textview. To avoid multiple conflict happening due to xml googles official now says use jetpack c. Conflict – huge hardcoded code size and performance Cause compose is more about composite function we can call a fuction multiple time with writing same thing again and again. Lets take example if you want multiple textview in UI you will need to create tht many tags but if its about compose will just make it as function call it multiple time
- #18 Actually this is happing Its not like we will never gonna use xml. we are still using it has it own benefit but let it be lets talk about how we are staring jetpack compose.
- #19 Ok what this symbol signifies anyone ? What is extension for kotlin file anyone pls? Ya its kotlin , will just discuss some basic concept like variable and method declaration in kt
- #21 In this course, you’ll be learning how to create Android apps using Kotlin. Kotlin is a programming language which is recommended by Google for creating new Android apps. Kotlin is a modern and popular programming language, known for helping developers be more productive and more concise when writing code. As a result of many great language features, Kotlin has quickly gained momentum in industry and is used by over 50% of professional Android developers. Pathway 1 of the unit is focused on helping you understand the basics of Kotlin. [Read about Android’s Kotlin-first approach]
- #22 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.
- #23 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!”.
- #24 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.
- #25 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.
- #26 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.
- #27 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.
- #28 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.
- #30 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.
- #31 Functions need to have a descriptive name so that they can be called from other parts of the program.
- #32 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.
- #33 Functions need curly braces that contain the instructions needed to execute a task.
- #34 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.
- #35 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]
- #36 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.
- #39 Android Studio is the official integrated development environment (IDE) for Android app development built and distributed by Google. An IDE contains tools that make it easy for software developers to design, build, run, and test software, in this case, apps for the Android platform. [If students have already downloaded Android Studio, skip the text below.] You will be downloading Android Studio in today’s session. Note that you will need to verify that your computer meets the Android Studio system requirements. If your computer doesn’t meet the requirements Android Studio may not run or may run suboptimally. Android Studio may also take a while to install. [Android Studio can be downloaded here]
- #40 This is what Android Studio looks like: let’s talk about the different components of it.
- #43 Now lets talk about what jetpack code look like
- #47 Okay that’s it! In a moment, I’ll let you get started on the course. Work at your own pace. If you get stuck, you can ask me or the other facilitators who will be available. [Introduce facilitators if applicable.] We’re here to answer whatever questions you have. Also feel free to ask each other for help and work together to find solutions.
- #48 Open the course page with the link on screen.
- #49 You’ll be working through the Android Basics with Compose course. This is an online training course developed by Google for people who want to learn how to build basic Android apps.
- #50 Then, click Unit 1 to start the Android Basics course.
- #51 The course is made up of units, and units are composed of pathways. Today we’ll be focused on the first unit, which is shown here. It is made up of 3 pathways. In this session, you’ll work on pathway 1.
- #52 You may be wondering, what is a pathway? A pathway is an ordered sequence of activities to learn a specific skill. An activity can be a video, hands-on coding tutorial (known as a codelab), an article, or quiz. There are 7 activities in this first pathway. All these activities are meant to help you reach specific learning objectives by the end of this pathway. If you are already familiar with the skill that the pathway teaches, you can skip that pathway and move on to the next one.
- #53 There’s a quiz at the end of each pathway to check your understanding of what you just learned. Here’s what a sample quiz looks like. There are no limits to the number of retries for a quiz. But if you get a question wrong, try to understand what the concept is (even if you need to look back at the source material), before answering again.
- #54 After you pass a quiz, you will earn a badge like these!
- #55 The badges you earn can be saved to your Google Developer Profile. When you are taking the course, be sure to sign in (in the top right corner) and create a Google Developer Profile if you haven’t already. It’s very quick to create. As you earn more badges, you can see them on your Google Developer Profile and favorite them. You can make your profile public so you can share it and show off your badges to friends and colleagues via social media! [Read more on the Google Developer Profile]
- #56 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!
- #57 Great job everyone on your progress! You can post photos or highlights from today’s session on social media using #ComposeCamp. [Include your own developer community and chapter hashtags (i.e. #developerstudentclubs #dsccmu)] Submit any tips you have about learning Compose to goo.gle/compose-tips for a chance to be featured.
- #58 If you want to continue learning more on your own, here are some resources.