Coffee & Compose ________

About Us Hemanshu Varma Software Engineer - Recro Bharath Venkatesan Software Engineer - OpenBet

TOPIC Kotlin Basics What is Compose? Compose over XML Live Coding What’s Next? QnA Today’s Agenda

Kotlin Programming Language Kotlin helps developers write concise yet NULL safe code. Kotlin first approach recommended by Google

Kotlin Playground Write and run Kotlin code on the fly within browser

Functions 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.

Defining a function Functions begin with the fun keyword. fun displayIntroduction() { }

Defining a function Functions have a name so that they can be called. fun displayIntroduction() { }

Defining a function Functions need a set of parentheses after the function name in order to surround the function inputs. fun displayIntroduction() { }

Defining a function The curly braces make up the function body and contain the instructions needed to execute a task. fun displayIntroduction() { }

Putting it together fun displayIntroduction() { // We will fill this out! } Output: Hi I’m Meghan and I am 28 years old

A container for a single piece of data. Variables

My name is and I am years old Variables name age

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

Defining a variable Variables start with a var or val keyword. fun displayIntroduction() { val name: String = "Meghan" var age: Int = 28 }

Defining a variable All variables must have a name. fun displayIntroduction() { val name: String = "Meghan" var age: Int = 28 }

Defining a variable Data type is the type of data that the variable holds. fun displayIntroduction() { val name: String = "Meghan" var age: Int = 28 }

Defining a variable The initial value is the value that is stored in the variable. fun displayIntroduction() { val name: String = "Meghan" var age: Int = 28 }

Putting it together fun displayIntroduction() { val name = "Meghan" val age = 28 println("Hi I'm $name and I am $age years old") }

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

What is Compose?

Jetpack Compose is the modern toolkit for building native user interfaces for Android apps. Compose apps are written in the Kotlin programming language. Compose makes it easier and faster to build UIs on Android. Jetpack Compose

Benefits of using Jetpack Compose Less code Do more with less code and avoid entire classes of bugs. Code is simpler and easier to maintain. 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.

Compose over XML

ACTIVITY XML Imperative Approach

ACTIVITY Declarative Approach Compose Compose ……..

Animations https://developer.android.com/jetpack/compose/animation

Why is it called Compose?

Old Android UI System Inheritance View EditText TextView

Composable Compose UI System Composition Composable Composable Composable Composable Composable

What we will build today? About Me App

Lets code... Grab your coffee

What’s Next?

Pathways Each track offers learning content from Google that is structured into pathways. A pathway consists of a sequence of learning activities (videos, articles, and codelabs), to help you learn about a certain technical topic. There is a quiz at the end of a pathway to test what you learned.

Earn digital badges For each quiz successfully passed, participants earn a badge on their developer profiles Carrie Sawyer

Android Basics with Compose Course g.co/android/basics-compose

2 3 1 Introduction to Kotlin Set up Android Studio Build a basic layout (4 hours) (3 hours) (4 hours) Learn introductory programming concepts in Kotlin to prepare for building Android apps in Kotlin. Install and set up Android Studio, create your first project, and run it on a device or emulator. Learn the basics of layouts in Android by creating your very own birthday card app! this is where you will truly start learning Compose! Android Basics with Compose Course Unit 1

Customize for your audience No programming experience Go through each pathway of each unit in order, since the concepts build on each other. Already have programming experience Skip the pathways focused on Kotlin concepts that don’t contain Android, which are the first pathway of each unit from Units 1 to 3. Work through the remaining pathways in each unit in order to learn Android concepts. Quick Tip: If a developer is new to Kotlin, they can do Kotlin Koans online exercises as a quick jumpstart to become familiar with Kotlin syntax & idioms (~ 5 hours).

Additional resources Practice problems These appear throughout the Android Basics with Compose course for learners to apply what they just learned in the context of a new app. These practice problems are optional. Learners can start on them if they finish early at a session, or do them at home. Open-ended projects At the end of each unit, there are opportunities for learners to create their own app, with some guidelines to help them. Since these apps will be unique to each individual, the apps could be added to their portfolio of work, and even uploaded to GitHub. Unit 1 - Business Card app Unit 2 - Art Space app Unit 3 - 30 Days app

Additional resources (Experienced Track) Jetpack Compose for Android Developers Course (link here) Compose Presentation Decks (link here) Existing presentation decks with speaker notes are available on different Compose topic areas. You can use these to deliver talks or supplement content for your sessions. Make sure to check out Jetpack compose from official android developers page (Jetpack Compose)

Questions?

Follow Us hemanshuvarma bharathvenkatesan @varmahemanshu @im_bharath_97

Share what you’ve learned using .#AndroidEducators on social media

Thank You and All the Best!