Rich UI implementation examples using Jetpack Compose (Jetpack Composeを活用した強力なUI表現の実装実例)

アニメーションが再生されません🙇
動画をご参照ください→ https://www.youtube.com/watch?v=S1gYZgT_rAE

Transcript

1. Rich UI implementation examples using Jetpack Compose (Jetpack ComposeΛ׆༻ͨ͠ڧྗͳUIදݱͷ࣮૷࣮ྫ) DroidKaigi 2023 Chipmunk - 2023/09/15 14:00-14:40 @yokomii
2. About Me: yokomii Android Engineer at Nikkei inc @iimokoy bokuhayokomii@gmail.com  2
3.  3
4. Purpose of the Session: In this session, we will introduce you to techniques for implementing Rich UI that is "more intuitive👀" and "evokes user emotions🔥" using Jetpack Compose.  4
5. How do you feel about implementing a rich UI? • High maintenance and management costs. • Unclear implementation intent. • Difficulty in implementation (not knowing how to do it).  5
6. > High maintenance and management costs. Rich UI isn't simply implemented and released, and that's the end of it. obligation to maintain the quality consistently.  6
7. > High maintenance and management costs. Rich UI code is generally complex. So, - Which can lead to mental strain for engineers. - Conversely, a loss of interest (often pretending not to notice).  7
8. > High maintenance and management costs. In Android Views, "layout codes (XML)" and for implementing "Rich UI codes (Java, Kotlin)" are managed separately. layout codes (XML) ʴ Rich UI codes (Java, Kotlin)  8
9. > High maintenance and management costs. In the Layout Preview, changes made to Kotlin and Java-based implementations for Rich UI, which are added after defining the layout file, are not reflected. 👉 Lead to a decreased interest in the Rich UI code.  9
10. > High maintenance and management costs. In Jetpack Compose, layout and Rich UI implementation are written in the same Kotlin file. Kotlin Rich UI codes layout codes  10
11. > High maintenance and management costs. In Jetpack Compose Preview, you can validate the UI in a state with applied Rich UI implementation. 👉 Be more conscious of Rich UI implementation.  11
12. > High maintenance and management costs. If you write screenshot tests, you can also save time on visual verification! ref: https://github.com/takahirom/roborazzi  12
13. > Unclear implementation intent. Jetpack Compose doesn't answer even if you ask it about the implementation intent. Let's ask the designer!  13
14. > Difficulty in implementation (not knowing how to do it). Implementation method is not clear. ↓ 
 Development difficulty is judged to be high. ↓ 
 Cost is judged to be high.  14
15. > Difficulty in implementation (not knowing how to do it). Implementation method is not clear. ↓ 
 Development difficulty is judged to be high. ↓ 
 Cost is judged to be high. 👉 How about trying to learn the implementation method?  15
16. Let's start implementing a Rich UIʂ  16
17. Session Flow: 1. Features for implementing Rich UI 2. Examples of Rich UI implementations  17
18. Feature 1: AnnotatedString  18
19. AnnotatedString Enrich the following:  19
20. Instantiate AnnotatedString val annotatedString: AnnotatedString = buildAnnotatedString {} In Android View: val spannable = SpannableStringBuilder("")  20
21. Build AnnotatedString val annotatedString = buildAnnotatedString { append(text = "Congratulations, Droider ") append(text = "liked") append(text = " your post!”) check(this is AnnotatedString.Builder) }  21
22. Styling in AnnotatedString val annotatedString = buildAnnotatedString { append(text = "Congratulations, Droider ") withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color(0xFFF08080) ) ) { append(text = "liked") } append(text = " your post!") // ... Apply text styles.  22
23. constructor( color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontWeight: FontWeight? = null, fontStyle: FontStyle? = null, fontSynthesis: FontSynthesis? = null, fontFamily: FontFamily? = null, fontFeatureSettings: String? = null, letterSpacing: TextUnit = TextUnit.Unspecified, baselineShift: BaselineShift? = null, textGeometricTransform: TextGeometricTransform? = null, localeList: LocaleList? = null, background: Color = Color.Unspecified, textDecoration: TextDecoration? = null, shadow: Shadow? = null, platformStyle: PlatformSpanStyle? = null, drawStyle: DrawStyle? = null //... `androidx.compose.ui.text.SpanStyle.kt`:  23
24. AnnotatedString set to Text val annotatedString = buildAnnotatedString { /*...*/ } Text( text = annotatedString )  24
25. Result of AnnotatedString: ▶ Run  25
26. Insert content into AnnotatedString val annotatedString = buildAnnotatedString { append(text = "Congratulations, Droider ") withStyle( /*...*/ ) { append(text = "liked") } appendInlineContent(id = "heart_marks") // ... Content unique id.  26
27. Create InlineContent val inlineTextContent = InlineTextContent( placeholder = Placeholder( width = fontSize * 1.5, height = fontSize, placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter ) ) { TODO() }  27
28. Create InlineContent val inlineTextContent = InlineTextContent( /*...*/ ) { Row { Icon( imageVector = Icons.Default.Favorite, tint = Color(0xFFF08080), modifier = Modifier.weight(weight = 1f) ) Icon( imageVector = Icons.Default.Favorite, tint = Color(0x88F08080), modifier = Modifier.weight(weight = 0.5f) ) } }  28
29. InlineContent set to Text val annotatedString = buildAnnotatedString { // ... appendInlineContent(id = "heart_marks") // ... } 
 
 val inlineTextContent = InlineTextContent( /*...*/ ) { /*...*/ } Text( text = annotatedString, inlineContent = mapOf<String, InlineTextContent>( "heart_marks" to inlineTextContent ) )  29
30. Result of InlineContent: ▶ Run  30
31. Try next 👉  31
32. Feature 2: Brush  32
33. Brush subclasses: ɾLinearGradient ɾRadialGradient ɾSweepGradient ɾShaderBrush ɾSolidColor  33
34. LinearGradient  34
35. LinearGradient val colors = listOf(Color(0xFFFF9900), Color(0xFF5B8C83)) val linearGradientBrush: Brush = Brush.linearGradient(colors = colors) Box( modifier = Modifier .background(brush = linearGradientBrush) )  35
36. Default start-end offsets for LinearGradient Offset(x = 0.0f, y = 0.0f) Offset(x = 1.0F/0.0F, y = 1.0F/0.0F)  36
37. Reverses the offset of LinearGradient val linearGradientBrush = Brush.linearGradient( colors = colors, start = Offset.Infinite, // Offset.Infinite = (x = 1F/0F, y = 1F/0F) end = Offset.Zero // Offset.Zero = (x = 0F, y = 0F) )  37
38. Other LinearGradient  38
39. RadialGradient and SweepGradient val radialGradientBrush = Brush.radialGradient(colors = colors) val sweepGradientBrush = Brush.sweepGradient(colors = colors)  39
40. ShaderBrush: Drawing `android.graphics.Shader`. android.graphics.Shader: • With Android platform API • Drawing textures, gradients, patterns, etc...  40
41. Shaders used by Gradient brushes • LinearGradient ὎ `android.graphics.LinearGradient.java` • RadialGradient ὎ `android.graphics.RadialGradient.java` • SweepGradient ὎ `android.graphics.SweepGradient.java`  41
42. Composite shader brush example Create Shader A: val size = 100.dp val sizePx = with(LocalDensity.current) { size.toPx() } val colorsA = listOf(Color(0xFFFF9900), Color(0xFFC0ECFF)) val gradientShadeA = androidx.compose.ui.graphics.LinearGradientShader( from = Offset.Zero, to = Offset(sizePx, sizePx), colors = colorsA, colorStops = null, tileMode = TileMode.Clamp )  42
43. Composite shader brush example Create Shader B: val colorsB = listOf(Color(0xFF5B8C83), Color(0xFFE0DBFF)) val gradientShadeB = LinearGradientShader( from = Offset(sizePx, 0f), to = Offset(0f, sizePx), colors = colorsB, colorStops = null, tileMode = TileMode.Clamp )  43
44. Composite shader brush example Composite shaders A and B: val composeShader = android.graphics.ComposeShader( gradientShadeA, gradientShadeB, PorterDuff.Mode.OVERLAY ) val shaderBrush = ShaderBrush(shader = composeShader) Box( modifier = Modifier .background(brush = shaderBrush) .size(size = size) )  44
45. Result of ShaderBlush: ▶ Run  45
46. SolidColor val color = Color(0xFFFF9900) val solidColor = SolidColor(color) Row { Text( text = "SolidColor BG", modifier = Modifier .background(brush = solidColor) ) Text( text = "color BG", modifier = Modifier .background(color = color) ) }  46
47. Brush: • Drawing gradients - LinearGradient - RadialGradient - SweepGradient • Drawing `android.graphics.Shader` - ShaderBrush • Fill with a solid color (less commonly used) - SolidColor  47
48. Brush use cases Create Painter: val linearGradientBrush = Brush.linearGradient(colors = colors) val brushPainter = BrushPainter(brush = linearGradientBrush) Image( painter = brushPainter, contentDescription = "Gradient Image", // ... ) "Gradient Image" (In TalkBack).  48
49. Brush use cases Apply to TextStyle: val linearGradientBrush = Brush.linearGradient(colors = colors) Text( text = "Gradient Text", style = TextStyle(brush = linearGradientBrush) )  49
50. Feature 3: Modifier.drawWithContent  50
51. Modifier.drawWithContent Image( painter = painterResource(id = R.drawable.hamburger), modifier = Modifier.drawWithContent { drawRect(brush = linearGradientBrush) drawContent() // Draw source content. } // ... • Draw any object in front of and behind the content. • Draw oneself with `drawContent()`.  51
52. Modifier.drawWithContent Image( painter = painterResource(id = R.drawable.hamburger), modifier = Modifier.drawWithContent { drawContent() drawRect(brush = linearGradientBrush) } // ... Draw in the order of declaration.  52
53. Modifier.drawWithContent In Android View: class CustomImageView : ImageView { override fun onDraw(canvas: Canvas) { canvas.drawRect(0f, 0f, 100f, 100f, paint) super.onDraw(canvas) } }  53
54. More complex drawing Image( painter = painterResource(id = R.drawable.hamburger), modifier = Modifier.drawWithContent { drawContent() withTransform({ rotate(45f) scale(scaleX = 0.2f, scaleY = 2.0f) }) { drawRect(brush = linearGradientBrush) } withTransform({ rotate(-45f) scale(scaleX = 0.2f, scaleY = 2.0f) }) { drawRect(brush = linearGradientBrush) } } // ... V  54
55. Clip path (Coach Mark-like). Box( modifier = Modifier.drawWithContent { drawContent() clipPath( path = clipPath, clipOp = ClipOp.Difference ) { drawRect(color = Color(0x66000000)) } }, ) { Image( // ... For more: https://blog.studysapuri.jp/entry/2023/6/26/compose-spotlight  55
56. Modifier.drawBehind Image( modifier = Modifier.drawWithContent { drawRect(brush = linearGradientBrush) drawContent() } Image( modifier = Modifier.drawBehind { drawRect(brush = linearGradientBrush) } Draw only behind the component.  56
57. Modifier.drawWithCache modifier = Modifier.drawWithCache { val brush = Brush.linearGradient(colors = gradientColors) onDrawWithContent { drawRect(brush = brush) drawContent() } } Persist instance (e.g., Brush) in draw scope as long as the size is consistent or state objects remain unchanged; recreate when area or state changes.  57
58. Feature 4: Animation  58
59. What is "Animation"?  59
60. Animation ʹ "Value" that changes over time.  60
61. Is this Animation? 3x 0ms 1000ms  61
62. Is this Animation? 3x 0ms 1000ms seisi_baby.gif  62
63. Is this Animation? 3x 0ms 1000ms  63
64. This is Animation 1.25x 1.5x 1.75x 2x 2.25x 2.5x 2.75x 3x 0ms 1000ms  64
65. Value to change for scale animation 1.25x 1.5x 1.75x 2x 2.25x 2.5x 2.75x 3x 0ms 1000ms  65
66. Value to change for alpha animation a^0 a^0.12 a^0.25 a^0.37 a^0.5 a^0.62 a^0.75 a^0.87 a^1 0ms 1000ms  66
67. Animation ʹ "Value" that changes over time.  67
68. Animation value generation features  68
69. animateʓʓAsState: • ʓʓ is the name of the value to be generated. - Float, Int, Color, Size, Offset, etc... • Generate values based on the specified state as arguments. • Values are generated only when the state changes.  69
70. var isLargeScale by remember { mutableStateOf(false) } val scale: State<Float> by animateFloatAsState( targetValue = if (isLargeScale) 4f else 1f ) Create animateFloatAsState  70
71. Set animation value to Image scale var isLargeScale by remember { mutableStateOf(false) } val scale by animateFloatAsState(if (isLargeScale) 4f else 1f) Image( painter = painterResource(id = R.drawable.baby), modifier = Modifier.size(50.dp).scale(scale), // ...  71
72. Start scale animation var isLargeScale by remember { mutableStateOf(false) } val scale by animateFloatAsState(if (isLargeScale) 4f else 1f) Image( painter = painterResource(id = R.drawable.baby), modifier = Modifier.size(50.dp).scale(scale), // ... LaunchdEffect(true) { isBigBaby = true }  72
73. Result of animateFloatAsState (Times 0.2x): ▶ Run  73
74. `androidx.compose.animation.core.AnimationAsState.kt`: @Composable fun animateFloatAsState( targetValue: Float, animationSpec: AnimationSpec<Float> = defaultAnimation, visibilityThreshold: Float = 0.01f, label: String = "FloatAnimation", finishedListener: ((Float) -> Unit)? = null ): State<Float> { // ... private val defaultAnimation : SpringSpec<Float> = spring<Float>()  74
75. AnimationSpec: • Determines the amount of change • Determines the duration • Preset physics-based calculations  75
76. SpringSpec specification that replicates the movement of a spring. fun <T> spring( dampingRatio: Float = Spring.DampingRatioNoBouncy, stiffness: Float = Spring.StiffnessMedium, visibilityThreshold: T? = null ): SpringSpec<T> = // ... • dampingRatio: Close to 1 indicates a smaller amount of vibration. • stiffness: Lesser values indicate greater stiffness.  76
77. • The spring's momentum becomes the animation value. • The stretched spring state is the start point, and it ends when it returns to its original shape. • The softer the spring, the greater the momentum (faster). • As it approaches the original shape, the momentum decreases (slows down).  77
78. • Vibration occurs when the spring reaches the endpoint. • Vibration can lead to motion beyond the endpoint or in the opposite direction. • When the damping ratio is 1, the forces trying to stop the spring and the forces causing it to oscillate back to its original shape balance each other out, resulting in no vibration. • The magnitude of vibration also varies with the stiffness of the spring.  78
79. SpringSpec examples: ▶ Run  79
80. TweenSpec Duration-based animation spec. class TweenSpec<T>( val durationMillis: Int = DefaultDurationMillis, val delay: Int = 0, val easing: Easing = FastOutSlowInEasing ) : DurationBasedAnimationSpec<T> { // ... Easing: Curve representing change in value over time  80
81. Easing Curves From: https://easings.net/  81
82. TweenSpec examples. ▶ Run  82
83. Who is doing the Animation drawing? • Who monitors the change in value? • Who is redrawing based on value changes?  83
84. Who is doing the Animation drawing? Compose Runtime Modifier.scale(1f) Modifier.scale(3f) ᶃ Detect value changes. ᶄRedraw.  84
85. Who is doing the Animation drawing? Modifier.scale(1f) Modifier.scale(1.01f) Modifier.scale(1.02f) Modifier.scale(1.03f) Animation Value State Frame A Frame B Rendering frame  85
86. Difference in Impact Phase Modifier.scale(3f) Modifier.size(size * 3f) • Change visual size. • Performance low load (affects Drawing Phase). • Change actual size. • High performance load (affects Layout Phase). ref: https://developer.android.com/jetpack/compose/phases  86
87. updateTransition Create multiple state values from a single state change. var attract by remember { mutableStateOf(false) } val transition : Transition<Boolean> = ɹɹɹɹɹupdateTransition(targetState = attract)  87
88. updateTransition var attract by remember { mutableStateOf(false) } val transition : Transition<Boolean> = updateTransition(targetState = attract) val textColor by transition.animateColor { attract -> if (attract) Color.White else Color.Black } val bgColor by transition.animateColor { attract -> if (attract) Color.Red else Color.White } Transition.animateʓʓ is the name of the value to be generated. - Float, Int, Color, Size, Offset, etc...  88
89. Set AnimationSpec to the child animation values var attract by remember { mutableStateOf(false) } val transition : Transition<Boolean> = updateTransition(targetState = attract) val textColor by transition.animateColor( transitionSpec = { tween(durationMillis = 500, delayMillis = 500) } ) { /*...*/ } val bgColor by transition.animateColor( transitionSpec = { tween(durationMillis = 1000) } ) { /*...*/ }  89
90. Set values to Component and Setting the initial state var attract by remember { mutableStateOf(false) } val transition : Transition<Boolean> = updateTransition(targetState = attract) val textColor by transition.animateColor( /*...*/ ) { /*...*/ } val bgColor by transition.animateColor( /*…*/ ) { /*...*/ } LaunchdEffect(true) { attract = true } Text( color = textColor, modifier = Modifier.background(color = bgColor), // ...  90
91. Result of updateTransition: ▶ Run transitionupdate.gif  91
92. updateTransition vs. multiple animateColorAsState. val textColor by transition.animateColor { attract -> if (attract) Color.White else Color.Black } val bgColor by transition.animateColor { attract -> if (attract) Color.Red else Color.White } VS val textColor by animateColorAsState( if (attract) Color.White else Color.Black ) val bgColor by animateColorAsState( if (attract) Color.Red else Color.White )  92
93. updateTransition vs. multiple animateColorAsState Using updateTransition, animations are grouped on the Animation Preview, and target state are clearly indicated.  93
94. rememberInfiniteTransition Generate infinitely repeating animation state. val transition : InfiniteTransition = rememberInfiniteTransition() val scale by transition.animateFloat( initialValue = 1f, targetValue = 1f ʣ val color by transition.animateColor( initialValue = Color(0xFFF0AAAA), targetValue = Color(0xFFF06060) )  94
95. rememberInfiniteTransition val transition = rememberInfiniteTransition() val scale by transition.animateFloat( initialValue = 1f, targetValue = 1f, animationSpec = infiniteRepeatable( animation = scaleSpec, repeatMode = RepeatMode.Restart ) ) initial-targetValue: Values before and after the change.  95
96. rememberInfiniteTransition val scale by transition.animateFloat( initialValue = 1f, targetValue = 1f, animationSpec = infiniteRepeatable( animation = scaleSpec, repeatMode = RepeatMode.Restart ) ) • RepeatMode: - Restart: When the targetValue is reached, it immediately returns to the initial. - Reverse: When reaching the target value, it reverses and gradually returns to the initial.  96
97. KeyframesSpec val scaleSpec: KeyframesSpec<Float> = keyframes { durationMillis = 1000 delayMillis = 1000 1.2f at 250 1.0f at 500 1.2f at 750 } 1.0f 1.2f Value Time initialValue (0) 250 500 750 targetValue (1,000)  97
98. Set infinite animation values to Component val transition : InfiniteTransition = rememberInfiniteTransition() val scale by transition.animateFloat( /*...*/ ) val color by transition.animateColor( /*...*/ ) Icon( imageVector = Icons.Default.NotificationsActive, tint = color, modifier = Modifier.scale(scale) // ... )  98
99. Result of rememberInfiniteTransition: ▶ Run  99
100. Component animation features  100
101. AnimateVisibility Animate the visibility of components AnimatedVisibility(visible = isVisible) { Image( /*...*/ ) } // if (isVisible) { // Image( /*...*/ ) // }  101
102. Default implementations of AnimateVisibility @Composable fun RowScope.AnimatedVisibility( enter: EnterTransition = fadeIn() + expandHorizontally(), exit: ExitTransition = fadeOut() + shrinkHorizontally(), // ... @Composable fun ColumnScope.AnimatedVisibility( enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition = fadeOut() + shrinkVertically(), // ...  102
103. Enter-ExitTransition AnimatedVisibility( visible = isVisible, enter = fadeIn(animationSpec = tween()), exit = fadeOut() + slideOut() ) { // ... • enter(EnterTransition) and exit(ExitTransition) args allow configure the behavior of enter and exit animations. • Transitions can set its own AnimationSpec. • Transitions can combine multiple types.  103
104. AnimatedVisibility examples:  104
105. Crossfade When the target state changes, cross-fade animation. Crossfade( targetState = day, animationSpec = tween(durationMillis = 1500) ) { day -> when (day) { Day.TODAY -> TodayItem() Day.TOMORROW -> TomorrowItem() } }  105
106. AnimatedContent AnimatedContent(targetState = contentType) { when (it) { ContentType.WEATHER -> WeatherItem() ContentType.SCHEDULE -> ScheduleItem() } } When the target state changes, arbitrary entry/exit animations.  106
107. Crossfade with AnimatedContent AnimatedContent( targetState = contentType, transitionSpec = { fadeIn( animationSpec = tween( durationMillis = 500, delayMillis = 1000 ) ) togetherWith fadeOut( animationSpec = tween( durationMillis = 1500 ) ) using null // Disable sizing animation. } ) { // ...  107
108. Size animation with AnimatedContent. AnimatedContent( targetState = isExpanded, modifier = Modifier.background(Color(0xFFC0ECFF)), ) { when(it) { true -> WeatherItem() false -> Icon( imageVector = Icons.Outlined.WbSunny, // ... ) } // ...  108
109. Animation features: • Animation value generation features: - animateʓʓAsState - updateTransition - rememberInfiniteTransition • Component animation features: - AnimateVisibility - Crossfade - AnimatedContent Delving deeper🏊: https://developer.android.com/jetpack/compose/animation  109
110. Example 1: Animation by user action  110
111. Animation ʹ "Value" that changes over time. a^0 a^0.12 a^0.25 a^0.37 a^0.5 a^0.62 a^0.75 a^0.87 a^1 0ms 1000ms  111
112. "Value" that changes over time. ≈ "Value" that changes based on user actions.  112
113. List scroll animation  113
114. Set LazyListState val lazyListState: LazyListState = rememberLazyListState() LazyColumn(state = lazyListState) {}  114
115. Find LazyListItemInfo LazyColumn(state = lazyListState) { itemsIndexed(items = newsUiStates) { index, news -> val alpha by remember { derivedStateOf { val visibleItemInfo: LazyListItemInfo = lazyListState.layoutInfo.visibleItemsInfo .firstOrNull { it.index == index } ?: return@derivedStateOf 0f } } } // ... derivedStateOf: side effect used to reduce unnecessary recomposition opportunities by deriving one State into another State. ref: https://developer.android.com/jetpack/compose/side-effects#derivedstateof  115
116. Get item offset and height val alpha by remember { derivedStateOf { val visibleItemInfo = /*...*/ val itemHeight = visibleItemInfo.size val itemY = visibleItemInfo.offset val viewPortHeight = lazyListState.layoutInfo.viewportSize.height } }  116
117. Calculate alpha value from item visible height val alpha by remember { derivedStateOf { // ... val itemVisibleHeight = when { itemHeight >= viewPortHeight -> { itemHeight } itemY > 0 -> { viewPortHeight - itemY } else -> { itemHeight - abs(itemY) } } itemVisibleHeight / itemHeight.toFloat() } }  117
118. Set animate value to item LazyColumn(state = listState) { itemsIndexed(items = newsUiStates) { index, news -> val alpha by remember { /*...*/ } NewsItem( news = news, modifier = Modifier.alpha(alpha = alpha) ) } }  118
119. Result of list scroll animation: ▶ Run  119
120. Touch action animation  120
121. Example 2: Shimmer Effect  121
122. Shimmer Effect  122
123. Draw gradient💪  123
124. Create shimmer gradient brush val gradientColors = listOf(Color(0x00FFFFFF), Color(0xCCFFFFFF)) val shimmerBrush = Brush.linearGradient(colors = gradientColors)  124
125. Draw shimmer gradient brush Text( text = "Your license will expire soon...", modifier = Modifier.drawWithContent { drawContent() drawRect(brush = shimmerBrush) } // ...  125
126. Draw shimmer gradient brush // ... modifier = Modifier.drawWithCache { val paint = Paint() onDrawWithContent { drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawContent() drawRect( brush = shimmerBrush, blendMode = BlendMode.SrcAtop ) } } } }  126
127. Draw shimmer gradient brush // ... modifier = Modifier.drawWithCache { val paint = Paint() onDrawWithContent { drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawContent() drawRect( brush = shimmerBrush, blendMode = BlendMode.SrcAtop ) } } } } DrawScope.drawIntoCanvas(): directly accessing the canvas and performing drawing.  127
128. Draw shimmer gradient brush // ... modifier = Modifier.drawWithCache { val paint = Paint() onDrawWithContent { drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawContent() drawRect( brush = shimmerBrush, blendMode = BlendMode.SrcAtop ) } } } } Canvas.withSaveLayer(): Create a layer to enable BlendMode.  128
129. Draw shimmer gradient brush // ... modifier = Modifier.drawWithCache { val paint = Paint() onDrawWithContent { drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawContent() drawRect( brush = shimmerBrush, blendMode = BlendMode.SrcAtop ) } } } } BlendMode.SrcAtop: Draw only on overlapping areas. ref: https://developer.android.com/reference/android/graphics/BlendMode  129
130. Animating gradient💪  130
131. Select animation features • Animation value generation features: - animateʓʓAsState - updateTransition - rememberInfiniteTransition👈 • Component animation features: - AnimateVisibility - Crossfade - AnimatedContent  131
132. Create shimmer animation value val transition = rememberInfiniteTransition() val progress by transition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable( animation = tween(durationMillis = 2000), repeatMode = RepeatMode.Restart ) )  132
133. Calculate shimmer gradient brush offset Text( modifier = Modifier.drawWithCache { val simmerBrush = Brush.linearGradient( colors = gradientColors, start = Offset( x = size.width * progress, y = size.height * progress ), end = Offset( x = size.width * progress * 2, y = size.height * progress * 2 ) ) onDrawWithContent { // ... drawContent() drawRect(brush = simmerBrush, blendMode = BlendMode.SrcAtop)  133
134. Calculate shimmer gradient brush offset Text( modifier = Modifier.drawWithCache { val simmerBrush = Brush.linearGradient( colors = gradientColors, start = Offset( x = size.width * progress, y = size.height * progress ), end = Offset( x = size.width * progress * 2, y = size.height * progress * 2 ) ) onDrawWithContent { // ... drawContent() drawRect(brush = simmerBrush, blendMode = BlendMode.SrcAtop) Text Text 0ms 2000ms Text Text Text  134
135. Result of Shimmer Effect: ▶ Run  135
136. Example 3: Circular Progress Bar  136
137. Circular Progress Bar  137
138. Animation Targets • Text color • Progress text • Progress bar  138
139. Create updateTransition val transitionState = remember { MutableTransitionState(false).apply { targetState = true } } val transition = updateTransition(transitionState) // LaunchedEffect(true) { transitionState.targetState = true } MutableTransitionState: By setting a state that is different from the initial state, the animation can be started at the first composition.  139
140. Create animation values val current = 0.75f val colors = listOf(Color(0xFF3B91C4), Color(0xFFF84CAD)) val progressTextColor = Color( ColorUtils.blendARGB(colors[0].toArgb(), colors[1].toArgb(), current) ) val textColor by transition.animateColor { if (it) progressTextColor else colors[0] } val progress by transition.animateInt { if (it) (100 * current).toInt() else 0 } val barAngle by transition.animateFloat { if (it) 360 * current else 0f }  140
141. Create progress Text val progressString = buildAnnotatedString { append(progress.toString()) withStyle(style = SpanStyle(fontSize = 40.sp)) { append("%") } } Box(contentAlignment = Alignment.Center) { Text( text = progressString, style = TextStyle(fontSize = 80.sp, color = textColor), ) // ...  141
142. Draw progress bar background val density = LocalDensity.current Box(modifier = Modifier.size(400.dp) .drawWithCache { val paint = Paint() val strokeWidth = with(density) { 80.dp.toPx() } onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle( color = Color.LightGray, radius = size.minDimension / 2 - strokeWidth / 2, style = Stroke(width = strokeWidth) ) } // ...  142
143. Draw progress bar background val density = LocalDensity.current Box(modifier = Modifier.size(400.dp) .drawWithCache { val paint = Paint() val strokeWidth = with(density) { 80.dp.toPx() } onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle( color = Color.LightGray, radius = size.minDimension / 2 - strokeWidth / 2, style = Stroke(width = strokeWidth) ) } // ...  143
144. Draw progress bar .drawWithCache { // ... val materBrush = Brush.sweepGradient(colors = colors) onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle(/* ... */) rotate(degrees = -90f) { drawArc( brush = materBrush, startAngle = 0f, sweepAngle = barAngle, useCenter = true, blendMode = BlendMode.SrcAtop ) } // ...  144
145. Draw progress bar .drawWithCache { // ... val materBrush = Brush.sweepGradient(colors = colors) onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle(/* ... */) rotate(degrees = -90f) { drawArc( brush = materBrush, startAngle = 0f, sweepAngle = barAngle, useCenter = true, blendMode = BlendMode.SrcAtop ) } // ...  145
146. Draw progress bar .drawWithCache { // ... val materBrush = Brush.sweepGradient(colors = colors) onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle(/* ... */) rotate(degrees = -90f) { drawArc( brush = materBrush, startAngle = 0f, sweepAngle = barAngle, useCenter = true, blendMode = BlendMode.SrcAtop ) } // ...  146
147. Draw progress bar .drawWithCache { // ... val materBrush = Brush.sweepGradient(colors = colors) onDrawWithContent { drawContent() drawIntoCanvas { canvas -> canvas.withSaveLayer(bounds = size.toRect(), paint) { drawCircle(/* ... */) rotate(degrees = -90f) { drawArc( brush = materBrush, startAngle = 0f, sweepAngle = barAngle, useCenter = true, blendMode = BlendMode.SrcAtop ) } // ...  147
148. ✨Circular Progress Bar✨ ▶ Run  148
149. Future of Rich UI🚀  149
150. AGSL • Abbreviation for "Android Graphics Shading Language". • A language for writing shaders that operate on the Android graphics rendering system. • Feature added in Android 13, and it's only available on subsequent OS versions.  150
151. AGSL code (in .Kt file)  151
152. Use AGSL with Jetpack Compose val shader = RuntimeShader(WAVE_COLOR_SHADER) val shaderBrush = ShaderBrush(shader = shader) val time by produceState(0f) { while (true) { withFrameMillis { value = it / 1000f } } } shader.setFloatUniform("time", time) Image( painter = painterResource(id = R.drawable.alien), modifier = Modifier .onSizeChanged { size -> shader.setFloatUniform("resolution", size.width.toFloat(), size.height.toFloat()) } .background(brush = shaderBrush) // ... )  152
153. Result of AGSL with Jetpack Compose: ▶ Run  153
154. Use AGSL + RenderEffect with Jetpack Compose Image( painter = painterResource(id = R.drawable.alien), modifier = Modifier .graphicsLayer { shader.setFloatUniform("resolution", size.width, size.height) renderEffect = RenderEffect.createRuntimeShaderEffect(shader, "content") .asComposeRenderEffect() } // ... @Language("AGSL") private val WAVE_COLOR_SHADER = """ uniform float time; uniform vec2 resolution; uniform shader content; vec4 main(float2 fragCoord) { vec2 uv = fragCoord.xy / resolution.xy; float offset = cos(time * 3.0 + uv.y * 3.0) * 0.1; vec3 color = vec3(uv.x, uv.y + offset, 0.5 + 0.5 * sin(time)); return mix(vec4(color, 1.0), content.eval(fragCoord), 0.7); } """.trimIndent()  154
155. Result of Use AGSL + RenderEffect with Jetpack Compose: ▶ Run agsl2.gif  155
156. Closing  156
157. Rich UI in the Android View era (in terms of cost). ↓ Affordable UI in Jetpack Compose?🤔  157
158. Let's not keep the benefits of Jetpack Compose limited to just engineers; sharing it with the team! Who knows, it might spark new UI implementation ideas?  158
159. The powerful UI implementation capabilities offered by Jetpack Compose are likely to bring positive effects to the team beyond just improving engineers' productivity👍  159
160. Have a nice Jetpack Compose life👋  160