Animated Shimmer Effect with Jetpack Compose | Android Studio Tutorial

hi hello there and uh welcome back to my new videos so in this video i am going to show you how to create a animated shimmer effect using a jetpack compose now before we start with the code i am going to show you how this shimmer effect will look like okay so this is how our shimmer effect will look like so we are going to see this beautiful animation i have designed this shimmer effect for a light theme but we can also use that with a dark theme so let me just show you of course for the dark theme you will have to apply a different colors but you can see that everything will work the same basically with just a different colors anyhow let's get back with our live theme and we are going to start implementing that okay so let's go to our android studio project and we are going to create here a new question file in which we are going to make that shimmer effect so let's name this file a shimmer or animated shimmer now let's create here a new composable function and this function should be named animated shimmer so from that application preview you have seen our shimmer effect so basically we are going to animate our gradient color or its x in y position so you will see about that now let's get back here and now i'm going to create a new variable here name the shimmer colors and then this will be just a list of three different colors okay so those shimmer colors will be used on our gradient color or on our brush and then that color or its x and y positions will be animated so let's now start by adding the first color so i'm going to use already existing color from our color class so android x compose ui graphics i'm going to choose here a light gray color and i'm going to change its alpha state or alpha value so for the alpha value here for this first color i'm going to specify 0.8 or 6 f then down below i'm going to copy that color once again this time this color in the middle will be uh with the alpha value of 0.2 f and the third one will also have a 0.6 like the first one okay so the lightest color in our gradient should be this one in the middle okay and that's why i have specified only 0.2 f which is basically a 20 opacity of this light gray color now below this list of colors i'm going to create one a variable named transition and then i'm going to use the one composable function named remember infinite transition so basically with this function we are going to be able to animate our shimmer as long as we want and below that let's create here another variable named translate animation and here we're going to call this uh infinite transition and then we are going to animate a float value so initial value should be zero and we are going to animate that to a target value of 1000 that for example now for the animation spec we need to specify infinite repeatable because this animation will actually uh animate the infinite times so let's specify here a few parameters so the first one is the actual animation for that i can choose a twin animation duration of this animation can be maybe one second and the easing for this animation maybe can be a fast out a slow in of course you can choose your own easing for this animation this is just one example and finally down below we are going to create one new variable named brush and we are going to create a linear brush so uh brush dot a linear gradient and then here we need to specify those three colors which we have already made so let's add here those colors so shimmer colors as a first parameter then as a second parameter we need to pass the starting position of this linear gradient so a starting position should be specified inside this offset and we can specify 0 so that will be a starting position and the ending position should be grabbed from that translator animal variable so let's use the offset for the x we can specify a translation or translate the anim dota value and for the y we can also specify that the same variable and with this we will be able to animate our gradient or a linear gradient from a 0 to a 1000 which is basically the end of our shimmer effect in this case or this linear gradient and that brush will be passed to our new shimmer grid item which we are going to create so now we need to create this circle and those two lines basically okay and then this brush color should be passed to each one of those elements which we will make now okay so after that let's create a new composable function name the shimmer a grid item and this function will take only one parameter and that is a brush which of course we are going to pass right here so let's call here a shimmer grid item and let's pass that brush so we have basically completed everything we need for this animated shimmer composable function and now we are going to focus on this shimmer grid item so in this case of course i have created only one circle in those two lines but depending on the data which you want to uh show to your users then you might need to create a different kind of uh layout here for this shimmer effect okay so this is just one example and let's start creating this shimmer grid item so all those three items here or components should be located instead of one row so let's add here row composable function and the row will take only one parameter and that is a modifier so like that then i'm going to call a fill max width so that this shimmer grid item could take the whole width of the parent and also i'm going to specify a padding on all sides to a 10 dp so this padding value will basically be applied on each and every side of this grid shimmer grid item and now inside this row i'm going to add the one by one item so for those items i'm going to use a spacer composable function which is a component that represents an empty space layout whose size can be defined using a width height and modifier size as well now let's call this a composable function and of course we are going to add here just one modifier in which we're going to pass that brush gradient so modifier.size and in this case the size of this first spacer which will represent a circle will be 80dp so that's the first modifier and next i'm going to add here uh two more modifiers so the second modifier will be a clip and here is the place where we actually specify the shape of this spacer in this case i'm going to add here a circle shape because this spacer will represent a circle you have already seen that in our application and the last parameter here is a background and here i'm going to specify a brush so a brush a gradient which we have passed through our shimmer grid item function so with this we have basically created our first circle here or our first component and now we need to create those two as well so you can see here that this circle is separated by maybe a 5 or 10 dp value with those two other components so below this spacer i'm going to add the one more spacer with just one modifier so android x compose ui and we're going to add here a width of a 10 db so this a second spacer will just represent a blank space without any background color whatsoever so below that we need to add the one column now and that column should have a vertical arrangement of arrangement center in this case okay so you can see that inside our application here we have one row inside that row we have a circle and then we need to add a column in which we are going to pass those two other components or lines so now inside this column let's create two more spacers so now let's create first a spacer we are going to have a modifier of course at the first modifier will be a height and the height of this line should be maybe 12 or sorry 20 dp then at this spacer should take a width of maybe a 0.7 fraction and the last parameter which we need to add here is a background so we need to pass our brush here as well and now let me create one more spacer down below so let's just copy this previous spacer and we can change this fraction to be 0.9 maybe also i'm going to add the one more spacer between those two lines so we can actually have some space between them like that and this spacer should have only 5dpa for now so i think that now we have everything ready to show this animated shimmer effect and we can also create here for example one preview function so we can preview our shimmer uh grid items so let's add here uh shimmer uh grid item preview and let's call our shimmer uh grid item so we need to pass here one brush and uh for that let me just copy this code from above so let's just specify this list for the colors of our gradient or linear gradient so let's add here brush dot a linear gradient and let's pass that list now let me open this up preview so we can actually see how this grid item will show up in our preview here okay so we need to change a few things here let me now uh add here one uh parameter name the show background so we can actually see a white background behind our shimmer effect here okay so uh there is of course a few more things which we need to change here uh now i'm going to also add the clip here uh to our lines so let's add here around the corner shape and for the size we can type just maybe 10 dp i'm going to add this same modifier down below to our second spacer we can now load and refresh our preview again so now those two lines will have a slightly uh corner radius okay so there you go okay so uh inside this second spacer which is located in our column uh instead of the width we need to add a padding so we can add this 5dp on each and every side okay now let's build and refresh here and now in order to center uh those items uh in this column uh i'm going to add the one more attribute or parameter on our row composable so let's add here a vertical alignment so alignment dot center vertically and let's build and refresh so now those two lines or those two components on the left on the right side will be centered so there you go now we can see our preview and also if you want you can add the one more preview here but this time we can specify a ui mode so a ui mode the knight yes let's import that and let's change here this function name to shimmer grid item dark preview okay now let's build and refresh and there you go so now we can see those previews so the last thing which we need to do here we need to actually call this a function from our main activity so animated shimmer and let's run our app and there you go so now we can see our shimmer effect so now if you want to create more of those shimmer effect grid items uh you can just add here one repeater function so let me add here one column then inside that column i can add the repeat function and i can repeat this item for example four seven times so inside the block of this repeat function let's call our animated shimmer function and then let's run our app once again so now we can see our animated shimmer on the whole screen so it looks beautiful and uh very nice uh now let's go back to our animated trimmers so we can recap once again uh what we have actually done in this uh new composable function so as i already mentioned before uh we are going to basically animate that uh brush or gradient color in our shimmer effect that's why we have created those three colors for our shimmer and you can change of course the color and their alpha states as well so it's up to you then below that we have created one infinite transition on which we have applied the exact translate position so initial value will be 0 and the target value will be 1000 and then finally down below when we have created our gradient color or a linear gradient there we have specified all those colors it's a starting offset position which is a zero and the end offset position which will actually be animated okay so those two values x and y will be animated for our linear gradient in this case so there are many different ways of creating a shimmer effect so this was just one simple example of using this gradient color for animating this effect of course you don't even have to use the brush to create this shimmer effect you can create your own shimmer effect using just fade in and fade out animations as well so that's totally up to you so thank you for watching i hope you enjoyed comment down below if you want to see more interesting videos about jetpack compose in general like this video if you find it helpful of course and see you next one [Music]

Channel: Stevdza-San

Views: 15,398

Keywords: animated, animation, anim, shimmer, effect, jetpack, compose, kotlin, android, app, android studio, dev, development, how to, guide, tutorial, gradient, color, infinite, translate, translation, composable, function, preview, dark, light, mode, theme, apply, different, create, make, write, grid, item

Id: SVY0qiMVIhc

Length: 13min 47sec (827 seconds)

Published: Tue Nov 16 2021