Modifiers - Android Jetpack Compose - Part 3

hey guys welcome back to a new video in this video i will dive a little deeper into modifiers as i already teased out a little bit in the last video so what are modifiers you have already seen some functions of modifiers in the last video where we used them to increase the size of our column for a row of basically any composable so we had the option to set the width and the height to a fixed value with modifiers or we had the option to set it to a fractional unit like to 70 for example but we can actually do so much more with modifiers so first of all as i said we can apply these to any composable in jetpack compose so we can apply these two texts to columns to rows to other containers to images to everything so we can basically change the appearance of everything but not only the appearance we can change the sizing which you've already seen we can change the layout so we can apply padding for example we can also add information with modifiers for example some kind of accessibility labels we can also make our composables interactable so what that means is we can make them clickable so that we can click on those we can make them draggable to be able to implement drag and drop functionality we can make them zoomable and scrollable and just a lot more so let's let's just get into it and see how all that works first of all let's create a column again as in the last video in which i will again just put in two texts here which i will import hello world and then i will give this column here a modifier which you also already know from the last video so we use modifier dot um we import this here from compose ui dot background which you also already know just to give our column a background color let's choose color green let's set fill max height to 50 and let's set width to import that to 300 dp and also import dp pressing out plus enter if we now launch this and check our emulator then this will look quite familiar to you we just have our column we didn't change the arrangement or alignment for that column we just put these two texts on top of each other and we set the width of our column to 300 dp and the height to 50 now to start i want to actually compare two different functions or properties we can apply to modifiers that affect our size so you can see with width we set the width to 300 dp so far so good but there's actually another property we can change here with which is um required with and what is actually the difference here with required width we can basically force the width to be exactly as wide as we specify so if we would set this to 300 dp it would look exactly the same as with this width modifier property here but let's see what happens if we choose something like 600 dp here and i'll comment this required without here for just a moment and relaunch our app and take a look here then you can see it fills the whole width of our screen even though 600 dp is actually wider than our screen so if we use just width then it will set the width to that dp amount but if it actually exceeds the width of the parent container which is here just our page our app then it will set it to the max width available instead but if we comment this out here and use required width and set it to 600 dp and launch our app then you can see now our texts are gone because we set the width here to 600p and now it will really fill that 600 dp so the text will be somewhere here so that is just important to know these two attributes that we have here these two properties to actually modify the size of a composable to set it to a fixed width or height so let me comment this required without here again and use with instead to just fill the max with we can also just use fill max with instead which is a little bit cleaner in my opinion and actually get to the next property and to show you which you already know if you have some experience with android xml layouts if not that's not a problem which is just padding so padding is a very known concept in designing uis all that does is it will take a container here in our in our case the column and it will push the content of that container into its middle basically so if we set the padding here to 16 dp for example relaunch the app then you can see the content of our container the actual texts are pushed into the middle of the container so this distance here is now 16 dp wide and this as well and the same way we can of course set padding to just one side or two sides or just three sides we don't need to apply this to all sides if we press ctrl p here you can see we have an option to set it for all sides at once we have an option to set it just for horizontal so for the left and the right or just for the vertical axis or just for each side individually so for example we can set just the top padding here by setting top to 50dp and then you will see something very magical will happen it will just push down our text by 50dp amount here the next property i want to show you is offset which we want to apply to our text here so as i said we can also apply modifiers to text to any other composable so we set the modifier here to modifier dot offset and what this will do here is well it will offset our text you might not think that this is similar to margin which you might know from xml which you might know from css um it's similar but it's not the same so in jetpack compose we actually don't have margin as we know it from xml um instead we can basically recreate margin just with padding so padding is actually just enough to do everything we can also do with padding and margin combined so instead of setting a margin left to an element we can also put it into a container and just apply padding left to that container that will lead to the same result but what offset here will do is it will it will offset the element just like margin does it but it won't push away other elements so if we actually move that into the next line and set this to 50 dp 20 dp for example that offset always starts from the top left corner of a composable so what we do here is we take the top left corner of our text move it to the right by 50 dp and to the bottom by 20 dp so when we launch this app now and check our emulator here then you can see our hellotext we applied the offset for was initially here and now it's pushed 50db to the right because we set the x value of the offset to 50dp and 20dp to the bottom and it ignores this world text basically so if we would remove this offset x here and set it to 0 dp oops like this and we launched our app then these two texts will overlap because we only push down our our first text but because it's offset and not margin this won't affect the the text that is below it so if that were margin in xml it would actually also push down the the bottom text by 20dp to the bottom but here with offset that's not the case and you might now ask um if there is an easy way to actually push down this bottom text here by some amount of dp without actually wrapping it into a container and applying padding to that container and yes there is a way to do that we can use a composable called spacer which will well just lead to some extra space and we can just apply modifier to that space or nothing else and with that modifier we can just apply a height to that or width if it was a row based layout so for example modify a height and set this to 50dp that will just insert an empty composable that has a height of 50dp and that means everything below that composable will also be pushed down by 50dp so if we relaunch the app and see in your scene in our emulator then you can see now our real text doesn't overlap anymore with our text and set is pushed down by 50dp here the next property i want to show you that we can apply to a modifier is the border property i will actually remove this offset here because that is quite annoying um the border property is used to well give our elements a border let's apply that to our column so we want to surround our column container with a border so we use border press enter here and we can see there are some overloads we can actually make use from i want to use the very bottom one so we can give our border a width which i will choose 5dp for and we can give it a color which i will choose let's say magenta for and we could also give it a shape which is just defaulted to a rectangular shape so i'll leave it like that if we launch our app and see here then you can see our container basically now is now surrounded by a border and because we applied padding to that container that border is also pushed down by 50 dp let's actually remove this top heading here so the border will actually go around our whole container but the cool thing here is and that's extremely important to know about modifiers is that these functions we call on this modifier are applied sequentially so we can apply the same function here multiple times on the same modifier and it will lead to a different result what that means is we can make use of that border now which we set the width to 5dp then we can say okay now we want to push the content of our container into the middle by 5dp so we set the padding to 5 dp and now whatever comes afterwards each is pushed to the middle by 50p so we can apply a border again so let's apply the border property here again set this to 5dp again and this color for example to let's say blue and then we can apply padding again and set that to 5 dp because our border is 5dp as well and apply another border so that is extremely cool here you will see how that looks like set that to maybe 1080p this time and the color to color dot red and then finally apply another padding for 10 dp so we can actually see our two texts here so let's launch our app and check our emulator and you can see now we have three borders applied to our container and these paddings were just applied sequentially so first we didn't have any padding we drew the magenta border then we applied a padding by 5dp so the next bar is actually visible here which is the blue border we applied padding again by 5dp we drew the red border which is which has a width of 10dp and then we again applied the last padding here of 10dp so the content of our column is actually pushed into its middle by 1080p again so we can actually see our text here and that is super cool in my opinion if you wanted to do this in xml you had so much work um i don't even know if you could normally do this maybe with drawables but it could very well be that you needed to make some kind of custom view here um i'm not too sure about that but it's definitely a lot a lot a lot harder to do this kind of stuff here in xml and of course you wouldn't make your layout look like this with such colorful borders that looks bad but i think you realize how creative you can get now when it comes to making layouts in android and of course this chaining of modifiers this adding sequentially also works with any other property you basically define here so also with offset for example um let's do that here for our text if we apply a modifier and set that to modifier dot border set it to 5 tp and color yellow for example again then apply some padding of 5dp and then apply some offset for example by 20dp 20dp and then apply a border again of let's say 10dp and some padding finally of 1080p of course the color here for the border let's just choose a black here black and launch our app and you can see what happens now is we first set this yellow border to our text then we applied some padding and then we offset it by 20dp in both directions so the next starting point is here and from there on we applied a black border and from there on we applied padding so finally our text is here which is not readable but you get what this allows you to do actually so you can get so creative with that and i'm actually fully in love with jetpack compose because i i really like the way we can make uis now so i will remove these properties here again because there is one last thing i want to show you in this video which is making our composables interactable as i already explained a little bit in the beginning so let's say we want to be able to click on this little text here then we can add a modifier of modifier.clickable and you can see that comes with a lambda function and here we can just put in some code that should be called whenever we click on that text just a normal on click listener but this also comes with a click effect so if we launch our app here and check it then if we click on our hello text you can see there is this little shadow that indicates hey we just clicked on that and this is clickable and the same way we not only have clickable we also have zoomable i think oh no it's scrollable of course um and draggable we can also make our composable zoomable but that is not as easy as just adding a zoomable modifier here so let's remove this again and i think you got what i mean here with interactable and of course this was by far not everything we can do with modifiers you will actually explore so much more about these when you just apply what you learned here when you create some kind of ui and yeah then you will just research what you need i can show you everything here of modifiers in this playlist which is rather about the basics but i plan to create a little ui component in the next video so we can actually apply our knowledge that we learned so far and some more knowledge and just create something practical with it that doesn't look like this you wouldn't make an app that looks like that you actually want to make ui that actually looks good and that's what we will do in the next video so i hope you liked this video if so please take a look in this video's description where you'll find a link to my website and there you will find more advanced android courses which are premium so paid android courses which will just bring your android skills to the next level and that is also way how you can support me and my work if you liked it leave a like leave a comment and i wish you an awesome day see you next video bye bye [Music] so

Channel: Philipp Lackner

Views: 13,124

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, compose, jetpack

Id: XCuC_p3E0qo

Length: 18min 26sec (1106 seconds)

Published: Wed Apr 07 2021