‫Hello my friends, and welcome back.
‫In this video we're going to create the layouts of our project.
‫I created this empty project called Volume Calculator App and inside the layout folder, I'll create
‫a custom layout that serves as a template for our items in the Grid View Layout resource file, name
‫it as Grid Item Layout.
‫Click okay.
‫This is a layout that will serve as a template for every item in the grid view.
‫I'll change the width to Wrapcontent and the height to wrap content.
‫Then I need to create two views one of type image view and one of type text view.
‫Top to top parent.
‫And you can see this is our image view.
‫It's constrained to the left and to the top.
‫Also I need to constrain to the right.
‫So I'll add end to end of parent.
‫So you can see this is the new constraint added I need to add margin to the right.
‫So margin right equals to 16 dpi.
‫And here we go.
‫Then I need to add a text view.
‫So text view wrap content wrap content ID and the other attributes.
‫And here we go.
‫This is our layout.
‫This is the image view.
‫And this is the title image view.
‫And the title okay.
‫This is the template for every item in the grid view.
‫Now let's move to the main activity XML file.
‫And here we need to add the grid view.
‫I'll remove the constraints of this text view by clicking on control and hovering the mouse to here.
‫Or you can simply remove this line bottom to bottom of parent.
‫Remove it and you can see the text is shifted up.
‫Okay, I added the 16 dpi and I will change the text to volume calculator app size 38 and the text style
‫would be bold.
‫I'll give it a name, ID title and under this text view I will create the grid view.
‫I want from you to focus with me, because I'm going to introduce a new view group in Android.
‫Here I will start with the grid view zero dpi, zero dpi.
‫This will match the constraints.
‫So ID grid view by dragging and dropping.
‫Also you can use like this.
‫Margin top 24 dpi and I will add the constraints here.
‫And you can see it's constrained to the left and right and below, and it's constrained below the text
‫or the title.
‫This is our grid view.
‫But what is grid view in Android?
‫Grid view is a view group that displays items in a two dimensional scrolling grid.
‫It's often used to present data in a tabular form, or to display images and other items in a grid layout.
‫Each item in the grid view is represented by a view object, and the grid can be scrolled both vertically
‫and horizontally.
‫You can add attributes such as number of columns.
‫This will specify the number of columns in the grid.
‫I will set it to two, so there are two columns in the grid and you can see it.
‫It formatted the shape in order to fill two columns.
‫Also you can specify the column width which will specify the width of each column.
‫Moreover, you can use the gravity to set the gravity of the entire grid.
‫You can set it to center, start, left, right, and so on.
‫So this is our grid view.
‫This is how we create a grid views in Android.
‫Now let's populate this template, this custom layout into each item of this grid view.