Beyond Java, Exploring the Modern Android Development

Slide 1

Slide 1 text

Bhoomi Gadhiya 📱Android Developer Beyond Java: Exploring the Modern Android Development @bhoomigadhiya GDSC PPSU

Slide 2

Slide 2 text

About me 󰟲 ● Android Developer ● Technical Author in DroidCon Academy ● Technical Blogger : Medium @bhoomigadhiya ● Technical Speaker in community ● Empowering Women In Tech

Slide 3

Slide 3 text

Agenda ● Kotlin ● Jetpack Compose ● Production-level apps ● Hands-on Experience ● Quiz ● Q&A time

Slide 4

Slide 4 text

XML + Java XML + Kotlin Jetpack Compose In Kotlin Evolution Of Android Development

Slide 5

Slide 5 text

What is Kotlin?

Slide 6

Slide 6 text

● Developed By Jetbrains JetBrains is a software development company that creates intelligent development tools for software developers and project managers.

Slide 7

Slide 7 text

● Open-source (https://github.com/Jetbrains/kotlin) ● First commit in 2010

Slide 8

Slide 8 text

● 2016 - Kotlin 1.0 released ● 2017 - Android announced Ofﬁcial support for Kotlin

Slide 9

Slide 9 text

Kotlin Features Concise

Slide 10

Slide 10 text

Data Classes public class User { String name; int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } data class User(var name:String,var age:Int) KOTLIN JAVA

Slide 11

Slide 11 text

Concise Null-safety Kotlin Features

Slide 12

Slide 12 text

Tony’s $1B Mistake “I call it my billion-dollar mistake. It was the invention of the null reference in 1965…This has led to innumerable errors, vulnerabilities, and system crashes,” - Tony Hoare

Slide 13

Slide 13 text

Null-Safety ./No Compiler Error String name = null; ./Compiler Error var name:String = null KOTLIN JAVA ./No Compiler Error var name:String? = null ./Compiler Error on line 2 var nameLength = name.length ./Runtime Error int nameLength = name.length()

Slide 14

Slide 14 text

Kotlin Features Concise Null-safety Functional

Slide 15

Slide 15 text

Functional Programming ● Immutable Data ● High-Order functions ● Lambda Expressions ● Extension function ● And much more!

Slide 16

Slide 16 text

Kotlin Features Concise Null-safety Functional Interoperability

Slide 17

Slide 17 text

Kotlin is 100% interoperable with Java

Slide 18

Slide 18 text

Kotlin Features Concise Null-safety Functional Interoperability Tool-friendly

Slide 19

Slide 19 text

Want to learn Kotlin? ● kotlinlang.org ● developer.android.com/kotlin ● codecademy.com/learn/learn-kotlin ● youtube.com/@CheezyCode

Slide 20

Slide 20 text

What is Jetpack Compose?

Slide 21

Slide 21 text

Imperative Explicit step-by-step instruction System is stupid & You are smart😎

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Describe what you want System is smart & You don’t care😉 Declarative

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Jetpack Compose? ● Modern UI toolkit for building native UI

Slide 26

Slide 26 text

Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin

Slide 27

Slide 27 text

Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code

Slide 28

Slide 28 text

Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs

Slide 29

Slide 29 text

Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs ● Accelerate Development

Slide 30

Slide 30 text

Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs ● Accelerate Development ● Powerful Tool

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Everything is ‘fun’ in Compose

Slide 33

Slide 33 text

Composable ● A function that is used to create a UI element in Jetpack Compose. ● Focuses on “What” rather “How”

Slide 34

Slide 34 text

Jetpack Compose View ./MainActivity.kt class MainActivity : Activity() { override fun onCreate(...) { setContentView(R.layout.activity_main) } } ./activity_main.xml ./LinearLayout> ./MainActivity.kt class MainActivity : Activity() { override fun onCreate(...) { setContent{ Greeting() } } } @Composable fun Greeting(){ Text("Hello World") }

Slide 35

Slide 35 text

Jetpack Compose View MainActivity.kt activity_main.xml MainActivity.kt Composable Screen 1 Composable Screen N

Slide 36

Slide 36 text

Setting Up Project

Slide 37

Slide 37 text

Start composing…

Slide 38

Slide 38 text

Text Hello Surat! @Composable fun Demo(name: String){ Text(text = "Hello $name!") } // Demo(name = “Surat”)

Slide 39

Slide 39 text

Button @Composable fun Demo() { Button(onClick = { ** Do Something */ }) { Text("Click Me") } }

Slide 40

Slide 40 text

Image @Composable fun Demo() { Image( painter = painterResource(R.drawable.logo), contentDescription = "Android" ) }

Slide 41

Slide 41 text

Without Layouts @Composable fun Demo() { Text("A") Text("B") Text("C") } A B C

Slide 42

Slide 42 text

Column @Composable fun Demo() { Column { Text("A") Text("B") Text("C") } } A B C

Slide 43

Slide 43 text

Row @Composable fun Demo() { Row{ Text("A") Text("B") Text("C") } } A BC

Slide 44

Slide 44 text

Box @Composable fun Demo() { Box(Modifier.size(28.dp)) { Text("A", modifier = Modifier.align(Alignment.TopStart)) Text("B", modifier = Modifier.align(Alignment.Center)) Text("C", modifier = Modifier.align(Alignment.BottomEnd)) } } A B C

Slide 45

Slide 45 text

More composable functions ● LazyColumn ● LazyRow ● ConstraintLayout ● Spacer ● ... and much more

Slide 46

Slide 46 text

Modiﬁer ● Change the appearance and behavior of composables. ● Example: setting background color, adding padding, making elements clickable, and more.

Slide 47

Slide 47 text

Modiﬁer @Composable fun Demo() { Box(Modifier.background(Color.Yellow)) { Text( text = "Hello", modifier = Modifier .padding(8.dp) .background(Color.Red) ) } } Hello

Slide 48

Slide 48 text

State ● State is any value in the app that can change. ● Examples: a. Whether to show a button or not based on some condition. b. Result of fetching the data : Loading, Error, Success. c. Error message when user enters invalid message.

Slide 49

Slide 49 text

Recomposition ● Whenever state is updated, recomposition takes place.

Slide 50

Slide 50 text

@Composable fun DisplayName(name: String) { Text(text = "Hello, $name!") } Initial Composition @Composable fun DisplayName(name: String) { Text(text = "Hello, $name!") } Name Changes ReComposition Recomposition

Slide 51

Slide 51 text

Recomposition ● Whenever state is updated, recomposition takes place. ● Only way to update UI, calling same composable with new argument.

Slide 52

Slide 52 text

Recomposition ● Whenever state is updated, recomposition takes place. ● Only way to update UI, calling same composable with new argument. ● Only rebuild part of UI.

Slide 53

Slide 53 text

Remember @Composable fun Detail(name: String) { val someClass = SomeClass() Text(name) } Without Remember With Remember @Composable fun Detail(name: String) { val someClass = remember{SomeClass()} Text(name) } val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@222 SomeClass@333 val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@111 SomeClass@111

Slide 54

Slide 54 text

How to create State? var enabled by remember { mutableStateOf(true) } Retain the data during recomposition Store the latest value

Slide 55

Slide 55 text

Want to learn Compose? ● developer.android.com/jetpack/compose ● github.com/android/compose-samples ● github.com/android/nowinandroid ● medium.com/androiddevelopers ● youtube.com/c/AndroidDevelopers/videos ● composables.com ● youtube.com/@CheezyCode

Slide 56

Slide 56 text

Production Level Apps API Database Architecture Pattern Backend Integration

Slide 57

Slide 57 text

Scalability Testability Complexity Maintainability Source: https://storyset.com/people

Slide 58

Slide 58 text

Architecture Patterns Separation Of Concern No Hard Dependency

Slide 59

Slide 59 text

Architecture Patterns ● MVC (Model - View - Controller) ● MVP (Model - View - Presenter) ● MVVM (Model - View - ViewModel) ● MVI (Model - View - Intent) ● And some more!

Slide 60

Slide 60 text

Application Programming Interface Source: https://shorturl.at/ewAE3

Slide 61

Slide 61 text

Endpoints

Slide 62

Slide 62 text

Endpoints https://dummy.restapiexample.com/api/v1/employees

Slide 63

Slide 63 text

Retroﬁt ● Type-safe REST Client for Android ● Convert the response in POJO

Slide 64

Slide 64 text

Retroﬁt API Request with method GET/POST Response with JSON Format Client Server

Slide 65

Slide 65 text

Backend Integration Create your own Backend Use Firebase

Slide 66

Slide 66 text

Firebase ● BAAS (Backend As A Service) ● Build, improve and grow your app ● No need to maintain the server!