How to Create a Shimmer Loading Effect in Jetpack Compose (WITHOUT Library!)

hey guys and welcome back to an amazing new jetpack compose tutorial in which I will show you how you can Implement a shimmer effect in Jetpack compose a shimmery effect is something that kind of reveals where a certain content will be placed after loading so let me quickly relaunch the app so you can see that I'm sure you've seen that in tons of social media apps where yeah this is basically the loading animation and after that after loading is finished we will see the actual content on our screen and maybe before we start with this let me explain how this works this animation by relaunching this with a longer delay so in the end it's really a simple animation we just have a gradient from a light gray to a little bit darker gray to light gray again and then we animate the offset of that gradient from left to right and we just repeat that yeah for infinitely basically and until we hide our Shimmer display again so let's jump into Android Studio empty Japan compost product and here we want to go into in your root package and create a shimmer list item let's select file and yes we want to create a shimmer list item here in form of a composable like this this will receive an is loading Boolean so it knows when to show the actual Shimmer effect and when to show yeah the actual content we want to pass a Lambda content after loading which will be a composable Lambda so here we can simply pass whatever we want to show for this certain item after that is loading Boolean is actually set to false I want to be able to pass a modifier from compose equal to modify so how will we do this and how can we implement this to make it as reusable as possible I don't want to implement this Shimmer animation in this Gmail list item what I want to do much rather is I want to create a custom modifier so we can very easily apply the streamer effect to any type of composable and then depending on how we want this to look like so how these Shimmer boxes look like we can then easily add this modifier to other composables like the Shimmer list item so to do that let's have an extension function for modifier and say we have a shimmer effect and that is equal that returns a modifier and is equal to compost composed is a function that we can use to compose a modifier a custom one that is stateful so where we have state that changes in our case the changing state is simply the animation so that we offset our gradient and we can then easily just apply that custom modifier to any type of composable to apply that gradient animation so here we will need a bunch of states on the one hand the size which is equal to remember mutable state of end size.0 so we just need to keep track of the size of the actual composable where we attach this modifier to because depending on the size we need to change the start offset and the end offset of our gradient let's hit Alt Enter to actually import this or maybe it this one here import get value and movable State off import again and then here in this function we of course need to return a modifier which is where we get this error right now next up since we do have an infinite animation here we want to get this transition here by saying remember infinite transition which you can then use to create such an infinite animation and then we want to animate the start offset X so we just animate the X position of our gradient and we just start that all over again after it finished and we can say by animate animate float as state actually not that one by transition we need to use our transition animate float the initial value is -2 times size.width that you float I just experimented with these values so we just start um the gradient somewhere outside of our composable we can then say the target value is just two times our size that width.2 float so we animate it outside of our actual Box by twice the amount of the width of our box and the animation specs so how our animation works over time so the animation curve and the duration let's choose a tween here we want to say the duration Middle East is just one second so we just use one second and then we start this animation again then after that we want to return a background modifier since we can use that to return a gradient and we do get an error here infinite repeatable spec oh okay because we can simply pass a tween here we need to pass an infinite repeatable here and then here we can pass this for the animation so simply tween and a thousand milliseconds duration and then that will work just fine then for this background modifier we now want to pass a brush which is used for gradients brush Dot horizontal gradient no actually a linear gradient because we want this gradient to be kind of diagonal from the top left to the bottom right we then Define some colors in a list here now we need to define the first color so where the gradient starts which is simply let's pick a color and then this little color box will appear where we can select the custom color let's choose some kind of um light gray something like this then we can duplicate that two more times and just for the middle color we select something slightly darker and then we will have a nice little gradient for our Shimmer effect and then since we want to animate this we also need to tell our gradient that it should actually use a flexible start off set so here in our brush we want to say our start is equal to offset start offset X and the Y value is simply zero and the end offset so where we want to end with our gradient is simply our bottom right corner of our box in addition with our start offset so start offset.x plus size that width dot to float and Y is simply size dot height that you float so this is just the the very first top left corner and then if our start offset gets animated this corner simply gets animated to the right and the same for the end offset just that we refer to the bottom right corner here and then one more thing we need to do is we need to update our size that we have here by going in here to our like at the end of our background composable modifier and saying on globally positioned here we want to set our size equal to it dot size so this simply called when our composable has been positioned and then we can get the size of it and update our state and now we have a working modifier which we can apply to any type of composable to apply a shimmer effect so in here for our Shimmer list item I'm going to first of all check if we're loading so if we should display the Shimmer effect and then we want to have a row modifier is modifier whatever we passed here and then we'll just use placeholder composables here where we apply this modifier so for example a box where we say modifier dot size let's say that's 100 DP import DP pressing Alt Enter and then we say we have our Shimmer effect on that box let's then have a spacer with with a width of 16 DP and now we simply want to have a column for our two texts so maybe I quickly launched this again so you can see what we're currently building so here we have our box with a size of 100 DP and then we now want to have a column with our two boxes which simply kind of show the text here so let's have that column here modifier is simply modifier dot weight one F so we simply fill the rest of the space of our row and then we have a box to show our first line of text where we say modifier a DOT filmex width and we say it has a height of 20 DP and we apply our Shimmer effect then we want to have a bit of spacing again height 16 DP and we can copy our box for the second row and here we can say let's say we just fill 70 of our whole width and that's it for our Shimmer list item we only now want to go to our if statement at the end here and in the else block we want to show our content after loading so oops content after loading so whatever we want to show in that case we will then show it so in main activity we can go ahead and create a little list um yes lazy column let's add a modifier modifier film X size and in here I want to have an items block of let's say 20 items and each item will be HTML list item is loading let's just have a state that simulates a loading progress so we have VAR is loading is by remember mutable stayed off true initially import that here we can then say launch effect pass through as the key and here we simply delay this launch effect blocked for let's say 10 seconds and then we set is loading to false so we just update our is loading state after 10 seconds to simulate that loading a loading State normally you would get that from the viewmodel if your API call is loading or whatever and here for the streamer list item we want to have or is loading Boolean which we pass want to have our content after loading I want to have a modifier modifier dots filmex width and let's add some padding of 16 DP input DP and now let's add the actual content after loading which will be like this image and this text here that will show afterwards here we simply create a row modifier modifier filmex width add some padding 16 DP and we add a little image well let's make it an icon instead with an image Vector so you can use our little house icon icons default home content description is null and we want to make this image as big as our simulated Shimmer display so size that 100 DP I don't want to add a spacer below our image spacer where we assign a width of 16 DP and then we simply have a text that is a bit longer so we just yeah that it spans over multiple lines this is a long text to show that our Shimmer display is looking perfectly fine or whatever and if we Now launch this on our emulator we should be able to see a working Shimmer display hopefully at least there we go that is looking perfectly fine our Schumer display is working and after 10 seconds we should be able to see our actual content in our lazy column there we go that is working very fine and you can now use this kind of modifier for any type of composable you actually have in your app so if you for example have a circular image or so then you simply only need to create such a new maybe Schumer profile uh item or so where you apply the Shimmer modifier to your circular profile image so if we were for example to make this box and we clip it to a circle shape and we relaunch it then we should be able to see a circular Shimmer animation you can see and we can now very easily apply this to any type of shape since with modifiers we can very easily change that shape and manipulate it if that helped you to create a cool animation in Jetpack compose then you will definitely also love my Android premium courses which you can find in this video's description so this will really take you to an industry level Android developer so do check these out and apart from that I wish you an amazing rest of your week and I'll see you back in the next video bye bye foreign

Channel: Philipp Lackner

Views: 28,305

Keywords:

Id: NyO99OJPPec

Length: 13min 3sec (783 seconds)

Published: Sun Jan 15 2023