Shimmering is present in almost all applications that have networking. When the task of making it on came up, given that the latter simplifies the work with the , I did not find a solution. All options were reduced to downloading fairly heavy libraries or writing a lot of code. However, I managed to find a solution, which allows me to make a shimmering on in a few lines of code. compose view compose Observations and Assumptions my solution won't cover 100% of the cases of shimmering, but it's easy to refine; my solution will be built around the method. There are probably more options, but this one seemed the easiest to me; Brush.linearGradient() Don't forget to include compose if it's a new project, like and others. The full algorithm for adding to a project can be found here: . buildFeatures {compose true}, composeOptions compose https://developer.android.com/jetpack/compose/setup Description I am first attaching the full code of the . You can copy it into your project and run it: ShimmeringActivity https://gist.github.com/45ccb35b9ae80fbddcd2ffc2c0678c44 As a result, you should have the following animation: Don't be intimidated by the orange and blue shimmering colors. I did this on purpose so that they would be easily distinguishable. The color can be changed to white, as it should be in your project. Let's go through the code. Let's start with an easy one: ShimmeringCompose(
   modifier = Modifier
       .width(300.dp)
       .height(150.dp),
   cornerRadius = 16.dp
) - the width, height and radius of the circle, as in any other compose view. width, height, cornerRadius val screenWidth = LocalConfiguration.current.screenWidthDp.dp - the found screen width. This is necessary to make the animation for all elements work synchronously. Otherwise, if there are several rectangles with different widths on the same screen, the shimmering for them will be out of sync, because the animation will run different distances at the same time. screenWidth val translateAnim by rememberInfiniteTransition().animateFloat(
   initialValue = 0f,
   targetValue = screenWidth.px,
   animationSpec = infiniteRepeatable(
       animation = tween(durationMillis = 1500, easing = FastOutSlowInEasing)
   )
) - methods for creating infinite animation. rememberInfiniteTransition().animateFloat(), infiniteRepeatable() - start and end value of the animation. initialValue, targetValue - method for configuring the animation. tween() - animation time. durationMillis - interpolation of the animation. easing The value of will change over time from to . The change logs: translateAnim initialValue targetValue translateAnim D: ShimmeringCompose: 1.2176096
D: ShimmeringCompose: 2.7215502
D: ShimmeringCompose: 7.4594655
D: ShimmeringCompose: 11.377052
D: ShimmeringCompose: 21.533459
D: ShimmeringCompose: 27.730642
D: ShimmeringCompose: 34.646053
D: ShimmeringCompose: 53.458187
D: ShimmeringCompose: 64.20549
D: ShimmeringCompose: 91.909676
D: ShimmeringCompose: 107.303856 val shimmerColorShades = listOf(Color(0xFFF37F19), Color(0xFF007CFF), Color(0xFFF37F19)) With this list the colors are set: blue in the center and orange on the edges. val brush = Brush.linearGradient(
   colors = shimmerColorShades,
   start = Offset(translateAnim, translateAnim),
   end = Offset(translateAnim + 70.dp.px, translateAnim + 35.dp.px)
) is a method for creating a gradient. Brush.linearGradient() In we assign the sheet of colors created above. colors is a shell class for assigning x and y coordinates Offset() The values 70 and 35 are chosen depending on the shimmering design in Figma. Box(modifier = modifier.background(brush = brush, shape = RoundedCornerShape(cornerRadius))) Create a object and assign to it in the values of and to create rounded corners. Box background() brush RoundedCornerShape You will also need a utility method to translate to : dp px val Dp.px: Float
    @Composable
    get() = with(LocalDensity.current) { this@px.toPx() } As a result, we get animation, as in the gif-picture at the beginning of the article. A few words about Brush.linearGradient() To understand how works, change the code in the to the following: Brush.linearGradient() ShimmeringActivity val brush = Brush.linearGradient(
   colors = shimmerColorShades,
   start = Offset(0f, 0f),
   end = Offset(0f, 100f)
) You will end up with the following picture: If you set , the shimmer bar will be parallel to the . The thickness will be , in this case 100f. Now insert the following code: x_start = x_end x-axis y_end - y_start val brush = Brush.linearGradient(
   colors = shimmerColorShades,
   start = Offset(0f, 0f),
   end = Offset(100f, 0f)
) You will get this picture: If you set the coordinates, the shimmer bar will be parallel to the . The thickness will be , in this case 100f. y_start = y_end y-axis x_end - x_start Thus, by manipulating the start and end coordinates, you can achieve the desired result. Conclusion As you can see, creating shimmering took about 25 lines of code, not including the code and the utility method for translating to . From my point of view, pulling in an additional library to create the shimmering makes no sense. Yes, my example isn't exactly clean from a code point of view: some variables aren't moved here and critical situations aren't handled. But it can be easily modified to the needs of your project. ShimmeringActivity px

Too Long; Didn't Read

Making security fun one episode at a time

Design Your Own Shimmering UI in 25 Lines of Code with Compose

Too Long; Didn't Read

Leonid Ivankin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Design Your Own Shimmering UI in 25 Lines of Code with Compose

Too Long; Didn't Read

Leonid Ivankin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES