Top 3 Secret Jetpack Compose Modifiers I Bet You Didn't Know

hey guys and welcome back to a new video in this video I will show you three modifiers in Jetpack composed that are really cool to use but not many people know of and the first one can be used for texts in your app so if you have a text that is very long so this text is very long and we might just copy paste this a few times to make this even longer then this would normally exceed the balance of the text if we set the Max lines to one so when launching this this would look like this you just want to have a text that is only one line long but the text itself is very long so it goes beyond the screen bounce what can you do in this case well of course there are ways to have an Elipse size here that it abbreviates the text with three dots but that is something that is pretty known what is not so known is that we can use a modifier called basic Marquee we need to add this experimental annotation here in order to use that but if we now relaunch this and take a look then you will know this from music player apps so the text Will basically just move very slowly until the user can fully read it of course in in real texts where where where you want the user to read a longer text this is not so suited but as I said if you have a music player for example where you want to show a long name of a song together with the album The interpret or so then um I think this is a really cool modifier to achieve this Behavior really easily the next cool modifier I would like to show you is one that I would like to apply to this box so we just have a box we make it fill the whole withd of our screen and then inside of that box we have an image which in this case I just want to load from our resources so we can set that to a painter resource out drawable and that that's called cent in my case the content description can be null for this example and the uh modifier of this image can just be modifier Phil Max with and to really just show the whole image want to set the content scale to content scale. fill width so we just fill the whole width and the height gets cropped so that it fills uh the whole width but what kind of modifier do I now want to show you that modifier needs to be applied to our box and it's called magnifier because with that modifier we get a very cool zoom in effect so we on the one hand need to specify the source Center so where we want to have that magnify effect let's just choose a random offset for now I will show you something even cooler at a moment we we just set the uh X to 200 pixels and the Y to 200 pixels and if we launch this now and take a look then you can see we have a little square here in our image which Zooms in into our image and that is what this magnifier modifier does like this it's pretty boring and and not really useful but you notice in some apps for example these typical document scanner apps where you need to select the four corners of a document then you have the problem that as soon as you kind of drag over this image to select the corner you don't see the corner anymore because your finger is over it and in that case what these apps often do is they display such a zoom in effect above your finger so you can still see where you select or where you put that corner and you can also achieve this very easily with this magnifier modifier so in that case we could just have a dynamic offset which um basically just moves this magnifier and this zoom in effect so we can say bye actually member mutable State off and here we pass in an offset do0 so um it just starts at The X and Y position being equal to zero Alt Enter to import that then we can just go ahead in our box add a pointer input modifier with which we can just track our touch inputs and the positions the key can remain true here so we don't want to reexecute this block in any case you would need to pass something for this key if you would use some state this pointer input scope would depend on but that's not the case in this case here we can say detect drag gestures we get the change and the drag amount which we don't need and in here we can then update our offset to the new position of our change offset so that is really just the position where our finger moved after we dragged and we then update our offset state so we can then use this for our magnifier lens to display it for example at our Dynamic offset minus this offset set let's set X to Zero and Y to 200 pixels so that way we take our Dynamic offset which is exactly where the user's finger is and we subtract this offset so we subtract 200 pixels on the y-axis so we display the magnifier lens a little bit above our finger so we get the effect that I talked about however right now the source Center really refers to the area where the zoom in effect actually happens that's not entirely true because we only want this to happen at our Dynamic offset so where the finger is but we want the lens the zoom in bubble to appear at this position so we actually need to cut this out here and just leave this at offset so we zoom in at exactly where our finger is but we then show the zoom in bubble where we say magnifier center right here oops now I copied this empty line let's quickly retype this offset minus offset 0f 200f and if we now relaunch this and take a look here in our app then we will notice something really cool that we can take this and drag it here wherever we want and we see this little zoom in effect above our cursor of course this kind of rectangle looks pretty ugly right now we can also fix this with this modifier so we can go in here we can assign something called a style which we can set to magnifier style we can set the size for example to a DP size of 100 DP I'll enter to import that times 100 DP and we can set the corner radius to something really large so we have perfectly round corners and therefore Circle if we relaunch this and take a look then we now have a little circle here with which we can zoom in on whatever we want pretty cool right coming to the last secret modify here not many people know of because usually when you want to draw some custom shapes or custom paths on the screen what you need is a canvas and a ja compos you can create a canvas with a canvas composable so you have a modifier field Max size for example and then in here you get a draw scope where we can draw Circle an arc an image a line whatever you want to draw that is the typical way of how we can use a canvas and Jetpack compost but what not many people know is that there's also a modifier you can use to transform any composable into a canvas so if we would want to draw a red circle for example on top of this image then we wouldn't actually need to kind of have a box with a canvas and this image comp composable no we can actually use a modifier called draw with content or you can use draw behind which will draw things on a canvas that is behind this composable but since in this case you want to draw something on top of our image we need to use draw with content and this also gives you a Content draw scope which you can now use to draw the content so that will be the actual composable or you could draw a circle or you could draw an arc so you have the same functionality as you also have with a normal canvas just that this time you only need a modifier and not a whole new composable so what we could do is we could say first you want to draw the content so the actual box composable with the image in it and then on top of that we want to draw our Circle we can choose color. red for example we can set something for the radius something like maybe 200 pixels and we can set the center to an offset for example our Dynamic offset that that doesn't make any sense in this case but just that you see how this works if we relaunch this then you can see here's our Circle and if if we move this then we have our red circle here on top of our image and of course the zoom in effect now Zooms in on our red circle um so we have two red circles here but that comes from the magnifier lens if we comment this out then oops then you won't have these two red circles but only this one here which we can move with our cursor so as you can see you don't need a canvas Inc composed at least not the separate canvas composable but you can just make use of this draw with content or Draw behind modify to transform any composable into a canvas and if you found some new tips in this video then guess how many of such tips you will find in my premium courses which are more advanced Android courses that will really prepare you as an Android developer for the industry if that sounds good to you check the first link down below to see all my Advanced courses other than that thanks so much for watching this video I will see you back in the next one have an amazing rest of your week bye-bye

Channel: Philipp Lackner

Views: 14,697

Keywords:

Id: rLs-iUWtumE

Length: 9min 7sec (547 seconds)

Published: Wed Jan 03 2024