Android Jetpack Compose

Slide 1

Slide 1 text

Jetpack Compose

Slide 2

Slide 2 text

User Interface today • XML & View

Slide 3

Slide 3 text

User Interface today • XML & View • 2009

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

User Interface today • XML & View • 2009 • Compatibility problems

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

User Interface today • XML & View • 2009 • Compatibility problems • Hard to display the same UI on diﬀerent devices and Android versions

Slide 11

Slide 11 text

User Interface today • XML & View • 2009 • Compatibility problems • Hard to display the same UI on diﬀerent devices and Android versions • Reusability is not convenient

Slide 12

Slide 12 text

Alternative UI frameworks

Slide 13

Slide 13 text

Alternative UI frameworks

Slide 14

Slide 14 text

Alternative UI frameworks

Slide 15

Slide 15 text

Jetpack Compose

Slide 16

Slide 16 text

Jetpack Compose • Declarative

Slide 17

Slide 17 text

Jetpack Compose • Declarative • Kotlin

Slide 18

Slide 18 text

Jetpack Compose • Declarative • Kotlin • Compatibility with diﬀerent Android versions

Slide 19

Slide 19 text

Jetpack Compose • Declarative • Kotlin • Compatibility with diﬀerent Android versions • Easy to reuse

Slide 20

Slide 20 text

Jetpack Compose • Declarative • Kotlin • Compatibility with diﬀerent Android versions • Easy to reuse • Modern

Slide 21

Slide 21 text

Let’s try it!

Slide 22

Slide 22 text

Install REPO mkdir ~/bin PATH=~/bin:$PATH curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo chmod a+x ~/bin/repo

Slide 23

Slide 23 text

Conﬁgure GIT git config --global user.name "Your Name" git config --global user.email "[email protected]"

Slide 24

Slide 24 text

Create directory for checkout mkdir androidx-master-dev cd androidx-master-dev

Slide 25

Slide 25 text

Initialize the repository repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-dev

Slide 26

Slide 26 text

Download the code (about 6GB) repo sync -j8 -c

Slide 27

Slide 27 text

Change directory path/to/compose/frameworks/support/ui/

Slide 28

Slide 28 text

and run… ./studiow

Slide 29

Slide 29 text

How to print text? fun main() { print("Hello, Mosdroid!") }

Slide 30

Slide 30 text

How to draw text on Android UI? @Composable fun Greeting() { Text(text = "Hello, Mosdroid!") }

Slide 31

Slide 31 text

class MosdroidActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Greeting() } } @Composable fun Greeting() { Text(text = "Hello, Mosdroid!") } }

Slide 32

Slide 32 text

@Composable fun Greeting() { Text(text = "Hello, Mosdroid!") }

Slide 33

Slide 33 text

@Composable fun Greeting() { Text( text = "Hello, Mosdroid!", style = TextStyle(fontSize = 48.sp) ) }

Slide 34

Slide 34 text

@Composable fun Greeting() { Align(Alignment.Center) { Text( text = "Hello, Mosdroid!", style = TextStyle(fontSize = 48.sp) ) } }

Slide 35

Slide 35 text

Real example • I want to create an application with possibility to add persons and display added person in list • I want to separate UI elements to two independent widgets

Slide 36

Slide 36 text

Dummy implementation @Composable fun PersonEditorWidget() { Column { TextField(EditorModel()) Button(text = "Add Person") } }

Slide 37

Slide 37 text

Dummy implementation @Composable fun PersonEditorWidget() { Column { TextField(EditorModel()) Button(text = "Add Person") } }

Slide 38

Slide 38 text

data class PersonEditorModel( val name: String = "", val buttonTitle: String = "Add Person", val onClick: (String) -> Unit )

Slide 39

Slide 39 text

data class PersonEditorModel( val name: String = "", val buttonTitle: String = "Add Person", val onClick: (String) -> Unit ) @Composable fun PersonEditorWidget(model: PersonEditorModel) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = TextStyle(fontSize = 24.sp) ) ) Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } }

Slide 40

Slide 40 text

@Composable fun PersonEditorWidget(model: PersonEditorModel) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = TextStyle(fontSize = 24.sp) ) ) Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } } Padding(16.dp) { }

Slide 41

Slide 41 text

@Composable fun PersonEditorWidget(model: PersonEditorModel) { Padding(16.dp) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = TextStyle(fontSize = 24.sp) ) ) Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } } } FlexRow { expanded(1.0f) { } }

Slide 42

Slide 42 text

@Composable fun PersonEditorWidget(model: PersonEditorModel) { Padding(16.dp) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = TextStyle(fontSize = 24.sp) ) ) HeightSpacer(12.dp) FlexRow { expanded(1.0f) { Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } } }

Slide 43

Slide 43 text

@Composable fun PersonListWidget(persons: List) { Column { persons.forEachIndexed { index, person -> Align(Alignment.TopLeft) { Padding(16.dp) { Text( text = person.name, style = TextStyle(fontSize = 18.sp) ) } } } } }

Slide 44

Slide 44 text

@Composable fun PersonListWidget(persons: List) { val dividerColor = Color(0xFFC6C6C6) Column { persons.forEachIndexed { index, person -> Align(Alignment.TopLeft) { Padding(16.dp) { Text( text = person.name, style = TextStyle(fontSize = 18.sp) ) } } if (index != persons.lastIndex) { Divider( color = dividerColor, height = 0.5.dp ) } } } }

Slide 45

Slide 45 text

@Composable fun Dashboard(persons: MutableList) { val state = +state { persons } Column { PersonEditorWidget( PersonEditorModel( name = "Anton", onClick = { state.value = state.value.apply { add(Person(it)) } } )) Divider() PersonListWidget(state.value) } }

Slide 46

Slide 46 text

Add theme

Slide 47

Slide 47 text

private val colorGreen = Color(0xFF1B5E20.toInt()) @Composable fun MosdroidTheme(@Children children: @Composable() () -> Unit) { val colors = MaterialColors(primary = colorGreen) val typography = MaterialTypography( h5 = TextStyle( fontFamily = FontFamily("Roboto"), fontWeight = FontWeight.w700, fontSize = 24.sp ), h6 = TextStyle( fontFamily = FontFamily("Roboto"), fontWeight = FontWeight.w700, fontSize = 18.sp ), button = TextStyle( fontFamily = FontFamily("Roboto"), fontWeight = FontWeight.w800, fontSize = 14.sp ) ) MaterialTheme(colors = colors, typography = typography) { children() } }

Slide 48

Slide 48 text

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MosdroidTheme { Dashboard(personList) } } }

Slide 49

Slide 49 text

@Composable fun PersonEditorWidget(model: PersonEditorModel) { Padding(16.dp) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = TextStyle(fontSize = 24.sp) ) ) HeightSpacer(12.dp) FlexRow { expanded(1.0f) { Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } } }

Slide 50

Slide 50 text

@Composable fun PersonEditorWidget(model: PersonEditorModel) { Padding(16.dp) { Column { val nameState = +state { EditorModel(model.name) } TextField( value = nameState.value, onValueChange = { nameState.value = it }, editorStyle = EditorStyle( textStyle = +themeTextStyle { h5 } ) ) HeightSpacer(12.dp) FlexRow { expanded(1.0f) { Button( text = model.buttonTitle, onClick = { model.onClick(nameState.value.text) } ) } } }

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Didn’t covered • Animations • Complex layout • Internal principles

Slide 54

Slide 54 text

Links • Oﬃcial resource: https://developer.android.com/jetpack/compose • Jetpack Compose Principles: http://intelligiblebabble.com/compose-from- ﬁrst-principles/ • Example: https://medium.com/q42-engineering/android-jetpack- compose-895b7fd04bf4 • Compose Readme: https://android.googlesource.com/platform/ frameworks/support/+/refs/heads/androidx-master-dev/ui/README.md

Slide 55

Slide 55 text

Conclusion • pre-alpha

Slide 56

Slide 56 text

Conclusion • pre-alpha • No good instruments

Slide 57

Slide 57 text

Conclusion • pre-alpha • No good instruments • UI tests?

Slide 58

Slide 58 text

Conclusion • pre-alpha • No good instruments • UI tests? • Functions - small UI components

Slide 59

Slide 59 text

Conclusion • pre-alpha • No good instruments • UI tests? • Functions - small UI components • Android version independent

Slide 60

Slide 60 text

Conclusion • pre-alpha • No good instruments • UI tests? • Functions - small UI components • Android version independent • Less boilerplate

Slide 61

Slide 61 text

Questions? Zinakov Anton Android Developer [email protected] @rygital