Jetpack Compose - Modifier #3

welcome guys to a new jitpack compos video which is about modifiers and simply with a modifier we can specify how we want our composable to look like for example from giving it a size as we saw in the previous video making it clickable giving it arounded Corners giving it a background and many more things we can do actually with modifiers so's jump to Underwood studio and get started here we are in underw studio where we left in the previous video Let's just delete everything and create UI in our composable function right here and let's just create for now a row and let's have some things inside it two buttons again inside those buttons let's have some text that says btn1 for example and just copy this button and write btn2 and if we on the app nothing is now new to us we have a row with two two buttons very simple so now what we're going to do is applying a modifier to this row so like this and write modifier this one is equal to modifier like this and from here we can now specify how we want our modifier to look like first of all let's start with the size fill Max width and giving it a height of fin Max height 0.5 F to give it a 50% height height and of course to see that height and width we need a background so let's give it a background let's say for example color and we don't always have to use the material themes color as I used in the previous video you can just use a different color like for example dark gray and run the app here is now our row that has this dark gray color and it has these two buttons with 50% of the screen height and now the First new important thing we will see is padding which is something you will use a lot and simply padding means pushing elements to the center so now we give it a value like for example 40 DP like this import DP and if we're on the app what we'll see is that these buttons will be pushed to the center by 40 DP as you can see from the top and from the start and we can of course also specify where we want to have the padding so if we want the to start only from the start then we can actually only put it in the start like this so we have padding in the start here and I think I want to change this dark gray color because it doesn't look good and I'm just going to use a blue color because we can't really see the buttons well now we can see or this is even worse I guess uh let's just use a material theme color these colors are so not good so I'm going to use a mat team color color scheme and say primary container I guess this one should be good as you can see here is my row and I push my buttons for CDP to the right like this because I used this start padding and I can of course give it some padding from the top or just put that in the same line same top and say for example 150 DP and run the app now we push our buttons 150 DP from the top and we can give it for example only padding horizontally so if we say horizontal padding again let's just say 20p what will happen is that we'll have padding only horizontally so from right here we pushed our elements horizontally by 20 DP and also right here so if you have something at the end here it will be pushed 20 DP and to see that we can use the horizontal Arrangement dot space between to push the buttons away from each other like this as you can see now they are push from serer but we have this uh 20 DP padding from the end and from the start because we use horizontal padding and of course you can use vertical padding like this it's say. DP uh we have now padding from the top here and then from the bottom because we said vertical padding T thep so this is it for thep we can push elements to the center using thep and if let's say I don't want to push all the buttons and I want to push only one of them so only for example the first button then I can just give it a modifier so I can come here and say modifier because as I said in the previous video we can apply modifiers to any composable and they simply can just now give it some offset like this and uh we don't have actually margin in jitp compose we did have margin in XML but in jitp compose we don't what we what we have here is offset which is like margin but it works a little bit differently so with that offset we can of course push our button so let's say for example 20. DP and now what will happen is that we will push our button 20 DP from the start so let's run the app and let's just remove this one and actually use a common to see that uh even cleaner like this now let's run the app again as you can see what happened is here is that our buttons normally were like this but then since we gave this one an offset of 20 DP we pushed it from the start and offset starts always from the top starts corner so if now push it again let's say by 100. DP now we're pushing it to the bottom so if we onun the app we see that now it's pushed to the Bottom by 100 DP and here it is without actually affecting the second button this is this is why we would use offset and if we want to only use padding then we can of course just do that and let's use padding let's say we want to push it from the start by say 20. DP and if we run the app our button will be push 20 DP to the right but sometimes you you need to put it inside a container depending on how complex your composable is or how many modifier attributes you have used and how you actually want it to look like EX exactly so for example with our column here that we gave this vertical padding what we see is that in our app is only the container is pushed to the bottom and if let's say we put the background after that right here after the padding we see that also the background color will be pushed and just to be clear now our common doesn't start from here it starts from here from the very top but it's only that the color is pushed to the Bottom by 10 the P so the padding doesn't actually push the composable itself like this one no it only pushes what comes after that padding and in our case the button itself comes after that padding so it seems like it's pushed and in here the color comes after that padding so it's pushed actually and if we want to have for example another color uh beside this one that we already already have so let's say for example color scheme dot let's use for example this secondary container I mean secondary color and if we onun the app see that we have now another color right here so yes our col starts from the very top not from here it's just the color is pushed because these functions are executed in a sequence way so one by one we now have a color we pushed everything that will come after this padding by 10 DP vertually and then we put another color or another background and that background itself is pushed to the bottom and now let's see what what we can also do with this modifier for example giving it rounded cors using clip and we can give it a shape usually you want to use rounded Corner shape and for example say 20. DP let's just use now padding from everywhere but now we also want to put this clip before the background to actually clip the background itself to apply this clipping and then apply the background because this is what's going to happen if we don't do that so let's actually run the app and see what's will happen now nothing happens we have our background and then we have our clip that is exactly right here but since we don't have any color after that clip we can't see so if we put this background after the clip and one the app again we can now see a clip with these rounded Corners what's happening is that we give it this spading by tndp from everywhere and then we clip so anything that comes after that clip will be clipped as you can see and what comes after that is this background color so that background color itself is clipped we can see now these rounded corners and of course we can pass different shapes to this clip like circular shape to have a circle simply if you want to have a circle then we can use this one as you can see we have now a circle but usually we just use this one but of course you can use that Circle if you want a circle specifically and we have many more functions if we just click on this one this is our padding this is offset that we used height which are the ones we saw and size and of course Alpha if you want to make our uh composable a little bit transparent so if we say zero for example 8f or let's even say five to clearly see that under running the app as you can see now our composable or our column is a little bit transparent because we give it this Alpha and we have more stuff if we just scroll you can just experiment them we can actually use also clickable to make our composable clickable simply and if we're on the app if we click on it we see that repl effects and basically we can excuse anything inside this Lambda function just like this one that we had in the button we can do now something here after clicking on the button but on on the button we already get this click I mean on click Lambda we don't have to say dot clickable like this because we already have it which is this one uh in normal composable like a column a row a box an image we don't have those so we need to use this one and we can do anything right now if we click on that common and another thing we can do is making our common scrollable and we can use this vertical scroll remember scroll State now our common will be scrollable so if we have some really big common with a lot of elements and let see that actually let's have so many buttons inside our column like this I'm ping a lot of buttons now if I run the app as you can see we can scroll and uh yes we have more stuff to see with that modifier like we can just give it a shadow Make it actually WRA its content height and width so if we don't know how much the size will be then we can just use wrap content width or wrap content height to actually make the composable wrap its content size like R contents from XML this aspect you want usually use this one in images or in video players if you want to give our video player an asp ratio of 16 by9 or something like so and uh actually more stuff we can have like a border of course a blur so let's just see this border one and we can give it of course the width of the border so let's say where. DP and then the color of our borders we can say color dot green for example and if we on the app here is our green border and if you want to have like more borders we can just push uh our elements a little bit to set W DP which is the same value as our border and then give it another border oops right here let's use it now a different color like yellow as you can see here's my green and then my yellow border and if I want to have a space between them then I can just push this more so let's say 16 DP and if I run the app now there's a little bit of space between the two borders the another thing I want to show you is a spacer so let's just delete all these buttons that I've created because I don't want them anymore like this a spacer is just as its name says putting a space between my composes so like this spacer that takes a modifier since now I have a column and I want to have some space between these two buttons then I can just give it a height a height of let's say 4 t. DP and what will happen now is we will have an empty composable that height is 40 DP between the two buttons and if we're on the app as you can see now we pushed our second button 40 top to the bottom because of this spacer right here and if we have a column I mean a row then we can just have another spacer and then the elements in the right like this will be pushed to the end with a spacer and in that case we would use width if we have a row so actually yes as you can see we have different things we can do with these modifiers and any compos can take a modifier for example this text itself right here can take a modifier like this and then you see some really magical thing will happen the text is pushed 2dp to the start so our button is a lot bigger now so what you can do for now is experiment different functions that we get with this modifier try creating some composable and applying different attributes giving it different shapes and stuff and just play around with it to see how it works and experience it by yourself because there's nothing really that can go wrong with this just experiment it and try to learn it and this is it actually for this video and the next video we'll get to see compost states and why we need them so see you in that video and bye

Channel: Ahmed Guedmioui

Views: 574

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: 0CI87FSC2R0

Length: 14min 58sec (898 seconds)

Published: Wed Feb 07 2024