WEBVTT

00:00.380 --> 00:01.400
Welcome back.

00:01.400 --> 00:05.660
In this video, we'll create our project and design our layouts.

00:05.870 --> 00:15.140
Open Android Studio, Select new project, Empty Views Activity next, and I name it as volume area

00:15.230 --> 00:17.090
app finish.

00:18.320 --> 00:21.750
Let's go to the main activity dot XML file.

00:21.770 --> 00:23.370
Go to split mode.

00:23.390 --> 00:28.650
Remove this text view and create a grid view.

00:28.670 --> 00:37.100
A grid view is a UI widget that displays a collection of items in a two dimensional grid format, much

00:37.100 --> 00:38.760
like a grid or table.

00:38.780 --> 00:47.540
Each item is represented as a cell within the grid and you can use a grid view to create various types

00:47.540 --> 00:54.470
of interfaces such as image galleries, product listing, and of course to create a custom grid view.

00:54.500 --> 01:01.400
We need four things the grid view, which is the adapter view, the adapter, which is the bridge between

01:01.400 --> 01:08.990
the adapter view and the data source, the item layout, which represents each item in the grid view

01:08.990 --> 01:14.000
and the data source, which is a collection of items that you want to display in the grid view.

01:14.030 --> 01:21.810
We'll follow step by step what we learned before match Parent Match Parent and I'll give it an ID.

01:21.930 --> 01:24.810
Grid click on it, infer constraints.

01:24.810 --> 01:26.040
And here we go.

01:26.070 --> 01:27.750
This is our first step.

01:27.750 --> 01:33.750
The second step is to create our custom layout for the grid view items.

01:33.750 --> 01:40.470
So each item in the grid view is represented by a layout which defines the visual appearance of the

01:40.470 --> 01:40.770
item.

01:41.340 --> 01:42.720
I'll create it.

01:43.020 --> 01:49.920
New layout file grid underscore item underscore layout click enter.

01:49.950 --> 01:51.220
Go split mode.

01:51.240 --> 01:55.860
This layout is inflated for each item in the adapter.

01:55.890 --> 02:04.230
The item layout typically contains one or more UI elements like images, texts, buttons and etcetera.

02:04.230 --> 02:09.000
In our case, we need to create one image view and one text view.

02:09.030 --> 02:15.510
I'll start defining an image view with 120 dpi and the height is 120.

02:15.540 --> 02:21.890
I'll infer the constraints and give it padding 16 from the start and the top.

02:21.900 --> 02:25.710
Then I'll go down, create a text view.

02:33.310 --> 02:36.600
And I'll drag and drop it below the image.

02:36.610 --> 02:45.520
I'll infer the constraints this text under this image view and center it under this image view, you

02:45.520 --> 02:48.450
can see this is the image view and this is the text one.

02:48.460 --> 02:56.440
I'll change the layout width and the height of the constraint layout from matchparent to wrap content.

02:57.580 --> 03:01.540
And this is our custom grid item layout.