Welcome back.
In this video, we'll create our project and design our layouts.
Open Android Studio, Select new project, Empty Views Activity next, and I name it as volume area
app finish.
Let's go to the main activity dot XML file.
Go to split mode.
Remove this text view and create a grid view.
A grid view is a UI widget that displays a collection of items in a two dimensional grid format, much
like a grid or table.
Each item is represented as a cell within the grid and you can use a grid view to create various types
of interfaces such as image galleries, product listing, and of course to create a custom grid view.
We need four things the grid view, which is the adapter view, the adapter, which is the bridge between
the adapter view and the data source, the item layout, which represents each item in the grid view
and the data source, which is a collection of items that you want to display in the grid view.
We'll follow step by step what we learned before match Parent Match Parent and I'll give it an ID.
Grid click on it, infer constraints.
And here we go.
This is our first step.
The second step is to create our custom layout for the grid view items.
So each item in the grid view is represented by a layout which defines the visual appearance of the
item.
I'll create it.
New layout file grid underscore item underscore layout click enter.
Go split mode.
This layout is inflated for each item in the adapter.
The item layout typically contains one or more UI elements like images, texts, buttons and etcetera.
In our case, we need to create one image view and one text view.
I'll start defining an image view with 120 dpi and the height is 120.
I'll infer the constraints and give it padding 16 from the start and the top.
Then I'll go down, create a text view.
And I'll drag and drop it below the image.
I'll infer the constraints this text under this image view and center it under this image view, you
can see this is the image view and this is the text one.
I'll change the layout width and the height of the constraint layout from matchparent to wrap content.
And this is our custom grid item layout.