Basics Of Jetpack Compose | Ultimate Guide to Jetpack Compose

 JetPack Compose at one point of time will completely replace the Android XML view system. That is how easy and powerful JetPack Compose is. Hey everyone, welcome back to my channel, and in this video we'll be learning the absolute basics of JetPack Compose. So without any further ado, let's roll the intro and I'll meet you on the other side of the video.

 Starting with the video, if you notice I have removed everything and added two simple text fields. Text Composable in JetPack Compose are used. When we want to add some text to the app

  on the right side, you'll see the text showing up, but you'll notice that there is only one text showing up instead of two.

The thing is that in JetPack Compose, there is absolutely no styling by default. So that means that actually there are two text views showing up. It's just that they are stacked on top of each other. Thus we are not able to see both of them. So to solve that, we can add layouts to the screen similar to the XML views in Compose, we can make use of different layouts to style the screen in compose .

We use columns and rows in the place of linear layouts. So let's introduce columns to the projects.

 When I add column and shift the text fields inside the column, you'll now be able to see the two text fields. Now, most of the times we cannot just directly use the layouts. Many times we need to style our layouts, views, et cetera. So to change the styling of any component in jet pack compose, we have modifiers.

Modifiers allows us to change the styling and properties of component. Let's try and do that. I'll be adding a background to the.

 Here we'll see that the red background is now added to the column, but similar 📍 to wrap content property in the xml, the column only takes up as much space as it is required by the children.

 So to allow it to take the entire space of the parent, we added fill max size modifier, which is basically similar to adding the match parent property to the height and width. This method allows us to take the entire width and height of the screen. We could have also given a specific height or width to the column along with some padding.

 So you see that we made a column of a specific. And gave it some padding as well. The modifier are not only limited to provide the stylings, we could also use the modifiers to change the shape of the background as well.

  So here you can notice that we have made the corners of the background rounded by providing it a rounded corner shape.

So you see that how Easy Compose has made adding any kind of shapes to the backgrounds, they have included these shapes by default, because these shapes were used by almost all of the apps. And to add this kind of shape, we had to make a drawbable file and then add it as a background in the XML views. Now that we have taken up the entire screen, I now want to center the items of the column. So in XML, we could easily have done that. We just simply need to provide the center layout gravity to the view. Or if we were using the constraint layout, then we could have just made the constraint of the views to match the parents constraints in compose.

Aligning the items is also as easy as xml. There are two very important properties to remember here, arrangement and alignment. So let's first talk about arrange.

 So you'll notice that I have removed everything and just used the fill max size so that the column takes up the entire screen. Then I have added a vertical arrangement to the column, which centers it vertically to center it horizontally, we have the alignment.

  So you see that now the text has been aligned to the center, so that means arrangements are for the main axis and alignments are for the cross axis. What do I mean by that? Well for column arrangements would be on the vertical axis, since that is the main axis for a column and for a row arrangement would be on the horizontal axis.

Since that is the main access for a row now, we are not only limited to center and center horizontally for the alignment and arrangement. We can have much more than that play around with different values to see how the views react to the given. One more very important thing we used to do a lot in XML was to style our text views.

We already used the text view to show some text onto the screen, but how do we style our text views and compose? So let's talk a little bit about text views and compos.

 Well compose has basically made everything pretty easy for us developers in compose. Similar to XML views, we don't do anything fancy. 📍 📍 We can just pass the styling for the text views as a parameter, we can have all sorts of modifications, such as font, family font, colors, et cetera. In compose, we can also span the strings pretty easily, which wasn't the case for XML layouts.

So for XML layouts, let's say if we had to make some span strings or some strings with unusual styling, the code to do that was not as easy as compose has made that. So to make some span strings, we can use the build annotated string method. Let's see how.

 Now if you see that using the build an string method, we gave a style to the first letter of the word. To do this in XML was not as easy as compared to compose. We can add any type of style to the word, such as online strike through, et cetera.

Cool. So we now learned about the layouts, the text views, and a little bit about the modifiers. Now let's move ahead.

 Now, in the previous video, we had a sneak peek into creating our own composable functions. You already know that composable functions behave as an independent component, similar to react components. Also, the composable functions can be called by other composable functions only. So let's create our own composable function this time.

 So at the bottom of the file, I have added a composable function with the card. This card behaves similar to the card view in xml. We have specified a height of width to the card, given a shape, elevation, and background color to the card as well in the card. I would like to show an image now.

 So to show an image and compose, we have the image composable, which takes in a painter object. Now, Painter object is just a simple object that contains reference to the drawable that we would like to add in this image.

Along with that, we have a modifier and content scale to the image as well. Content scale, property of crop. Would crop the image to fit in the image view. I think you already might be aware of this property content scale because this is the same property we used to use in the XML image views, but now we would like to add text over the image, so let's quickly do that as well.

 Here. As you can see, I have wraped the text in a box component. You can think of box component as a frame layout. In xml, it behaves the same way, so it'll stack everything on top of it as the views keep getting added. Adding the text view inside of a box allows me to position the text anywhere.

I want inside the image. Since you see that the box will take up as much height and width as the image, because I have used the fill max size property to the box's modifier. So for the text, I am using the bottom start alignment to position the text to you at the bottom start. Now let's call the function from set content.

 So you can see that we have now placed our image card onto the screen. Now I already have a dog image inside of the drawable folder adding here. If you notice, I have also changed the horizontal alignment of the column to start and also remove the vertical arrangement and added some padding.

So here you can see that I am no longer having the horizontal alignment since the default alignment for the column is at start and neither I am having the vertical arrangement since the default vertical arrangement for the column is at the top.

Also, I have added a padding of 12 DP

 And finally, if you see that, to reference the dog's drivable image, I have used the painter resource object. The painter resource object basically returns the bitmap from the drivable item. Now the benefit of making a composable function is that the function now behaves as an independent component, and we can add as many of them as we like.

We just need to give the resource ID and the text to be printed.

 Cool. So now that we have added the images, let us actually take this a step further and make another enhancement. So currently I have placed the image cards, but let's make a common UI design So let's add the image cards in a.

 So here you can see that I have added two rows, first beneath the first text view and the second beneath the second text view. Also for the row. If you notice, I have given a fill max width and rap content height property to the modifier. This basically behaves as providing the match parent for width and rap content for height when talking in XML terms.

So the row will take up the entire width of the parent, but would be as high as its children are.

 By the way, I have added some padding to the image cards so that they can have a little separation from one another.

 So now you must have seen such a UI in many of the apps, but currently in our case, the list is not scrollable. We are not able to scroll the elements, and the last element is all squished and not properly aligned. So you see here that this element is not properly aligned and it is all squished up. So jetpack compose provides.

Two ways to our disposal for such cases. First use case is pretty simple. We just simply add a scroll modifier to the row.

 Now here we have passed the horizontal scroll property to both the rows, which in turn takes in a state. So we have passed the remember scroll state to that. Now, if you do not know about states, don't worry. We'll be learning all about states in our next video.

I'll also have a link in the description box below to that video where you will be able to learn all about states and jet pack compos and how do we work it.

So you can ignore that just for now and know that we can use the horizontal scroll. So as you can see that we are now able to scroll the items. Similarly, we also have the vertical scroll for the cases when we would want to have a vertical scrolling behavior. Now, this is quite similar to placing a linear layout in a scroll view when comparing it with XML terms, but in xml, did we use to have such layouts in that way?

No. Right. Whenever we wanted to have such UI patterns, we used to have the recycler view. So compose provides us the composable with the same behavior. Those are called the lazy components. Now, instead of Rowe, we have the lazy rope, so let's change.

 So here you can see that I have changed the first row to a lazy row now. Now the lazy components behave exactly as the recycler view. They are based on the same principles. So lazy row can be considered similar to the recycler view with horizontal. Linear layout manager and lazy column can be considered similar to the recycler view with vertical linear layout manager.

So you see that this time also we are currently able to scroll the items.

Now along that it's a good practice to pass in unique keys to the elements in a list so that lazy components could uniquely identify each element.

  So if you notice I have used item to wrap a composable. That is because lazy rose cannot hold the composable directly. The need an item with the lazy list scope.

So that's why we wraped the list items with the item composable.

 Hey guys, just a quick pause here just while I tell you that if you're interested in learning about the scopes in detail and how do we create our own scope compostables, then do check out my chorus. The link will be in the description box down below now back to the video.

 So coming back to the video, we didn't only had the use case for linear layout manager and recycle use. Oftentimes, we had to place the items in a grid format, so similar to lazy rows and lazy columns. We also have something called the lazy vertical and lazy horizontal grids. Thus we can consider them similar to the recycler view with the grid manager layout.

 So here you can see that I have already added a list of images. So let's add grids to our project.

 So here you can see that I have added a lazy vertical grid. Now, before we move on, you may be wondering that there are both horizontal and vertical grids. So why do you think we need the vertical and horizontal grids separately? Well, the answer is that in vertical grids, the items are laid column by column. Whereas in horizontal grids, the items are laid row by row. Now coming back to our grid. So you see that our grid takes in a cell property. This determines how the grid cells are to be laid out. There are two ways of doing so. One is the adaptive grid cell and other one is the fixed grid cell. So let's start by using the adaptive grid cell first. Notice we are giving a minimum size to the adaptive grid cell.

That means it'll take in that value and fit as many grid cells as it can, and no cell can be less than 80 dp. So first, let's use this in our app.

 So you can see that I have removed everything and I'm now only calling the show lazy vertical grid function. So you see that we have placed our grids now, if we increase the size of the grid cells to be a hundred dp.

 We'll see that the grid changes to three columns as opposed to four columns previously. Similarly, if we changed this to the fixed grid cells,

 We'll see that it'll show only the amount of cells that were fixed. Irrespective of there size, it'll try to fit in all the contents in the fixed number of the cells itself.

Other than that, you'll see that we are just passing the regular arguments to the composable that are the Modi, the horizontal and the vertical arrangements, and finally the items that we need to place. By the way, if you are wondering that, why is that there are only arrangements and no alignments?

Well, that is because in the case of grid, there is no main axis. Grids can go in both directions. Thus there cannot be a main axis for the grid. Also for the arrangements, we have specified the spaced by property. That means all the elements inside the grid will be spaced by 10 dp.

  So let's keep the video until this point. Thank you so much for watching the video and for your time. We'll be meeting very soon with another video. Until then, keep contributing Code to humanity.