Creative UIs with Compose: Kotlinconf 2025

While most of the time following platform conventions makes sense, Compose UI allows us to be more expressive than ever before.

This talk walks through how UIs have become a little stale, and what videos games can show us about creativity in UIs. Specifically, we recreate part of Persona 5's UI to demonstrate just how far we can push Compose UI.

All art and character designs in this presentation are the property of Atlus Co., Ltd. Material is used for reference and educational purposes only. ©ATLUS ©SEGA

Transcript

1. Creative UIs with Compose Chris Horner
2. We ’ re going to analyse and build a complex UI But first…
5. I arrange rectangles. - A designer I worked with
6. - A designer I worked with I arrange rectangles. Sometimes, if I want to get fancy, I round the corners.
10. UI frameworks are built around rectangles
12. Column { Box() Row { Box() Box() } }
13. Flat design Easy for a designer to put together Simple for a developer to build Low effort to read Renders quickly Responsive Dark mode
14. Boring 😴 is good
15. Boring 😴 is good Phone calls Customer support Maps / navigation Email But… have we gone too far?
16. Let ’ s go back in time…
18. appleinsider.com
23. skins.webamp.org
24. gameuidatabase.com
25. ©ATLUS ©SEGA
26. Credit to Miika Laaksonen
27. garystormsongs.com
28. ©ATLUS ©SEGA
29. ©ATLUS ©SEGA
30. How could we build this with Compose UI in Kotlin?
31. ©ATLUS ©SEGA
32. ©ATLUS ©SEGA
33. ©ATLUS ©SEGA
34. ©ATLUS ©SEGA
35. ©ATLUS ©SEGA
36. ©ATLUS ©SEGA
37. ©ATLUS ©SEGA
38. Background
39. ©ATLUS ©SEGA
40. val PersonaRed = Color(0xFFC41001) Box( modifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { } ©ATLUS ©SEGA
41. val PersonaRed = Color(0xFFC41001) Box( modifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { } ©ATLUS ©SEGA
42. Box( m​ odifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { I​ mage( painter = painterResource(R.drawable.bg_splatter), c​ ontentDescription = null, contentScale = ContentScale.FillWidth, m​ odifier = M​ odifier.statusBarsPadding() ​)​ } ©ATLUS ©SEGA
43. Box( m​ odifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { I​ mage( painter = painterResource(R.drawable.bg_splatter), c​ ontentDescription = null, contentScale = ContentScale.FillWidth, m​ odifier = M​ odifier.statusBarsPadding() ​)​ Image( painter = painterResource(R.drawable.logo_im), contentDescription = null, modifier = Modifier .height(100.dp) .statusBarsPadding() .offset(x = 8.dp, y = (-4).dp), ) } ©ATLUS ©SEGA
44. Textbox ©ATLUS ©SEGA
45. ©ATLUS ©SEGA
46. ©ATLUS ©SEGA
47. Sup? ©ATLUS ©SEGA
48. Sup? ©ATLUS ©SEGA
49. romainguy / v9 ©ATLUS ©SEGA
50. romainguy / v9 ©ATLUS ©SEGA
51. romainguy / v9 ©ATLUS ©SEGA
52. romainguy / v9 ©ATLUS ©SEGA
53. fun outerBox(): Shape = GenericShape { size -> } ©ATLUS ©SEGA
54. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) } ©ATLUS ©SEGA
55. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) } ©ATLUS ©SEGA
56. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) lineTo(size.width - 23, size.height) } ©ATLUS ©SEGA
57. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) lineTo(size.width - 23, size.height) lineTo(0f, size.height - 8) } ©ATLUS ©SEGA
58. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) lineTo(size.width - 23, size.height) lineTo(0f, size.height - 8) close() } ©ATLUS ©SEGA
59. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) lineTo(size.width - 23, size.height) lineTo(0f, size.height - 8) close() } ©ATLUS ©SEGA
60. fun Density.outerBox(): Shape = GenericShape { s -> moveTo(31.7.dp.toPx(), 3.1.dp.toPx()) lineTo(size.width, 0f) lineTo(size.width - 23.dp.toPx(), size.height) lineTo(0f, size.height - 8.dp.toPx( )​ ) c​ lose() } ©ATLUS ©SEGA
61. fun Density.outerBox(): Shape = GenericShape { size -> moveTo(31.7.dp.toPx(), 3.1.dp.toPx()) lineTo(size.width, 0f) lineTo(size.width - 23.dp.toPx(), size.height) lineTo(0f, size.height - 8.dp.toPx()) ​c​ lose( )​ } fun Density.innerBox(): Shape = GenericShape { size -> moveTo(33.dp.toPx(), 7.7.dp.toPx()) lineTo(size.width - 13.dp.toPx(), 3.7.dp.toPx()) lineTo(size.width - 25.7.dp.toPx(), size.height - 4.6.dp.toPx( lineTo(20.4.dp.toPx(), size.height - 12.dp.toPx()) close() } ©ATLUS ©SEGA
62. c5inco / shape-composer-figma
63. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, ) ©ATLUS ©SEGA
64. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = outerBox() val innerBox = innerBox() } ) ©ATLUS ©SEGA
65. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = outerBox() val innerBox = innerBox() drawShape(outerBox, color = Color.White) drawShape(innerBox, color = Color.Black) } ) ©ATLUS ©SEGA
66. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = Outline(outerBox()) val innerBox = Outline(innerBox()) drawOutline(outerBox, color = Color.White) drawOutline(innerBox, color = Color.Black) } ) ©ATLUS ©SEGA
67. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = Outline(outerBox()) val innerBox = Outline(innerBox()) drawOutline(outerBox, color = Color.White) drawOutline(innerBox, color = Color.Black) } .padding( ... ) ) ©ATLUS ©SEGA
68. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = Outline(outerBox()) val innerBox = Outline(innerBox()) drawOutline(outerBox, color = Color.White) drawOutline(innerBox, color = Color.Black) } .padding( ... ) ) ©ATLUS ©SEGA
69. ©ATLUS ©SEGA
70. Avatar ©ATLUS ©SEGA
71. ©ATLUS ©SEGA
72. Row { TextBox() } ©ATLUS ©SEGA
73. Row { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) TextBox() } ©ATLUS ©SEGA
74. Box( modifier = Modifier .drawBehind { drawOutline(avatarBlackBox(), Color.Black) drawOutline(avatarWhiteBox(), Color.White) drawOutline(avatarColoredBox(), pink) } ) { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) } ©ATLUS ©SEGA
75. Box( modifier = Modifier .drawBehind { drawOutline(avatarBlackBox(), Color.Black) drawOutline(avatarWhiteBox(), Color.White) drawOutline(avatarColoredBox(), pink) drawOutline (​ avatarClipBox(), Color.Magenta) } ) { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) } ©ATLUS ©SEGA
76. Box( modifier = Modifier .drawBehind { drawOutline(avatarBlackBox(), Color.Black) drawOutline(avatarWhiteBox(), Color.White) drawOutline(avatarColoredBox(), pink) } .clip (​ avatarClipBox( )​ ) ) { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) } ©ATLUS ©SEGA
77. Message layout ©ATLUS ©SEGA
78. Row { Avatar() TextBox() } ©ATLUS ©SEGA
79. Row { Avatar() Stem()? TextBox() } ©ATLUS ©SEGA
80. ©ATLUS ©SEGA
81. ©ATLUS ©SEGA
82. Row { Avatar() TextBox() } ©ATLUS ©SEGA
83. Row { Avatar() TextBox( modifier = Modifier.offset(x = (-40).dp) ) } ©ATLUS ©SEGA
84. Row { Avatar() TextBox( modifier = Modifier.offset(x = (-40).dp) ) } ©ATLUS ©SEGA
85. Row { Avatar() TextBox() } ©ATLUS ©SEGA
86. Row { Avatar() TextBox() } ©ATLUS ©SEGA
87. Layout( content = { // Composables ... } ) { measurables, constraints -> }
88. Layout( content = { // Composables ... } ) { measurables, constraints -> val placeables = measurables.map { it.measure(constraints) } }
89. Layout( content = { // Composables ... } ) { measurables, constraints -> val placeables = measurables.map { it.measure(constraints) } layout(width, height) { placeables.forEach { it.place(x, y) } } }
90. Layout( content = { // Composables ... } ) { measurables, constraints -> val placeables = measurables.map { it.measure(constraints) } layout(width, height) { placeables.forEach { it.place(x, y) } } } ©ATLUS ©SEGA
91. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> } ©ATLUS ©SEGA
92. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> } ©ATLUS ©SEGA
93. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) } ©ATLUS ©SEGA
94. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp } ©ATLUS ©SEGA
95. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp } ©ATLUS ©SEGA
96. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) } ©ATLUS ©SEGA
97. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) val width = avatarPlaceable.width + textPlaceable.width - 18.dp val height = maxOf(avatarPlaceable.height, textPlaceable.height) } ©ATLUS ©SEGA
98. Layout( content = { Avatar() TextBox() } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) val width = avatarPlaceable.width + textPlaceable.width - 18.dp val height = maxOf(avatarPlaceable.height, textPlaceable.height) layout(width, height) { avatarPlaceable.place(0, 0) } } ©ATLUS ©SEGA
99. } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) val width = avatarPlaceable.width + textPlaceable.width - 18.dp val height = maxOf(avatarPlaceable.height, textPlaceable.height) layout(width, height) { avatarPlaceable.place(0, 0) val textBoxX = avatarPlaceable.width - textBoxOverlap val textBoxY = if (textPlaceable.height > avatarPlaceable.height) 0 else height - textPlaceable.height textPlaceable.place(textBoxX, textBoxY) } } ©ATLUS ©SEGA
100. } ) { (avatarMeasurable, textMeasurable), constraints -> val avatarPlaceable = avatarMeasurable.measure(constraints) val textMaxWidth = constraints.maxWidth - avatarPlaceable.width + 18.dp val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) val width = avatarPlaceable.width + textPlaceable.width - 18.dp val height = maxOf(avatarPlaceable.height, textPlaceable.height) layout(width, height) { avatarPlaceable.place(0, 0) val textBoxX = avatarPlaceable.width - textBoxOverlap val textBoxY = if (textPlaceable.height > avatarPlaceable.height) 0 else height - textPlaceable.height textPlaceable.place(textBoxX, textBoxY) } } ©ATLUS ©SEGA
101. LazyColumn( verticalArrangement = Arrangement.spacedBy(16.dp), contentPadding = WindowInsets.systemBars .add(WindowInsets(top = 100.dp, bottom = 100.dp)) .asPaddingValues(), modifier = Modifier.fillMaxSize(), ) ©ATLUS ©SEGA
102. Line ©ATLUS ©SEGA
103. ©ATLUS ©SEGA
104. Centres itself to the first item ©ATLUS ©SEGA
105. Centres itself to the first item Alternates left and right by a random offset ©ATLUS ©SEGA
106. Centres itself to the first item Alternates left and right by a random offset Centres itself to the last item ©ATLUS ©SEGA
107. Centres itself to the first item Alternates left and right by a random offset Centres itself to the last item Jumps to a final position before animating ©ATLUS ©SEGA
108. Modelling data Modelling data ©ATLUS ©SEGA
109. Modelling data enum class Sender( @DrawableRes val image: Int, val color: Color, ) { Kasumi(R.drawable.kasumi, Color(0xFFD53359)), Ryuji(R.drawable.ryuji, Color(0xFFF0EA40)), Ann(R.drawable.ann, Color(0xFFFE93C9)), } Modelling data ©ATLUS ©SEGA
110. Modelling data Modelling data data class Message( val sender: Sender, val text: String, ) enum class Sender( @DrawableRes val image: Int, val color: Color, ) { Kasumi(R.drawable.kasumi, Color(0xFFD53359)), Ryuji(R.drawable.ryuji, Color(0xFFF0EA40)), Ann(R.drawable.ann, Color(0xFFFE93C9)), } ©ATLUS ©SEGA
111. Modelling data Modelling data data class LineCoordinates( val leftPoint: Offset, val rightPoint: Offset, ) ©ATLUS ©SEGA
112. Modelling data Modelling data data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) data class LineCoordinates( val leftPoint: Offset, val rightPoint: Offset, ) ©ATLUS ©SEGA
113. Where to store these data? ViewModel is one option UI state is another option ©ATLUS ©SEGA
114. Where to store these data? ViewModel is one option UI state is another option val scrollState = rememberScrollState() val pagerState = rememberPagerState() val textState = rememberTextFieldState() ©ATLUS ©SEGA
115. ViewModel UI state Current list of messages Entries Background line coordinates Item animation progress
116. ViewModel UI state LazyColumn
117. @Composable fun rememberTranscriptState(): TranscriptState { val density = LocalDensity.current val coroutineScope = rememberCoroutineScope() return remember(density) { TranscriptState(density, coroutineScope) } }
118. @Composable fun rememberTranscriptState(): TranscriptState { val density = LocalDensity.current val coroutineScope = rememberCoroutineScope() return remember(density) { TranscriptState(density, coroutineScope) } }
119. @Stable class TranscriptState internal constructor( private val density: Density, private val coroutineScope: CoroutineScope, ) { private val _entries = mutableStateOf<List<Entry >> (emptyList()) val entries: List<Entry> by _entries }
120. messageText [ ] val entries: List<Entry> by _entries ©ATLUS ©SEGA
121. messageText [ ] messageText messageText [ ] , val entries: List<Entry> by _entries ©ATLUS ©SEGA
122. messageText [ ] messageText messageText [ ] , messageText messageText messageText [ ] , , val entries: List<Entry> by _entries ©ATLUS ©SEGA
123. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
124. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
125. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) ©ATLUS ©SEGA
126. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
127. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
128. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX, y), rightPoint = Offset(rightX, y), ) ©ATLUS ©SEGA
129. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX, y), rightPoint = Offset(rightX, y), ) ©ATLUS ©SEGA
130. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX, y), rightPoint = Offset(rightX, y), ) ©ATLUS ©SEGA
131. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val direction = if (message.index % 2 = = 0) 1f else -1f ©ATLUS ©SEGA
132. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val direction = if (message.index % 2 = = 0) 1f else -1f val horizontalShift = randomBetween(MinShift, MaxShift) * direction ©ATLUS ©SEGA
133. val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val direction = if (message.index % 2 = = 0) 1f else -1f val horizontalShift = randomBetween(MinShift, MaxShift) * direction val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX + horizontalShift, y), rightPoint = Offset(leftX + horizontalShift, y), ) ©ATLUS ©SEGA
134. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f val direction = if (message.index % 2 = = 0) 1f else -1f val horizontalShift = randomBetween(MinShift, MaxShift) * direction val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX + horizontalShift, y), rightPoint = Offset(leftX + horizontalShift, y), ) ©ATLUS ©SEGA
135. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f val direction = if (message.index % 2 = = 0) 1f else -1f val horizontalShift = randomBetween(MinShift, MaxShift) * direction val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX + horizontalShift, y), rightPoint = Offset(leftX + horizontalShift, y), ) ©ATLUS ©SEGA
136. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) val leftX = (AvatarSize.width / 2f) - (lineWidth / 2f) val rightX = leftX + lineWidth val y = AvatarSize.height / 2f val direction = if (message.index % 2 = = 0) 1f else -1f val horizontalShift = randomBetween(MinShift, MaxShift) * direction val lineCoordinates = LineCoordinates( leftPoint = Offset(leftX + horizontalShift, y), rightPoint = Offset(leftX + horizontalShift, y), ) ©ATLUS ©SEGA
137. ©ATLUS ©SEGA
138. val listState = rememberLazyListState() LazyColumn(state = listState) ©ATLUS ©SEGA
139. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries LazyColumn(state = listState) ©ATLUS ©SEGA
140. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries LazyColumn(state = listState) { items(entries) { entry -> Entry(entry) } } ©ATLUS ©SEGA
141. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries BackgroundLine(listState, entries) LazyColumn(state = listState) { items(entries) { entry -> Entry(entry) } } ©ATLUS ©SEGA
142. @Composable private fun BackgroundLine( entries: List<Entry>, listState: LazyListState, ) { val visibleItemInfos = listState.layoutInfo.visibleItemsInfo } ©ATLUS ©SEGA
143. @Composable private fun BackgroundLine( entries: List<Entry>, listState: LazyListState, ) { val visibleItemInfos = listState.layoutInfo.visibleItemsInfo } interface LazyListItemInfo { /** * The main axis offset of the item in pixels. * It is relative to the start of the lazy list container. */ val offset: Int } ©ATLUS ©SEGA
144. @Composable private fun BackgroundLine( entries: List<Entry>, listState: LazyListState, ) { val visibleItemInfos = listState.layoutInfo.visibleItemsInfo } interface LazyListItemInfo { /** * The main axis offset of the item in pixels. * It is relative to the start of the lazy list container. */ val offset: Int } ©ATLUS ©SEGA
145. @Composable private fun BackgroundLine( entries: List<Entry>, listState: LazyListState, ) { val visibleItemInfos = listState.layoutInfo.visibleItemsInfo } interface LazyListItemInfo { /** * The main axis offset of the item in pixels. * It is relative to the start of the lazy list container. */ v​ al offset: Int } ©ATLUS ©SEGA
146. @Composable private fun BackgroundLine( entries: List<Entry>, listState: LazyListState, ) { val visibleItemInfos = listState.layoutInfo.visibleItemsInfo Canvas(modifier = Modifier.fillMaxSize()) { for (info in visibleItemInfos) { drawPath(getPoints(info, entries[info.index]), Color.Black) } } } interface LazyListItemInfo { * * The main axis offset of the item in pixels. * It is relative to the start of the lazy list container. / v​ } ©ATLUS ©SEGA
147. ©ATLUS ©SEGA
148. Total height Overlap height ©ATLUS ©SEGA
149. ©ATLUS ©SEGA
150. ©ATLUS ©SEGA
151. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { } ©ATLUS ©SEGA
152. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { if (entry2 == null) return this return drawWithCache { onDrawBehind { } } } ©ATLUS ©SEGA
153. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { if (entry2 == null) return this return drawWithCache { val linePath = Path() val topLeft = entry1.lineCoordinates.leftPoint val topRight = entry1.lineCoordinates.rightPoint val bottomLeft = entry2.lineCoordinates.leftPoint + bottomOffset val bottomRight = entry2.lineCoordinates.rightPoint + bottomOffset onDrawBehind { } } } ©ATLUS ©SEGA
154. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { if (entry2 == null) return this return drawWithCache { val linePath = Path() val topLeft = entry1.lineCoordinates.leftPoint val topRight = entry1.lineCoordinates.rightPoint val bottomLeft = entry2.lineCoordinates.leftPoint + bottomOffset val bottomRight = entry2.lineCoordinates.rightPoint + bottomOffset onDrawBehind { with(linePath) { rewind() moveTo(topLeft.x, topLeft.y) lineTo(topRight.x, topRight.y) lineTo(bottomRight.x, bottomRight.y) lineTo(bottomLeft.x, bottomLeft.y) close() } drawPath(linePath, Color.Black) } } ©ATLUS ©SEGA
155. val bottomRight = entry2.lineCoordinates.rightPoint + bottomOffset val shadowPaint = Paint().apply { color = Color.Black alpha = 0.5f asFrameworkPaint().maskFilter = BlurMaskFilter(4.dp.toPx(), NORMAL) } onDrawBehind { with(linePath) { rewind() moveTo(topLeft.x, topLeft.y) lineTo(topRight.x, topRight.y) lineTo(bottomRight.x, bottomRight.y) lineTo(bottomLeft.x, bottomLeft.y) close() } translate(top = 16.dp.toPx()) { drawIntoCanvas { it.drawPath(linePath, shadowPaint) } } drawPath(linePath, Color.Black) } } ©ATLUS ©SEGA
156. ©ATLUS ©SEGA
157. ©ATLUS ©SEGA Portraits
158. ©ATLUS ©SEGA
159. ©ATLUS ©SEGA
160. ©ATLUS ©SEGA
161. ©ATLUS ©SEGA
162. ©ATLUS ©SEGA
163. ©ATLUS ©SEGA
164. ©ATLUS ©SEGA
165. ©ATLUS ©SEGA
166. ©ATLUS ©SEGA
167. ©ATLUS ©SEGA
168. ©ATLUS ©SEGA @Composable fun Portraits(senders: List<Sender>) { Canvas { } }
169. ©ATLUS ©SEGA @Composable fun Portraits(senders: List<Sender>) { val displayModels = remember(senders) { } Canvas { } }
170. ©ATLUS ©SEGA @Composable fun Portraits(senders: List<Sender>) { val displayModels = remember(senders) { val darkAvatarIndex = Random.nextInt(senders.size) senders.shuffled().mapIndexed { index, sender -> sender.getDisplayModel( darkAvatar = darkAvatarIndex == index, ) } } Canvas {
171. ©ATLUS ©SEGA data class PortraitDisplayModel( val image: ImageBitmap, val middlePath: Path, val innerPath: Path, val imageOffset: Offset, val outerRotation: Float, val middleRotation: Float, val innerRotation: Float, val horizontalOffset: Float, val verticalOffset: Float, val darkAvatar: Boolean, )
172. ©ATLUS ©SEGA data class PortraitDisplayModel( val image: ImageBitmap, val middlePath: Path, val innerPath: Path, val imageOffset: Offset, val outerRotation: Float, val middleRotation: Float, val innerRotation: Float, val horizontalOffset: Float, val verticalOffset: Float, val darkAvatar: Boolean, )
173. ©ATLUS ©SEGA data class PortraitDisplayModel( val image: ImageBitmap, val middlePath: Path, val innerPath: Path, val imageOffset: Offset, val outerRotation: Float, val middleRotation: Float, val innerRotation: Float, val horizontalOffset: Float, val verticalOffset: Float, val darkAvatar: Boolean, )
174. ©ATLUS ©SEGA data class PortraitDisplayModel( val image: ImageBitmap, val middlePath: Path, val innerPath: Path, val imageOffset: Offset, val outerRotation: Float, val middleRotation: Float, val innerRotation: Float, val horizontalOffset: Float, val verticalOffset: Float, val darkAvatar: Boolean, )
175. ©ATLUS ©SEGA Canvas { }
176. ©ATLUS ©SEGA Canvas { }
177. Canvas { var stride = 0f val rotationPivot = Offset( x = PortraitSize.width.toPx(), y = PortraitSize.height.toPx(), ) for (model in portraitDisplayModels) { } } ©ATLUS ©SEGA
178. Canvas { var stride = 0f val rotationPivot = Offset( x = PortraitSize.width.toPx(), y = PortraitSize.height.toPx(), ) for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(degrees = model.outerRotation, pivot = rotationPivot) } ) { drawRect(Color.Black, size = PortraitSize.toSize()) } } ©ATLUS ©SEGA
179. Canvas { var stride = 0f val rotationPivot = Offset( x = PortraitSize.width.toPx(), y = PortraitSize.height.toPx(), ) for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(degrees = model.outerRotation, pivot = rotationPivot) } ) { drawRect(Color.Black, size = PortraitSize.toSize()) } stride += PortraitSize.width.toPx() } ©ATLUS ©SEGA
180. Canvas { var stride = 0f val rotationPivot = Offset( x = PortraitSize.width.toPx(), y = PortraitSize.height.toPx(), ) for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(degrees = model.outerRotation, pivot = rotationPivot) } ) { drawRect(Color.Black, size = PortraitSize.toSize()) } stride += PortraitSize.width.toPx() } stride = 0f for (model in portraitDisplayModels) { } ©ATLUS ©SEGA
181. withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(degrees = model.outerRotation, pivot = rotationPivot) } ) { drawRect(Color.Black, size = PortraitSize.toSize()) } stride += PortraitSize.width.toPx() } stride = 0f for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(model.middleRotation, pivot = rotationPivot) } ) { drawPath(model.middlePath, Color.White) } } ©ATLUS ©SEGA
182. } stride = 0f for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(model.middleRotation, pivot = rotationPivot) } ) { drawPath(model.middlePath, Color.White) withTransform( transformBlock = { rotate(model.innerRotation, rotationPivot) clipPath(model.innerPath) }, ) { if (model.darkAvatar) { drawRect(Color.Black) } } } } ©ATLUS ©SEGA
183. for (model in portraitDisplayModels) { stride += model.horizontalOffset withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(model.middleRotation, pivot = rotationPivot) } ) { drawPath(model.middlePath, Color.White) withTransform( transformBlock = { rotate(model.innerRotation, rotationPivot) clipPath(model.innerPath) }, ) { if (model.darkAvatar) { drawRect(Color.Black) } translate(left = model.imageOffset.x, top = model.imageOffset.y) { drawImage(model.image) } } } } ©ATLUS ©SEGA
184. withTransform( transformBlock = { translate(stride + model.horizontalOffset, model.verticalOffset) rotate(model.middleRotation, pivot = rotationPivot) } ) { drawPath(model.middlePath, Color.White) withTransform( transformBlock = { rotate(model.innerRotation, rotationPivot) clipPath(model.innerPath) }, ) { if (model.darkAvatar) { drawRect(Color.Black) } translate(left = model.imageOffset.x, top = model.imageOffset.y) { drawImage(model.image) } } } stride += PortraitSize.width.toPx() } ©ATLUS ©SEGA
185. Animations ©ATLUS ©SEGA
186. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
187. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, val lineProgress: State<Float>, ) ©ATLUS ©SEGA
188. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, val lineProgress: State<Float>, val avatarBackgroundScale: State<Float>, val avatarForegroundScale: State<Float>, ) ©ATLUS ©SEGA
189. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, val lineProgress: State<Float>, val avatarBackgroundScale: State<Float>, val avatarForegroundScale: State<Float>, val messageHorizontalScale: State<Float>, val messageVerticalScale: State<Float>, val messageTextAlpha: State<Float>, ) ©ATLUS ©SEGA
190. avatarBackgroundScale = Animatable(initialValue = 0.6f) ©ATLUS ©SEGA
191. avatarBackgroundScale = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } ©ATLUS ©SEGA
192. avatarBackgroundScale: Animatable<Float, AnimationVector1D> = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } ©ATLUS ©SEGA
193. avatarBackgroundScale: State<Float> = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } .asState() ©ATLUS ©SEGA
194. avatarBackgroundScale = Animatable(initialValue = 0.6f) .apply { // . .. } ©ATLUS ©SEGA
195. avatarBackgroundScale = Animatable(initialValue = 0.6f) .apply { // . .. } avatarForegroundScale = Animatable(initialValue = 0.0f) .apply { coroutineScope.launch { delay(160L) snapTo(0.8f) animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 150, easing = EaseOutBack, ), ) } } .asState() ©ATLUS ©SEGA
196. avatarBackgroundScale = Animatable(initialValue = 0.6f) .apply { // . .. } avatarForegroundScale = Animatable(initialValue = 0.0f) .apply { coroutineScope.launch { delay(160L) snapTo(0.8f) animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 150, easing = EaseOutBack, ), ) } } .asState() ©ATLUS ©SEGA
197. Box( modifier = Modifier .size(AvatarSize) .drawBehind { // Previous drawing code } ) { } ©ATLUS ©SEGA
198. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { } ©ATLUS ©SEGA
199. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { Image( painter = painterResource(entry.message.sender.image), ) } ©ATLUS ©SEGA
200. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { Image( painter = painterResource(entry.message.sender.image), modifier = Modifier.graphicsLayer { transformOrigin = TransformOrigin( pivotFractionX = 0.5f, pivotFractionY = 1.15f, ), scaleX = entry.avatarForegroundScale.value scaleY = entry.avatarForegroundScale.value } ) } ©ATLUS ©SEGA
201. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { Image( painter = painterResource(entry.message.sender.image), modifier = Modifier.graphicsLayer { transformOrigin = TransformOrigin( pivotFractionX = 0.5f, pivotFractionY = 1.15f, ), scaleX = entry.avatarForegroundScale.value scaleY = entry.avatarForegroundScale.value } ) } ©ATLUS ©SEGA
202. onDrawBehind { with(linePath) { rewind() moveTo(topLeft.x, topLeft.y) lineTo(topRight.x, topRight.y) lineTo (​ bottomRight.x, bottomRight.y) lineTo (​ bottomLeft.x, bottomLeft.y) close() } drawPath(linePath, Color.Black) } v​ al b​ ottomLeft = entry2.lineCoordinates.leftPoint v​ al b​ ottomRight = entry2.lineCoordinates.rightPoint The line ©ATLUS ©SEGA
203. onDrawBehind { val currentBottomLeft = lerp( start = topLeft, stop = bottomLeft, fraction = entry1.lineProgress.value, ) val currentBottomRight = lerp( start = topRight, stop = bottomRight, fraction = entry1.lineProgress.value, ) with(linePath) { rewind() moveTo(topLeft.x, topLeft.y) lineTo(topRight.x, topRight.y) lineTo (​ currentBottomRight.x, currentBottomRight.y) lineTo (​ currentBottomLeft.x, currentBottomLeft.y) close() } drawPath(linePath, Color.Black) } ©ATLUS ©SEGA
204. onDrawBehind { val currentBottomLeft: Offset = lerp( start = topLeft, stop = bottomLeft, fraction = entry1.lineProgress.value, ) val currentBottomRight: Offset = lerp( start = topRight, stop = bottomRight, fraction = entry1.lineProgress.value, ) with(linePath) { rewind() moveTo(topLeft.x, topLeft.y) lineTo(topRight.x, topRight.y) lineTo (​ currentBottomRight.x, currentBottomRight.y) lineTo (​ currentBottomLeft.x, currentBottomLeft.y) close() } drawPath(linePath, Color.Black) } ©ATLUS ©SEGA
205. coroutineScope.launch { while (true) { delay(300) dotVisible1.value = true delay(300) dotVisible2.value = true delay(300) dotVisible3.value = true delay(400) dotVisible1.value = false delay(100) dotVisible2.value = false delay(100) dotVisible3.value = false } } ©ATLUS ©SEGA
206. ©ATLUS ©SEGA
207. @Composable fun BackgroundParticles(season: Season, modifier: Modifier = Modifier) { val state = remember { ParticlesState() } state.season = season if (season == Season.NONE) return val frameTimeMillis by rememberFrameTimeMillis() Canvas(modifier = modifier.fillMaxSize()) { state.update(frameTimeMillis) state.particles.fastForEach { particle -> // Draw particle ... } } }
208. @Composable fun BackgroundParticles(season: Season, modifier: Modifier = Modifier) { val state = remember { ParticlesState() } state.season = season if (season == Season.NONE) return val frameTimeMillis by rememberFrameTimeMillis() Canvas(modifier = modifier.fillMaxSize()) { state.update(frameTimeMillis) state.particles.fastForEach { particle -> // Draw particle ... } } }
209. @Composable private fun rememberFrameTimeMillis(): LongState { val millisState = remember { mutableLongStateOf(0L) } LaunchedEffect(Unit) { val startTime = withFrameMillis { it } while (true) { withFrameMillis { frameTime -> millisState.longValue = frameTime - startTime } } } return millisState }
210. @Composable private fun rememberFrameTimeMillis(): LongState { val millisState = remember { mutableLongStateOf(0L) } LaunchedEffect(Unit) { val startTime = withFrameMillis { it } while (true) { withFrameMillis { frameTime -> millisState.longValue = frameTime - startTime } } } return millisState }
211. class ParticlesState { }
212. class ParticlesState { private val active = ArrayList<Particle>(MAX_PARTICLE_COUNT) private val pool = ArrayDeque<Particle>(MAX_PARTICLE_COUNT).apply { repeat(MAX_PARTICLE_COUNT) { add(Particle()) } } }
213. class ParticlesState { private val active = ArrayList<Particle>(MAX_PARTICLE_COUNT) private val pool = ArrayDeque<Particle>(MAX_PARTICLE_COUNT).apply { repeat(MAX_PARTICLE_COUNT) { add(Particle()) } } val particles: List<Particle> get() = active fun update(time: Long, worldSize: DpSize) { } }
214. class ParticlesState { private val active = ArrayList<Particle>(MAX_PARTICLE_COUNT) private val pool = ArrayDeque<Particle>(MAX_PARTICLE_COUNT).apply { repeat(MAX_PARTICLE_COUNT) { add(Particle()) } } val particles: List<Particle> get() = active private var lastUpdateTime = 0L fun update(time: Long, worldSize: DpSize) { if (time > nextSpawnTime && pool.isNotEmpty()) { // Move a particle from pool to active. } val deltaSeconds = (time - lastUpdateTime) / 1000f lastUpdateTime = time } }
215. private var lastUpdateTime = 0L fun update(time: Long, worldSize: DpSize) { if (time > nextSpawnTime && pool.isNotEmpty()) { // Move a particle from pool to active. } val deltaSeconds = (time - lastUpdateTime) / 1000f for (index in active.indices.reversed()) { val particle = active[index] if ( particle.x < -DESPAWN_BUFFER_SIZE || particle.y > worldSize.height + DESPAWN_BUFFER_SIZE ) { active.remove(particle) pool.add(particle) } } lastUpdateTime = time } }
216. if (time > nextSpawnTime && pool.isNotEmpty()) { // Move a particle from pool to active. } val deltaSeconds = (time - lastUpdateTime) / 1000f for (index in active.indices.reversed()) { val particle = active[index] if ( particle.x < -DESPAWN_BUFFER_SIZE || particle.y > worldSize.height + DESPAWN_BUFFER_SIZE ) { active.remove(particle) pool.add(particle) } else { with(particle) { rotation += rotationSpeed * deltaSeconds x += xSpeed * deltaSeconds y += (period * sin(amplitude * x.value) + (ySpeed.value * deltaSeconds)).dp } } } lastUpdateTime = time } }
217. if (time > nextSpawnTime && pool.isNotEmpty()) { // Move a particle from pool to active. } val deltaSeconds = (time - lastUpdateTime) / 1000f for (index in active.indices.reversed()) { val particle = active[index] if ( particle.x < -DESPAWN_BUFFER_SIZE || particle.y > worldSize.height + DESPAWN_BUFFER_SIZE ) { active.remove(particle) pool.add(particle) } else { with(particle) { rotation += rotationSpeed * deltaSeconds x += xSpeed * deltaSeconds y += (period * sin(amplitude * x.value) + (ySpeed.value * deltaSecon } } } lastUpdateTime = time } }
218. Takeaways Compose UI facilitates creativity Some UIs should be boring, but not all of them Maybe we lost some magic with all the consistency Video games can be source of inspiration
222. gameuidatabase.com
223. gameuidatabase.com ©ATLUS ©SEGA
224. Thank you, and don’t forget to vote
225. Creative UIs with Compose github.com/chris-horner/persona-im All art and character designs in this presentation are the property of Atlus Co., Ltd. Material is used for reference and educational purposes only. © @chris-horner@bsky.social