How to Implement Pinch Zoom Gestures in Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to a new jpack compost tutorial in this video I will show you how you can Implement pinch to zoom gesture in compost and how you can also rotate an image so you can see this is the image I have here and if I pinch then I can actually zoom in and if we're zoomed in we can also move the image um until we reach the bounds but not pass that and in this video you will learn how you can achieve this behavior in your Android app so here this empty project we just want to have one state for the scale of our image by remember import remember um why doesn't it show up here remember I don't know by remember mutable State off initially our scale is 1 F and hopefully we can now hit out enter to import that no we can't now I can okay compos is weird today I'll enter import that again I'll enter again again and then we have this uh by delegate as well and we can reuse this for our offset as well so our offset is it basically describes where our image currently is so when we zoom in and we move the image then we change our offset by moving it by default it's at offset do0 so just uh zero pixels on the xaxis and zero pixels on the Y AIS we can also add rotation here but for the use case I showed you um we don't really need this you can't really rotate an image in your gallery but after I showed you all that I will also show you what you could do if you would really want to rotate something because that's really um pretty easy to to extend this functionality what we then need is a box with constraints a box with constraints is nothing else than regular box which gives us access to its bounds so to the width and the height which we just need to calculate the boundaries of our image so until where we are allowed to drag the image and not further and this box with constraints will have a modifier of modify filmax WID on the one hand and on the other hand it will take the aspect ratio of our image in my case that's 1,280 pixels by 9 59 pixels please use your image Dimensions here of course I've already included my image here in the drawable folder so please make sure you also have the same at least a comparable image which you want to zoom into and in this box with constraints we have our image the painter is our painter resource to load an image from our resources r. drawable do kmit in my case then the content description is yeah let's just pass n here and the modifier is modifier. fill Max WID and then the magic happens inside of this Graphics layer so the graphics layer allows us to just transform a composable in all kinds of ways so on the one hand we can change the scale scale X and set that to our scale scale y set that also to our scale and we want to change the translation X so the X offset is equal to our offset dox and the translation y offset that Y and that itself won't do anything yet because we don't change the offset in the scale yet but what we can do is we can define a magic thing called a transformable state state is equal to remember transformable State and that takes in a Lambda which gives us the zoom change the pan change and the rotation change in form of parameters and compose handles a lot here for us since we we don't need to calculate the zoom change pan change and rotation change on our own we just need to update our state accordingly so what we can do here is we can say scale is equal to our scale multiplied with our Zoom change so if the zoom change is for example 1.1 so we Zoomed In by 10% then we multiply our current scale with a new Zoom change so 1 * 1.1 which results on 1.1 in scale so we Zoomed In by 10% but we want to have some kind of boundaries for that for which we can use coers in and here we can pass a minimum value so we want this Zoom to be um 1 F at minimum so we can't really zoom out if we already have the original size of our image and the maximum Zoom is let's say five and we of course still need to do more here for the offset but we can already try this out if we go down and say transformable and we pass in our state so that this transformable St State really listens to these Zoom pan and rotation events on our image composable then we should already see that we can zoom in but we can move the image yet so you can see I zoom in and yes that's working I can't move yet but we can zoom further out than the image originally takes but we can zoom in up to five times okay you can see how easy that is the offset is now a little bit trickier because we could have of course say okay our offset is equal to or plus equals our pan change which is also an offset so we just add that change to our offset and then we should be able to already be um we should be able to see that this works if we zoom in we can move but you'll also see that we can move past the bounds of the image that's of course not what we want and we now need to find out the minimum x coordinate until we want to be able to move it the minimum y-coordinate the maximum x coordinate which is the end here on the end of the image and the maximum y-coordinate which is the bottom of this image and then we want to also call cores in for the pan change or for whatever we set the offset to and make sure that the offset is within the bounds and for that we need to calculate the extra width so basically the width which is currently not visible so if we zoom in on the image then obviously parts of the image are not visible at the moment and the the width of these parts together is described by this extra width which is scale minus one multiplied with constraints that Max width and extra height is equal to scale minus one multiplied with the constraints that Max height why scale minus one well if our scale is 1f so that that is the very initial situation if we relaunch the app then now we would be at a scale of one then at this point there is no extra width because nothing is actually overlapping anywhere so 1 F minus one would be zero so we would end up with a with an extra width of zero but if our scale is two for example so we are moved we zoomed in a little bit then the extra width would be 2 Fus 1 so 1 times our constraints Max width so then half of our constraints Max width would be overlapping at the left side and half of it on the right side that is how this formula where this formula comes from and then we can calculate the max x coordinate so um the rightmost x value that is allowed until where we are able to offset this and this would be our extra width divided by two um because in the end we have two signs which are potentially overlapping and one of these is on the right side one of these is on the left side and we have the max y as well which is extra height divided by two and then we can say our offset is a new offset the x value is our current offset X we add our pan change. X on top of that and then CS that in minus Max y minus Max X and plus Max X can duplicate the for y as well it's exactly the same just that we replace everything with Y Max Y and Max Y and if we now also delete this line here of course if we now relaunch the app take a look then we can zoom in if we now move this then now we can move past the bounds of the image anymore because we established this uh this formula and and we have this Coes in function something you will notice though is that the further you are zoomed in the less a little swipe has an impact on the offset which is quite weird um but the the zoom actually also has an effect on how many pixels are moved and if you want to avoid that you would need to multiply this pan change here with the scale as well to make it dependent on the scale so if the scale is really large like 5f that means we're really far zoomed in then we want to add more of the pan change than if the scale would be just one and here as well if we then relaunch this one final time that we should be able to see if we zoom in we can still move this image pretty quickly just as we would expect so far so good but what I also wanted to show you is rotation of course for that we can simply go up here copy paste our scale and name it rotation and then in our function we can make sure that our rotation change um actually our rotation plus equals our rotation change I'm not sure if the rotation is an absolute value here or if it's a percentage value um but I think plus equal should be fine if we scroll down we then want to say our rotation Z so around the Z axis which goes inside the screen we want to rotate and that will be our rotation degrees okay let's try this out take a look here and yes we can rotate our picture we can still Zoom um but of course as you see um the boundaries aren't considered anymore because with rotation this will be a bit more tricky to calculate that but if you just rely on the rotation itself then this is how easily you can Implement that in Android Studio with jet compost if you feel like jet compost is still quite complex you you're very interested in that but it's still quite complex you're afraid if you're making any mistakes then I got a free PDF for you which summarizes 20 very deadly mistakes you should definitely not do in your jet piic onos projects get that PDF for completely free down below and I wish you an amazing rest of your week thanks for watching and I'll see you back in the next video [Music] bye-bye

Channel: Philipp Lackner

Views: 9,536

Keywords:

Id: 3CjOyoqi_PQ

Length: 11min 35sec (695 seconds)

Published: Wed Oct 18 2023