6 - BOX in Jetpack Compose - Android Studio

hello my friends and welcome back to new video in this video I'm going to tell you how to use box one of the features of the jetpack compost so if you are ready and if you haven't subscribed to the Channel please subscribe to the channel right now and hit the Bell button to be aware about the new videos give me a thumbs up to help this video be watched by more people and let's get started [Music] as always here we have the same structure the composable function my app and record that function here in the set content and a preview composable function and again I have called the my app inside this composable function as well let's start with adding a box here let's check the features of the box as always we have the modifier and another thing content alignment let's check them starting with modifier foreign let me set the background color dot yellow and the size of it feel Max size here we have our box and let me change it to White okay the box is occupied the whole screen now let's add another box inside this first box look foreign custom size 200 DPS and the same here 250 30. 30p that's good okay uh as I told you in the previous videos when we are adding a new element in the jetpack compose by default it will be located in the start top of the screen so what if we want to change the location of the box and put it in the center or bottom or something else in the features you saw that you have the content alignment but I want to change the location of the second box there I should use this content alignment the second box actually is the content of the first box so I have to use this content alignment in the the first box features making the Constructor of the first box so here content alignment alignment Dot and these are the locations that we can store our box let's put it in the center of the screen okay we have the second box in the center of the screen but we changed its location from the first box the same here let's add another box and with the modifier [Music] with under it DP and hi hundred DP okay the green box is the third box and if I want to change the location of the green box inside this yellow box I have to use the content alignment in the second box which is the yellow box so content alignment alignment dot let's have it maybe uh bottom center okay now let me show you another thing I'm going to add a text here foreign size 38 Dot SP and as you can see the text is corrupt and I don't have the second word like the police is completely disappeared here so what we can do to see this text uh the size of the text the size of the Box sorry that we wrote here will not allow the bugs to be like greater bigger than this size so if I delete them the box now is allowed to be expanded and it can cover wrap the whole text so it's something like the wrap content in the classical Android system and if I decrease the size of the text the Box will be a smaller there and even a smaller and even a smaller depends on the size of the content so as you can see uh when we are using something like text inside the box and we don't give the like fixed size the bugs will follow the size of the content inside it but when you want to change the location of the content we should go a step upper and set the content alignment on the let's say parent works in the higher level to change the location that was everything about the box and in the next video finally I will talk about the modifier modifier is a great feature so if you haven't subscribed to the Channel please subscribe to the channel and hit the Bell button in order to have the notification about the modifier video give me a thumbs up please for this video to help this video be voiced by more people and if you have any question any suggestion any comment write them down please in the comment box below I will put Source codes as always in the description of this video and that's it thank you for your time and see you in the next videos bye

Channel: MkrDeveloper

Views: 1,157

Keywords: box in jetpack compose Android studio, BOX - Jetpack Compose - Android, box in jetpack compose, how to use a box in android jetpack compose, android jetpack compose box, Mohsen mashkour, Mkr Developer, jetpack compose tutorial box, android jetpack compose, jetpack compose mohsen mashkour, jetpack compose for beginners, jetpack compose composable, jetpack compose, Jetpack Compose tutorial part 5, basics jetpack compose tutorial, Box layout in jetpack compose

Id: rw80qs6ErWQ

Length: 9min 30sec (570 seconds)

Published: Sat Jun 24 2023