Creative UIs with Compose: DroidKaigi 2024

A talk from DroidKaigi 2024. While most of the time following Material recommendations on Android makes sense, Compose UI allows us to be more expressive than ever before.

This talk walks through how mobile 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 on Android.

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 Design Systems at Cash App
2. We ’ re going to analyse and build a complex UI But first… ҰॹʹෳࡶͳUIͷௐࠪͱߏஙΛߦ͍·͢ɻ ·ͣɻɻɻ
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 UI ͷϑϨʔϜϫʔΫ͸࢛֯ܗ͔Βߏங͞Ε͍ͯ·͢ɻ
11. Column { Box() Row { Box() Box() } }
12. Flat design ϑϥοτσβΠϯ Easy for a designer to put together σβΠφʔʹͱͬͯ͸؆୯ʹશͯΛ૊Έ߹ΘͤΒΕΔ Simple for a developer to build ։ൃऀʹͱͬͯߏங͕؆୯ͳ͜ͱʹͳΔ Low effort to read ಡΉͷʹख͕͔͔ؒΒͳ͍ Renders quickly ૉૣ͘ඳ্͖͛Δ Responsive ൓Ԡ͕͍͍ Dark mode μʔΫϞʔυ
13. Boring 😴 is good ฏຌͳ͍͍͜ͱͰ͢Ͷɻ
14. Boring 😴 is good Phone calls ి࿩ Customer support ΧελϚʔαʔϏε Maps / navigation ஍ਤʗφϏ Email ϝʔϧ But… have we gone too far? ͔͠͠...ߦ͖ա͗ͨͷͩΖ͏͔ʁ ฏຌͳ͍͍͜ͱͰ͢Ͷɻ
15. Let ’ s go back in time… աڈʹ໭Γ·͠ΐ͏
16. 2009೥
17. appleinsider.com
22. skins.webamp.org
23. gameuidatabase.com
24. ©ATLUS ©SEGA
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? ͲͷΑ͏ʹUIߏஙΛ͍͚ͯ͠͹͍͍ͷͰ͠ΐ͏͔ʁ
31. ©ATLUS ©SEGA
32. ©ATLUS ©SEGA
33. ©ATLUS ©SEGA
34. ©ATLUS ©SEGA
35. ©ATLUS ©SEGA
36. Background
37. ©ATLUS ©SEGA
38. val PersonaRed = Color(0xFFC41001) Box( modifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { } ©ATLUS ©SEGA
39. val PersonaRed = Color(0xFFC41001) Box( modifier = Modifier .fillMaxSize() .background(color = PersonaRed) ) { } ©ATLUS ©SEGA
40. 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
41. 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
42. Textbox ©ATLUS ©SEGA
43. ©ATLUS ©SEGA
44. Sup? ©ATLUS ©SEGA
45. Sup? ©ATLUS ©SEGA
46. romainguy / v9 ©ATLUS ©SEGA
47. romainguy / v9 ©ATLUS ©SEGA
48. romainguy / v9 ©ATLUS ©SEGA
49. romainguy / v9 ©ATLUS ©SEGA
50. fun outerBox(): Shape = GenericShape { size -> } ©ATLUS ©SEGA
51. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) } ©ATLUS ©SEGA
52. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) } ©ATLUS ©SEGA
53. fun outerBox(): Shape = GenericShape { size -> moveTo(31.7, 3.1) lineTo(size.width, 0f) lineTo(size.width - 23, size.height) } ©ATLUS ©SEGA
54. 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
55. 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
56. 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
57. 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
58. 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
59. c5inco / shape-composer-figma
60. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, ) ©ATLUS ©SEGA
61. Text( text = message.text, style = MaterialTheme.typography.bodyMedium, color = Color.White, fontFamily = OptimaNova, modifier = Modifier .drawBehind { val outerBox = outerBox() val innerBox = innerBox() } ) ©ATLUS ©SEGA
62. 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
63. 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
64. 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
65. 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
66. ©ATLUS ©SEGA
67. Avatar ©ATLUS ©SEGA
68. ©ATLUS ©SEGA
69. Row { TextBox() } ©ATLUS ©SEGA
70. Row { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) TextBox() } ©ATLUS ©SEGA
71. Row { Image( painter = painterResource(R.drawable.ann), contentDescription = null, ) TextBox() } ©ATLUS ©SEGA
72. 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
73. 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
74. 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
75. Message layout ©ATLUS ©SEGA
76. Row { Avatar() TextBox() } ©ATLUS ©SEGA
77. Row { Avatar() Stem()? TextBox() } ©ATLUS ©SEGA
78. ©ATLUS ©SEGA
79. ©ATLUS ©SEGA
80. ©ATLUS ©SEGA
81. Row { Avatar() TextBox() } ©ATLUS ©SEGA
82. Row { Avatar() TextBox( modifier = Modifier.offset(x = (-40).dp) ) } ©ATLUS ©SEGA
83. Row { Avatar() TextBox( modifier = Modifier.offset(x = (-40).dp) ) } ©ATLUS ©SEGA
84. Row { Avatar() TextBox() } ©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 val textConstraints = constraints.copy(maxWidth = textMaxWidth) val textPlaceable = textMeasurable.measure(textConstraints) } ©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) val width = avatarPlaceable.width + textPlaceable.width - 18.dp val height = maxOf(avatarPlaceable.height, textPlaceable.height) } ©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) layout(width, height) { avatarPlaceable.place(0, 0) } } ©ATLUS ©SEGA
98. } ) { (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
99. LazyColumn( verticalArrangement = Arrangement.spacedBy(16.dp), contentPadding = WindowInsets.systemBars .add(WindowInsets(top = 100.dp, bottom = 100.dp)) .asPaddingValues(), modifier = Modifier.fillMaxSize(), ) ©ATLUS ©SEGA
100. Line ©ATLUS ©SEGA
101. ©ATLUS ©SEGA
102. 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
103. 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 σʔλϞσϧ
104. Modelling data Modelling data data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) data class LineCoordinates( val leftPoint: Offset, val rightPoint: Offset, ) ©ATLUS ©SEGA σʔλϞσϧ
105. 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 Ͳ͜ʹอ؅͢Δʁ
106. ViewModel UI state Current list of messages ࠓ·Ͱͷϝοηʔδ͕Ϧετʹ Entries Background line coordinates എܠઢίʔσΟωʔτ Item animation progress ΞΠςϜΞχϝʔγϣϯͷ ਐߦঢ়گ
107. ViewModel UI state LazyColumn
108. @Composable fun rememberTranscriptState(): TranscriptState { val density = LocalDensity.current val coroutineScope = rememberCoroutineScope() return remember(density) { TranscriptState(density, coroutineScope) } }
109. @Composable fun rememberTranscriptState(): TranscriptState { val density = LocalDensity.current val coroutineScope = rememberCoroutineScope() return remember(density) { TranscriptState(density, coroutineScope) } }
110. @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 }
111. messageText [ ] val entries: List<Entry> by _entries ©ATLUS ©SEGA
112. messageText [ ] messageText messageText [ ] , val entries: List<Entry> by _entries ©ATLUS ©SEGA
113. messageText [ ] messageText messageText [ ] , messageText messageText messageText [ ] , , val entries: List<Entry> by _entries ©ATLUS ©SEGA
114. 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
115. 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
116. 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
117. 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
118. val listState = rememberLazyListState() LazyColumn(state = listState) ©ATLUS ©SEGA
119. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries LazyColumn(state = listState) ©ATLUS ©SEGA
120. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries LazyColumn(state = listState) { items(entries) { entry -> Entry(entry) } } ©ATLUS ©SEGA
121. val listState = rememberLazyListState() val transcriptState = rememberTranscriptState() val entries = transcriptState.entries BackgroundLine(listState, entries) LazyColumn(state = listState) { items(entries) { entry -> Entry(entry) } } ©ATLUS ©SEGA
122. @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
123. @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
124. @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
125. ©ATLUS ©SEGA
126. ©ATLUS ©SEGA
127. Total height Overlap height ©ATLUS ©SEGA
128. ©ATLUS ©SEGA
129. ©ATLUS ©SEGA
130. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { } ©ATLUS ©SEGA
131. fun Modifier.drawConnectingLine(entry1: Entry, entry2: Entry?): Modifier { if (entry2 == null) return this return drawWithCache { onDrawBehind { } } } ©ATLUS ©SEGA
132. 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
133. 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
134. 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
135. ©ATLUS ©SEGA
136. Animations ©ATLUS ©SEGA
137. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, ) ©ATLUS ©SEGA
138. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, val lineProgress: State<Float>, ) ©ATLUS ©SEGA
139. data class Entry( val message: Message, val lineCoordinates: LineCoordinates, val lineProgress: State<Float>, val avatarBackgroundScale: State<Float>, val avatarForegroundScale: State<Float>, ) ©ATLUS ©SEGA
140. 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
141. avatarBackgroundScale = Animatable(initialValue = 0.6f) ©ATLUS ©SEGA
142. avatarBackgroundScale = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } ©ATLUS ©SEGA
143. avatarBackgroundScale: Animatable<Float, AnimationVector1D> = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } ©ATLUS ©SEGA
144. avatarBackgroundScale: State<Float> = Animatable(initialValue = 0.6f) .apply { coroutineScope.launch { animateTo( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = EaseOutBack, ), ) } } .asState() ©ATLUS ©SEGA
145. 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
146. 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
147. Box( modifier = Modifier .size(AvatarSize) .drawBehind { // Previous drawing code } ) { } ©ATLUS ©SEGA
148. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { } ©ATLUS ©SEGA
149. Box( modifier = Modifier .size(AvatarSize) .scale(entry.avatarBackgroundScale.value) .drawBehind { // Previous drawing code } ) { Image( painter = painterResource(entry.message.sender.image), ) } ©ATLUS ©SEGA
150. 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
151. 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
152. 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 ઢ Design property of Atlus Co., Ltd
153. 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
154. 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
155. ©ATLUS ©SEGA
156. Takeaways ςΠΫΞ΢τ Compose UI facilitates creativity Compose UI͕ಠ૑ੑΛߴΊΔ Some UIs should be boring, but not all of them Ұ෦ͷUI͸ୀ۶Ͱ͋Δ΂͖͕ͩɺ͢΂ͯͰ͸ͳ͍ Maybe we lost some magic with all the consistency Ұ؏ੑ͕ແ͘ͳͬͨ͜ͱͰɺϚδοΫ͕ࣦΘΕͯ͠·ͬͨͷ͔΋͠Εͳ͍ɻ Video games can be source of inspiration ήʔϜ͸ൃ૝ͷݯʹͳΔ
157. gameuidatabase.com
158. gameuidatabase.com ©ATLUS ©SEGA
159. Creative UIs with Compose github.com/chris-horner/persona-im chrishorner@androiddev.social All art and character designs in this presentation are the property of Atlus Co., Ltd. Material used for reference and educational purposes only. ©