Implementing Type Writer Effect in Jetpack Compose!

in this video are going to demonstrate the steps to create this effect using jetpack compos so friends welcome back to the channel always with you shairy in this video I'm going to create this effect which is a typewriter in Jetpack compos so let's get started so here is from where I inspired this video I saw this typewriter here by this guy Sayan right I hope I spelled the name correctly so you can find the example here this is the basic inspiration from where but we are going to build this step by step so you get the reasoning be you can give him a follow here on GitHub and also you can give him a follow on LinkedIn here and also on Twitter X previous no Twitter prevc X right now all right so I will start with empty fi called typewriter right and then I will create a function let's call it typew right all right and of course this need to be a compos function so it will be a composable like that so we are going to start with the basic things and then we are going to build up to create a comp put right so definitely we will need a text right so I will write the text here I will just create it here and this video we are here is a text this is the text we are going to use right after that we can uh extract it to parameter and simply we will have of course a text right now here in order to do it let's think basically right we can write a letter and then a second letter and then third letter until we reach the all text okay so we are not going to pass the text here directly because it will render it immediately no so we are going to build middle state right so it will have the first letter then the second letter until we have the full text okay so so we are going to create an intermediate text but this text need to be a state so this one can recompose on it so we can create the effect we can start it like the following we can Define for example we can Define another state called for example text display right or display text for example like following and here it will be while we can do it by remembering the state of the mutable state of an empty string right of course you have to do some imports and we are fine now we are going to pass this one here awesome now the only problem we have right now is that we need to change this every for example here we have notion of time right so we will have super IAL time for example let's say 100 milliseconds and then we are going to update each 100 millisecond so how we can create this each 100 milliseconds we can do that via the delay function in cotl okay so we can do some kind of delay right and you can have 100 milliseconds but here exactly this is a suspendable function so we need to have some kind of way to run suspendable functions here so I think we can use while you can use C routine scope but I know that I'm get for this composable especially in the beginning I will launch the animation and then it will stop okay so one way to do that is that using launched effect okay with launched effect I will have true like following as the key and then I have the block or you can do it effectively with uh life templates you can do L enter and then I will have direct while it is either unit or true it doesn't matter so here at this step I can have the delay right so at each time I will delay it so I can start with the delay or I can end the delay doesn't matter so what I can do is that I need to do a loop right so the first time I will have this letter and then I will have this two letters and then I will have these three letters and so on so it will be kind of a loop from this letter Until the End letter so we can create it well we we could create it like the following or we could create it well we can create it like that so we can do the following because we need a range because the way to get this thing is that we are going to use a function called substring right so at the end of the day we are going to do text substring right so each time it will start from zero and it will end at some point right let's make it I for the moment and the result of this you are going to put it in the displayed text that's it nothing fancy so this one is VAR exactly it should be VAR and then since this one is changing this we have to recompose that's the basic idea only problem right now is that how to come up with this IE so this I need to change so from one two three it will start from one and it will end at this string okay so it makes sense are going to do four from I in the zero until the text Dot length right so this one will includeed so exactly from one until text do next exactly so each time you are going to do that are going to change the ey wait 10 seconds okay the weight of the 10 seconds needs to be after that okay not 10 seconds it's just 100 millisecond and then every time it will re let's do a preview for that the beauty of preview is that we can directly execute this composable in screen let's run it so it will be in this video we'll see demonstrate the steps to create effect using compose compose exactly we need the E guys right need compose so you can see there is problem here so there is a problem it's waiting until the length so we need to include the length Okay that's because of the substring how it works it's not because of this one it's because of this one always this is a fact always I have to struggle with the substring on how to work even even if you have 10 years of experience one year of experience getting the substring right is always problematic it's because this one is exclusive yeah exact exactly start by substring and ending right before the end so exactly here I think it's fine to do uh dot dot uh no sorry dot dot like that I think it should work then we can style this text can do the style and here you can do uh material theme right material theme. typography dot for example display large or medium for example okay so we can rerun it there you go in this video you will see in this video we will demonstrate the steps to create this effect using compose nice awesome now everything is working now here you can end at this state but I think it is better to customize this composable so the first thing is that this text should be from the outside so we can delal with it from the outside we can do the text here as parameter text it will be a string of course preview will lost I think can do equal as default parameter so let's push it here and then boom we don't have the text anymore the other problem is that this text need to be customizable right so we are only dealing with the effect I don't want people to you know uh depend on my style or something well I can pass all the parameters here but it's pretty much difficult what I think it's much better and first author of this example did is that he created the composable Lambda like the following let's say let's do it content for the moment and this content will be a compos function do annotation like that it will take what it will take a string and it will return unit okay that way instead of me doing this one I could delete it and I could do content content of what of the string being passed which is the display text okay so this one every time we change right so what we can do I can delete this preview from here and do it in another way test demo for example what I can do is that I can call this typewriter here I can give it my text let me delete the text from here don't need it the text will be the following what I can do with this Lambda here in mind can see the Lambda is here it will give us a string it will be it let's put it text like following what I can do here I can create my text and I can customize it with with my parameters for example well here it has to be text or text like following and then I can customize the style for example to match any style I want now there is other parameters you can play with for example this time here you can play with it I don't know you can provide a fixed one or you can provide as the author did in his uh original example which create minimum and the maximum boun for the animation the animation delay and then you can use the random in order to generate a value between both same thing for this one here you can see we are increasing the value by one right so you can see in the text when I run the example it is one letter each time you can specify it either you can make it fix 1 Two Three or you can do something else which is create minimum and maximum like 2 to five and then you can choose a random value between this one this will create a cool effect so each time it will change so it will create that cool effect so here is the example one more time you can see here in the example we have minimum delay and maximum delay right so between 10 and 50 seconds and also you can see the minimum character and the maximum character chunk and he is doing also other stuff for example checking whether these parameters are correct like uh if this one is uh bigger than this one and so on and then have is also having a good function here which is on effect completed so maybe you want to run something after the animation completes and then he's doing this check here display text of course and then display text composable okay this one is getting displayed here a problem and then he is doing launch effect on the text well since the text here is a parameter we'll have to rerun or reexecute this block every time this one changes okay so you need to make sure because maybe the the the outside here is changing every time okay so we need to relaunch everything okay he's using the while here we are using the four because he is using the anext and then every time is increasing this index with for example from one to five characters so we need to do that check every time okay simply he's doing the delay also here as you can see this is the delay because it's just using a random value between this number and this number between these two numbers and then he's calling the effect on effect completed we can do the same here after doing that we can do on effect completed because here at this time the effect will be completed so he can get a list okay this is the basic implementation and you can see here in extensive implementation with some customization still there is a problem of lot of Rec compositions and this is part of it because every time you are changing the content so it need to change the composable displayed that's why we have recomposition so that's it for this video thanks a lot for watching this video to the end if you didn't subscribe to my newsletter which is about productivity for developers please check the link below in order to check it thank you very much and see you in the next videos Salam that

Channel: Charfaoui Younes

Views: 535

Keywords: android tutorial, android clean code, android model view view model, android mvvm, android, studio, development, dev, app, data, views, jetpack, library, explained, explain, how to, guide, tutorial, kotlin, java, mobile, splash, screen, fetch data, network, animate, animation, compose, api 31, api, android 12, api 21, splash screen, android splash screen, splash screen android studio

Id: VItsTP0Hp9M

Length: 11min 44sec (704 seconds)

Published: Tue Mar 19 2024