Blur Images In Jetpack Compose - Android 12 and ABOVE

hello everyone today we are going to blur images using jetpack on post so let's jump into Android studio and let's firstly enable edge to edge because I want to overlap the top bar I have a video on this to in which I'm explaining how it works so let's call an image let's say painter Source I already have one this is my image okay let's are drawable lat art null okay let's put this on a separate lines and let's take a variable so this will handle when we click the image it will make it bluish otherwise it will remove the blur so is blurred by remember mutable state of oops Okay I uh press the wrong button so it's false let's import okay now let's say content scale let's make this crop let's say filmax size and now we can simply say blur and here we need to have the radius but let's implement the clickable and is blurred equals not is blurred so the radius determines how blurred is the image and we want to animate this by saying w um blur radius animation by animate DP as state let let's oops put this on on your line and let's say if is blurred we want 20 DPS of blur otherwise nothing let's also add a label to get rid of the error and now let's say radius equals blur radius animation let's run the app and see how it looks okay and now if you click on the image it should get blurry okay it works and now let's handle a list of images and that we want to blur so let's start by creating a data class Cofe it will have an ID and an email agage and this is a drawable press okay let's create the list so coffee list oops is remember mutable mutable State list off and now let's create the coffee so I D zero image is Art drawable at the art let's duplicate it for a couple of times lat art one and lat art two and this will be one and two now let's say coffee selected coffee and remember mutable in state of oh oops mutable State list of integers and now let's say lazy column items coffee list coffee and now let's get the image and now we replace this with coffee. image and let this one like this and let's say side 200 DPS now we need to get these ones okay so this one will be a deriv state of let's remove the mutable State off this will Tri be triggered when the selected coffee changes so selected coffee contains coffee. ID and change to Vault sorry so remember selected coffee will be triggered whenever the selected coffee St uh list will change and it will verify if the selected coffee contains the coffee ID to check if it's blurred so here we need to say selected coffee let's say if selected coffee contains coffee. ID selected coffee remove coffee ID L selected coffee add coffee ID okay so let's run the app and see if everything it's okay now okay so I haven't removed the enable edge to edge so and this costed the overlap of the top bar but it's okay you can remove it if you don't want to use it so let's click on this one it's okay and everything works perfectly and if you like this video make sure to follow me for more content like this and see you soon

Channel: Daniel Atitienei

Views: 352

Keywords: Jetpack Compose, Kotlin, Android, Jetpack, Compose, Daniel, Atitienei, Programmer, Android dev, Dev, Developer, Kotlin tips

Id: yQRmD4rJNk0

Length: 6min 26sec (386 seconds)

Published: Sat Apr 27 2024