Loading Animation with Jetpack Compose | Android Studio Tutorial

hi hello there and uh welcome back to my new video so in this video i am going to teach you how to create one beautiful and a smooth loading animation in a jetpack compose okay so this is how our animation will look like at the end so uh we are going to have a three different circles and each one of those circles will animate it's a y position and now you can see that basically there is also a delay between those three animations or those three circles and in this video i am going to teach you how to achieve exactly that uh okay so the first thing which i am going to show you here before we actually start with the code is the actual design so here i have designed how our animation will actually look like so we are going to have those three circles and they are going to be uh inside a one row okay and here as you can see each one of those circles will travel a certain distance of a 20 pixels in the y-axis on the top so the first circle on the left side that will start this animation then after a delay of a 100 milliseconds this second one i will start and after 200 milliseconds the third circle will start so there will be a slight delay between those three circles and the one on the left will start first and the one on the right will start last and the actual animation which we are going to use here will be a translate y so we are going to basically move this circle on the y-axis by 20 pixels of course you can change this value to uh be greater than 20 pixels or lower than that it's up to you and here on this image on the right side you are going to see how this animation will look like when the first circle completes and it gets back to its original position so the first circle will be the one to first start this animation and it will be the first to end this animation okay and now that we know how this animation will actually look like now let's go to our android studio project and here i'm going to create a new clothing file named loading let's create a composable function with that same name so loading animation there we go so this function will have a multiple parameters and the first one i will be a modifier so android x compose ui and let's also specify here a default value there we go the second parameter here will be a circle size so the size of this circle needs to be represented through this dpe and default value for now will be 25 db okay next the circle uh color i will have a type of a color so android x compose ui graphics and its default value will be a material theme.colors.primary now all those parameters here even though they have a default value you will be able to change those parameters by yourself and now let's specify a space between so this is the space between those circles and let's add here a dp as well and a default value here can be maybe number 10 so 10 db and the last parameter i will be a travel distance so the travel distance uh will also be represented through the dp and a default value will be uh 20 db which we are going to convert into pixels a little bit later now those were all parameters which this function will have and now below that i'm going to create one variable named circles and i'm going to create a list here actually so each one of those items from this list will be remembered across a multiple recompositions let me just move that right here okay and here i'm going to call animatable so animate double there we go and initial value will be here 0f and there will be a three different remembered animatable values here okay and each one of those will have initial value of zero so those values are going to be animated in this composable function so you will see about that anyhow below that i'm going to also create a new variable and name the circle values and then i'm going to call here this circles a list of animatable items and then i'm going to map those values so i'm going to say it dota value and the value is the actual float value of each one of those items so its initial float value will be 0 and its target value later will be 1. so those three circles will be animated from zero to one and from one to zero so here uh the type of this variable is actually a list of afloat values and this one has a type of a list of animatable objects so now down below i'm going to create a one row actually so we can create those uh three circles and to this row i'm going to specify just the one parameter and that will be a modifier from the parameters of our function and inside this row i'm going to call this circle uh values and i'm going to call for each indexed composable function let's rename this to value for example okay and now for each one of those items or values in this list we are going to create one circle so there will be three circles in total and i'm going to represent those circles through a box a composable function let's call here modifier and the first one will be a size so the size of each circle will be a circle size from the parameters of this function and that value is a 25 dp next i'm going to also create here a one new variable and named a distance and then i'm going to call here with a function so with the local density dot current i'm going to call this a travel distance from the parameters of this function and convert that to pixels there you go and now this distance variable is a float value and that the float value will be passed here in this graphics layer uh modifier so let's move this translate y or translation wire property so i'm going to say here a minus value times the distance so what will this do it will basically move our circle on the y-axis so this value basically can be either 0 or 1 and the minus means that we are going to move this circle on the top because a minus or a negative value will move this circle on the top and a positive value will move this circle on the bottom okay so that's the main difference we want to move our circle on the top so that's why we are using a minus here times the distance and the distance is basically 20 pixels so after that i'm going to call a background modifier and then for the color i'm going to specify a circle a color and then for the shape i'm going to specify a circle shape there you go perfect and that's all we need to specify for this box so basically this box will represent each and every circle in our animation so now let's just try and call this a loading animation function so we can see how will that look like so let's call this a loading animation function inside our column which will take the whole screen and place our loading animation in the center of the screen so i just want to check to see if those three circles will be placed in the proper way like i have imagined okay so there we go and now we can see those three circles uh there is a one more thing that i want to add here in our loading animation composable function below our box so we basically want to separate those circles a little bit so now here i want to create one more variable named a last circle and i'm going to say a circle of values dot size minus one so what will this do it will basically take and calculate the size of our circle values list which has a three items so three items minus one and then we get the number two and since the index value of our circle values starts from zero that's why we need to get number two to actually grab that last element from this list so why do we need that the last element from this list well let me show you so i'm going to say here if a index value is not the last circle then in that case i'm going to add here a spacer and i'm going to specify here the width to be a space between so basically here you can see that in this row we have a box and we have a spacer so after each one of those circles we are going to add a blank space however with this if block i am going to be sure to add those spacers or blank spaces between those elements and not after the last one okay so that's the whole purpose of this if check and now we can also run this application to check out and see if we actually have that spacer or a space between the circles there we go so now we have an even space between each one of those circles and not after this last one okay and finally it's time to actually start and create the animation for those circles so now here below this circles variable i'm going to also create a one for each loop and also i'm going to call this for each index because we are going to need this index value okay there you go i'm going to call here a launched effect and as a key i'm going to specify this animatable so whenever we get a new animatable or a new item from this list then we are going to trigger this launched effect block so basically we are going to trigger this launch effect block only three times whenever we get a new animatable value now here i'm going to call this animatable which represents each one of those items from this list and then i'm going to trigger the animation so animate 2 for the target value i'm going to specify number 1 because the start or the initial value is 0 and the target value will be 1. next i'm going to specify animation spec so animation spec here i'm going to choose infinite repeatable because this animation needs to be animated infinite number of times and this function accepts multiple parameters like the actual animation the repeat mode and the initial start offset for now i'm going to just specify those two first values so the first one will be the animation and here i'm going to use a keyframes so with the keyframes i am going to be able to animate uh basically each keyframe of this animation so now let's declare first a duration of this animation so in our case a duration of this animation should last for a 1.2 seconds or a 1200 milliseconds so there you go and now below that we are going to declare uh different keyframes for this duration so for example i'm going to write here 0.0 at the zero a with a linear slow or out slow in easing then the second one will be at the one and here i'm going to write 300 so this second value represents the actual duration and this first value represents the actual animatable value okay so you already know that this animatable can have a value between 0 and 1. so now i'm going to define a few more keyframes and then i'm going to explain how will this actually work so the third keyframe will also be at the 0.0 at 600 duration time at this point with the same easing so this one and here also 0.0 at 1200 with the same easing so from those keyframes you can see that each circle in this animation will animate for a 300 milliseconds because it will reach its target value of a 1.0 in a duration of 300 milliseconds those two last keyframes will basically wait until those last two circle finish and only then restart this animation next i'm going to add here one more parameter which is a repeat mode i'm going to add repeat mode restart so we can restart this animation okay and now i'm going to start this application so you can see how will this animation actually look like so at this point you can see that those circles are moving at the same time so we don't have any delay between them and now i'm going to show you how to add the delay between them so that the first circle can start first and finish first as well so let's go back to our code here and at the beginning of a launched effect i'm going to add a delay function so how can we calculate a delay for each one of those circles well we can calculate that delay very easily by using the index value of each one of those elements from this animatable list so i'm going to say here index value times maybe 100 milliseconds so the first item in this list will have an index value of 0 which means that the first circle will not have basically any delay because 0 times 100 is 0. so the first circle will start immediately then the second item from this list will have a index value of 1 and the 1 times 100 is a 100 so a delay between this first and the second i will be 100 milliseconds and then this last item i will have a delay over 200 milliseconds so now let's try and run this application once again and now uh everything should work just as expected so there you go now all those three circles are animating only this time we have added a delay between them so that our first circle can start first and finish first as well and that's how this animation will actually work okay so i hope that you have enjoyed watching this video if you have be sure to comment down below and like this video and uh see the next one [Music]

Channel: Stevdza-San

Views: 14,920

Keywords: android, studio, app, kotlin, how to, guide, tutorial, animation, anim, animatable, loading, load, dots, circle, three, how, infinite, repeat, keyframe, key, frame, jetpack, compose, application, development, custom, smooth, beautiful, canvas

Id: xakNOVaYLAg

Length: 15min 22sec (922 seconds)

Published: Fri Mar 04 2022