![From freeCodeCamp to CTO with Robotics Engineer Peggy Wang [Podcast #159]](https://cdn.hashnode.com/res/hashnode/image/upload/v1738967132406/6ab8c7bb-397a-42b3-bb91-ff9c4842ead0.png?#)
Shine Text Effect in Jetpack Compose
Shimmer effects are a great way to enhance the user experience by indicating loading states with a smooth animated placeholder. I always use it in the call-to-action events, it gave a more premium effect. In this post, we will implement a shining text based on the shimmering effect in Jetpack Compose using this example from this gist and extend it with a method to update the shimmer color dynamically. What is a Shimmer Effect? A shimmer effect is an animated gradient overlay that creates an illusion of content loading. It gives users a visual cue that data is being fetched or processed. Implementing Shimmer in Jetpack Compose We will create a shimmer effect using a custom ShaderBrush that animates across the text. Step 1: Define the ShimmeringText Composable @Composable fun ShimmeringText( text: String, shimmerColor: Color, modifier: Modifier = Modifier, textStyle: TextStyle = LocalTextStyle.current, animationSpec: DurationBasedAnimationSpec = tween(1000, 500, LinearEasing) ) { val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition") val shimmerProgress by infiniteTransition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable(animationSpec), label = "ShimmerProgress" ) val brush = remember(shimmerProgress) { object : ShaderBrush() { override fun createShader(size: Size): Shader { val initialXOffset = -size.width val totalSweepDistance = size.width * 2 val currentPosition = initialXOffset + totalSweepDistance * shimmerProgress return LinearGradientShader( colors = listOf(Color.Transparent, shimmerColor, Color.Transparent), from = Offset(currentPosition, 0f), to = Offset(currentPosition + size.width, 0f) ) } } } Text( text = text, modifier = modifier, style = textStyle.copy(brush = brush) ) } Step 2: Updating Shimmer Color Dynamically To enhance the shimmer effect, we will use a utility function to adjust the shimmer color dynamically. The brighter() function blends the color with white, creating a brighter effect: fun Color.brighter(): Color { val blendRatio = 0.3f // Adjust to control brightness return Color( red = (this.red * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f), green = (this.green * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f), blue = (this.blue * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f), alpha = this.alpha ) } Now, we modify the ShimmeringText function to apply this color transformation: @Composable fun DynamicShimmeringText( text: String, baseColor: Color = Color.Gray, modifier: Modifier = Modifier, textStyle: TextStyle = LocalTextStyle.current ) { val shimmerColor = baseColor.brighter() ShimmeringText( text = text, shimmerColor = shimmerColor, modifier = modifier, textStyle = textStyle ) } Step 3: Using the Shimmer Effect in a UI @Composable fun ShimmerScreen() { DynamicShimmeringText(text = "Book a Demo", baseColor = Color.Gray) } Final result ✨ this example is the adapted version of the tutorial
Shimmer effects are a great way to enhance the user experience by indicating loading states with a smooth animated placeholder.
I always use it in the call-to-action events, it gave a more premium effect.
In this post, we will implement a shining text based on the shimmering effect in Jetpack Compose using this example from this gist and extend it with a method to update the shimmer color dynamically.
What is a Shimmer Effect?
A shimmer effect is an animated gradient overlay that creates an illusion of content loading. It gives users a visual cue that data is being fetched or processed.
Implementing Shimmer in Jetpack Compose
We will create a shimmer effect using a custom ShaderBrush that animates across the text.
Step 1: Define the ShimmeringText Composable
@Composable
fun ShimmeringText(
text: String,
shimmerColor: Color,
modifier: Modifier = Modifier,
textStyle: TextStyle = LocalTextStyle.current,
animationSpec: DurationBasedAnimationSpec<Float> = tween(1000, 500, LinearEasing)
) {
val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")
val shimmerProgress by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(animationSpec),
label = "ShimmerProgress"
)
val brush = remember(shimmerProgress) {
object : ShaderBrush() {
override fun createShader(size: Size): Shader {
val initialXOffset = -size.width
val totalSweepDistance = size.width * 2
val currentPosition = initialXOffset + totalSweepDistance * shimmerProgress
return LinearGradientShader(
colors = listOf(Color.Transparent, shimmerColor, Color.Transparent),
from = Offset(currentPosition, 0f),
to = Offset(currentPosition + size.width, 0f)
)
}
}
}
Text(
text = text,
modifier = modifier,
style = textStyle.copy(brush = brush)
)
}
Step 2: Updating Shimmer Color Dynamically
To enhance the shimmer effect, we will use a utility function to adjust the shimmer color dynamically. The brighter() function blends the color with white, creating a brighter effect:
fun Color.brighter(): Color {
val blendRatio = 0.3f // Adjust to control brightness
return Color(
red = (this.red * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
green = (this.green * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
blue = (this.blue * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
alpha = this.alpha
)
}
Now, we modify the ShimmeringText function to apply this color transformation:
@Composable
fun DynamicShimmeringText(
text: String,
baseColor: Color = Color.Gray,
modifier: Modifier = Modifier,
textStyle: TextStyle = LocalTextStyle.current
) {
val shimmerColor = baseColor.brighter()
ShimmeringText(
text = text,
shimmerColor = shimmerColor,
modifier = modifier,
textStyle = textStyle
)
}
Step 3: Using the Shimmer Effect in a UI
@Composable
fun ShimmerScreen() {
DynamicShimmeringText(text = "Book a Demo", baseColor = Color.Gray)
}
Final result ✨
