Tweet
Tweet

Slide 1

Slide 1 text

Android development with Jetpack Compose

Slide 2

Slide 2 text

Android GDE 
 🛠 Individual Consultant 
 🔊 Speaker 
 🌎 Globe Tro tt er 
 🍻 Beer enthusiast 🎯https:/ /androiddev.social/@aditlal 🔗aditlal.dev

Slide 3

Slide 3 text

This work is licensed under the Apache 2.0 License

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Jetpack Compose / jet ·pak kuhm· powz / noun Jetpack Compose is a declarative & modern toolkit for building native Android UI. It simpli fi es and accelerates UI development on Android.

Slide 6

Slide 6 text

Why do we need Compose? What does it solve and how?

Slide 7

Slide 7 text

Before Compose UI Toolkit is tied to the OS State Management is tricky Lots of context switching Simple things still require a lot of code

Slide 8

Slide 8 text

With Compose UI Toolkit is independent to the OS 🪄 State Management is built in🥳 Lots of context switching 🎉 So rt ed code logic 🚀

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { . . . } } }

Slide 11

Slide 11 text

Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { . . . } } }

Slide 12

Slide 12 text

setContent public fun ComponentActivity.setContent( parent: CompositionContext? = null, content: @Composable () - > Unit ) { / / some magic code🪄 } }

Slide 13

Slide 13 text

What are we gonna learn today?

Slide 14

Slide 14 text

TOPIC TIME(in hr:mins) Thinking in Compose 0:05 Modifiers 0:20 Layouts 0:30 State management 0:45 SideEffects 1:00 Codelab - idea Today’s Schedule

Slide 15

Slide 15 text

Imperative

Slide 16

Slide 16 text

Imperative

Slide 17

Slide 17 text

View Group View Imperative

Slide 18

Slide 18 text

val textView = findViewById(R.id.textView) Imperative

Slide 19

Slide 19 text

textView.text = ... Imperative val textView = findViewById(R.id.textView)

Slide 20

Slide 20 text

Declarative UI

Slide 21

Slide 21 text

✓ Declarative UI is cleaner, more readable, and more performant than Imperative UI. ✓ Compose allows you to do more with less code compared to XML. ✓ Compose is Intuitive. This means that you just need to tell Compose what you want to show the user. ✓ Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose. Also integrated with many Jetpack Libraries. ✓ Compose improves your build time and APK size. Declarative UI Compose

Slide 22

Slide 22 text

Hello Adit Declarative UI

Slide 23

Slide 23 text

@Composable fun Greeting(name: String) { } Declarative UI

Slide 24

Slide 24 text

@Composable fun Greeting(name: String) { Text(text = "Hello $name!") } Hello Adit Declarative UI

Slide 25

Slide 25 text

Update state? Hello Mike Declarative UI

Slide 26

Slide 26 text

Modifiers

Slide 27

Slide 27 text

Text ( modifier = Modifier .padding(10.dp), text = "Hello World" ) Hello World Modifiers

Slide 28

Slide 28 text

Text ( modifier = Modifier . background (Color.Green), text = "Hello World" ) Hello World .padding(10.dp) Modifiers

Slide 29

Slide 29 text

Text ( modifier = Modifier . border( width = 2.dp, color = Color.Green ), text = "Hello World" ) Hello World .padding(10.dp) Modifiers

Slide 30

Slide 30 text

Text ( modifier = Modifier text = "Hello World" ) Hello World Order ma tt ers . border( width = 2.dp, color = Color.Green ) .padding(10.dp) .padding(10.dp), Modifiers

Slide 31

Slide 31 text

Hello World Text ( modifier = Modifier . border( width = 2.dp, color = Color.Green ), text = "Hello World" ) .padding(10.dp) Order ma tt ers Modifiers

Slide 32

Slide 32 text

Hello World Text ( modifier = Modifier .border( width = 2.dp, color = Color.Green ) .background(Color.Green), text = "Hello World" ) .padding(10.dp) Modifiers

Slide 33

Slide 33 text

h tt ps://developer.android.com/jetpack/compose/modi fi ers-list

Slide 34

Slide 34 text

Layouts

Slide 35

Slide 35 text

Column

Slide 36

Slide 36 text

Column { } Column

Slide 37

Slide 37 text

Column { Text ( "Hello Text ( "Hello Text ( "Hello } World" ) World" ) World" ) Hello World Hello World Hello World Column Column { }

Slide 38

Slide 38 text

Column( verticalArrangement = ) } { X Y Column Arrangement.Center

Slide 39

Slide 39 text

Hello World Hello World Hello World Column Column( verticalArrangement = ) } { Arrangement.SpaceBetween

Slide 40

Slide 40 text

Column( horizontalAlignment = ) } { X Y Column

Slide 41

Slide 41 text

Hello World Hello World Hello World Column Column( horizontalAlignment = ) } { Alignment.End

Slide 42

Slide 42 text

Column Column( horizontalAlignment = ) } { Alignment.CenterHorizontally Hello World Hello World Hello World

Slide 43

Slide 43 text

Row

Slide 44

Slide 44 text

Row { Text ( “Hello" ) Text ( "World" ) Text ( “!" ) HelloWorld! } Row

Slide 45

Slide 45 text

Row( horizontalArrangement = ) } { X Y Row

Slide 46

Slide 46 text

Hello World ! Row Row( horizontalArrangement = ) } { Arrangement.SpaceBetween

Slide 47

Slide 47 text

Row( verticalAlignment = ) } { X Y Row

Slide 48

Slide 48 text

HelloWorld! Row Row( verticalAlignment = ) } { Alignment.CenterVertically

Slide 49

Slide 49 text

Column Row Ve rt ical Arrangement Horizontal Arrangement Horizontal Alignment Ve rt ical Alignment Row & Column

Slide 50

Slide 50 text

Row & Column

Slide 51

Slide 51 text

Row { Image(…) } Row & Column

Slide 52

Slide 52 text

Row { Image(…) Column { } } Row & Column

Slide 53

Slide 53 text

Row { Image(…) Column { Text ( “…” ) Text ( “…” ) } } Row & Column

Slide 54

Slide 54 text

Box

Slide 55

Slide 55 text

Box { Image(…) } Box

Slide 56

Slide 56 text

Box { Image(…) Column { Text(…) Text(…) } } Box

Slide 57

Slide 57 text

Box } Box { Image(…) Column(Modifier.align(Alignment.BottomEnd)) { Text(…) Text(…) }

Slide 58

Slide 58 text

List

Slide 59

Slide 59 text

fun EmployeeListView (items: List) { LazyColumn { } } List @Composable

Slide 60

Slide 60 text

@Composable fun EmployeeListView (items: List) { LazyColumn { items (items) { item -> } } } List

Slide 61

Slide 61 text

@Composable fun EmployeeListView (items: List) { LazyColumn { items (items) { item -> ItemRow(item) } } } List

Slide 62

Slide 62 text

Slot Layouts

Slide 63

Slide 63 text

Scaffold(topBar = {}) { } Slot Layouts

Slide 64

Slide 64 text

Home Slot Layouts Text(text = “Home") Scaffold(topBar = { { } })

Slide 65

Slide 65 text

Hello World Slot Layouts Text(text = “Home") Scaffold(topBar = { { } }) Home Text(text = “Hello World”)

Slide 66

Slide 66 text

● Column ● Row ● Box ● Sca ff old Layouts

Slide 67

Slide 67 text

Layout modifiers

Slide 68

Slide 68 text

Layout modifiers

Slide 69

Slide 69 text

Column { Hello World Hello World } Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Layout modifiers

Slide 70

Slide 70 text

Column ( Modifier .background(Color.Green) .fillMaxWidth() ) { } Hello World Hello World Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Layout modifiers

Slide 71

Slide 71 text

Hello World Hello World Column ( Modifier .background(Color.Green) .fillMaxSize() ) { } Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Layout modifiers

Slide 72

Slide 72 text

Hello World Hello World 200dp Column ( Modifier .background(Color.Green) .width(200.dp) ) { } Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Text( text = "Hello World”, modifier = Modifier.background(Color.Green) ) Layout modifiers

Slide 73

Slide 73 text

State management

Slide 74

Slide 74 text

● Setup state using mutableStateOf State management

Slide 75

Slide 75 text

0 + - State management

Slide 76

Slide 76 text

val counter by remember { mutableStateOf(0) 0 } State management

Slide 77

Slide 77 text

Column { Text ( text = counter.toString() 0 ) ... } State management

Slide 78

Slide 78 text

Button ( ) { onClick = { counter ++ } 0 Text ( text = "+" ) } + - State management

Slide 79

Slide 79 text

Button ( ) { onClick = { counter -- } 0 Text ( text = “-" ) } + - State management

Slide 80

Slide 80 text

Composable UI-Redraw Event Recomposition

Slide 81

Slide 81 text

Val counter by remember { mutableStateOf(0) 0 } + - Recomposition

Slide 82

Slide 82 text

Search State management

Slide 83

Slide 83 text

View Model Event Search Search View State management

Slide 84

Slide 84 text

SideEffects

Slide 85

Slide 85 text

● Work outside of composable function ● Open new screen when tapping bu tt on ● Show no network message SideEffects

Slide 86

Slide 86 text

A side effect of composition that must be reversed or cleaned up if the DisposableEffect leaves the composition. It is an error to call DisposableEffect without at least one key parameter. Schedule effect to run when the current composition completes successfully and applies changes. SideEffect can be used to apply side effects to objects managed by the composition that are not backed by snapshots so as not to leave those objects in an inconsistent state if the current composition operation fails. When LaunchedEffect enters the composition it will launch the block into the composition's CoroutineContext. The coroutine will be canceled and re-launched when LaunchedEffect is recomposed with a different key1. The coroutine will be canceled when the LaunchedEffect leaves the composition. LaunchedEffect SideEffect DisposableEffect SideEffects

Slide 87

Slide 87 text

A side effect of composition that must be reversed or cleaned up if the DisposableEffect leaves the composition. It is an error to call DisposableEffect without at least one key parameter. Schedule effect to run when the current composition completes successfully and applies changes. SideEffect can be used to apply side effects to objects managed by the composition that are not backed by snapshots so as not to leave those objects in an inconsistent state if the current composition operation fails. When LaunchedEffect enters the composition it will launch the block into the composition's CoroutineContext. The coroutine will be canceled and re-launched when LaunchedEffect is recomposed with a different key1. The coroutine will be canceled when the LaunchedEffect leaves the composition. LaunchedEffect SideEffect DisposableEffect SideEffects

Slide 88

Slide 88 text

● Triggers on fi rst composition or key change @Composable fun HomeView () { var counter by remember { mutableStateOf ( 0 ) } } LaunchedEffect

Slide 89

Slide 89 text

● Triggers on fi rst composition or key change @Composable fun HomeView () { var counter by remember { mutableStateOf ( 0 ) } } LaunchedEffect { while(true) { counter ++ } } LaunchedEffect

Slide 90

Slide 90 text

● Triggers on fi rst composition or key change @Composable fun HomeView () { var counter by remember { mutableStateOf ( 0 ) } } LaunchedEffect { while(true) { counter ++ } } delay(2000) LaunchedEffect

Slide 91

Slide 91 text

● Triggers on fi rst composition or key change @Composable fun HomeView () { var counter by remember { mutableStateOf ( 0 ) } } LaunchedEffect(key1 = Unit){ while(true) { counter ++ } } delay(2000) LaunchedEffect

Slide 92

Slide 92 text

Schedule effect to run when the current composition completes successfully and applies changes. SideEffect can be used to apply side effects to objects managed by the composition that are not backed by snapshots so as not to leave those objects in an inconsistent state if the current composition operation fails. When LaunchedEffect enters the composition it will launch the block into the composition's CoroutineContext. The coroutine will be canceled and re-launched when LaunchedEffect is recomposed with a different key1. The coroutine will be canceled when the LaunchedEffect leaves the composition. LaunchedEffect SideEffect SideEffects A side effect of composition that must be reversed or cleaned up if the DisposableEffect leaves the composition. It is an error to call DisposableEffect without at least one key parameter. DisposableEffect

Slide 93

Slide 93 text

● Calls SideE ff ect when we want conditional e ff ect @Composable fun SearchBar() { } val focusRequester = remember { FocusRequester() } SideEffect { if(focused && !isSearchDummy) focusRequester.requestFocus() } SideEffect

Slide 94

Slide 94 text

A side effect of composition that must be reversed or cleaned up if the DisposableEffect leaves the composition. It is an error to call DisposableEffect without at least one key parameter. Schedule effect to run when the current composition completes successfully and applies changes. SideEffect can be used to apply side effects to objects managed by the composition that are not backed by snapshots so as not to leave those objects in an inconsistent state if the current composition operation fails. When LaunchedEffect enters the composition it will launch the block into the composition's CoroutineContext. The coroutine will be canceled and re-launched when LaunchedEffect is recomposed with a different key1. The coroutine will be canceled when the LaunchedEffect leaves the composition. LaunchedEffect SideEffect DisposableEffect SideEffects

Slide 95

Slide 95 text

DisposableEffect ● Calls onDispose on terminate @Composable fun HomeView() { DisposableEffect (...) { onDispose { callback.remove() } } }

Slide 96

Slide 96 text

101

Slide 97

Slide 97 text

Code class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NotesApplicationTheme { / / A surface container using the 'background' color from the theme Surface( modif i er = Modif i er.f i llMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } }

Slide 98

Slide 98 text

Code class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NotesApplicationTheme { / / A surface container using the 'background' color from the theme Surface( modif i er = Modif i er.f i llMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } }

Slide 99

Slide 99 text

Code class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NotesApplicationTheme { / / A surface container using the 'background' color from the theme Surface( modif i er = Modif i er.f i llMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } }

Slide 100

Slide 100 text

Code class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NotesApplicationTheme { / / A surface container using the 'background' color from the theme Surface( modif i er = Modif i er.f i llMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } }

Slide 101

Slide 101 text

Code class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NotesApplicationTheme { / / A surface container using the 'background' color from the theme Surface( modif i er = Modif i er.f i llMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } }

Slide 102

Slide 102 text

Composable @Composable fun Greeting(name: String) { Text(text = "Hello $name!") } @Preview(showBackground = true) @Composable fun DefaultPreview() { NotesApplicationTheme { Greeting("Android") } }

Slide 103

Slide 103 text

Demo https://developer.android.com/codelabs/jetpack-compose-basics

Slide 104

Slide 104 text

https://github.com/aldefy/Andromeda 
 https://bit.ly/3Nic0JF - Sample catalog app 
 
 Andromeda is an open-source Jetpack Compose design system. A collection of guidelines and components can be used to create amazing compose app user experiences. Foundations introduce Andromeda tokens and principles while Components provide the bolts and nuts that make Andromeda Compose wrapped apps tick. Check out

Slide 105

Slide 105 text

Thats all folks! https://linktr.ee/aldefy