1
00:00:00,310 --> 00:00:02,618
(upbeat music)

2
00:00:02,618 --> 00:00:05,450
(tapping keyboard)

3
00:00:05,450 --> 00:00:07,880
In the last video we finished up the parsing of

4
00:00:07,880 --> 00:00:11,870
the XML feed and created a list of feed entry objects

5
00:00:11,870 --> 00:00:14,690
with the data we want in the correct fields.

6
00:00:14,690 --> 00:00:16,290
Now we need to present that information

7
00:00:16,290 --> 00:00:19,000
in useful way on the device screen.

8
00:00:19,000 --> 00:00:21,820
Now obviously, it wouldn't be very efficient to create

9
00:00:21,820 --> 00:00:24,760
a TextView for each record to display the information

10
00:00:24,760 --> 00:00:26,950
because we'd have to add more TextView widgets

11
00:00:26,950 --> 00:00:29,080
to the layout if we wanted to display

12
00:00:29,080 --> 00:00:32,270
the results of the top 25 feet for example.

13
00:00:32,270 --> 00:00:35,340
So, what we need is some form of widget that can accommodate

14
00:00:35,340 --> 00:00:37,930
as many records as necessary with out us

15
00:00:37,930 --> 00:00:40,390
having to worry about how many there are.

16
00:00:40,390 --> 00:00:43,830
Now, such a widget would need some sort of data source that

17
00:00:43,830 --> 00:00:46,800
it could get its records from and if it's going to be able

18
00:00:46,800 --> 00:00:49,910
to display any kind of data, then the data source

19
00:00:49,910 --> 00:00:52,800
must appear in a standard form regardless

20
00:00:52,800 --> 00:00:55,450
of the data that it contains.

21
00:00:55,450 --> 00:00:58,420
Now, fortunately both the widget and a standard way

22
00:00:58,420 --> 00:01:02,330
of presenting data have been created for us and included in

23
00:01:02,330 --> 00:01:05,420
the android framework and the way I'm going to do here

24
00:01:05,420 --> 00:01:07,830
you can see I'm gonna need these errors, I updated to

25
00:01:07,830 --> 00:01:10,810
the latest emulator today and I've been getting errors

26
00:01:10,810 --> 00:01:12,450
for that for some reason so I'm going to just close

27
00:01:12,450 --> 00:01:15,200
the emulator down 'cause we don't need it right now.

28
00:01:15,200 --> 00:01:16,870
I'm assuming it's some sort of bug

29
00:01:16,870 --> 00:01:20,040
with this latest release by Android.

30
00:01:20,040 --> 00:01:21,240
So, I'm just going to close it down

31
00:01:21,240 --> 00:01:23,570
to avoid those issues for now.

32
00:01:23,570 --> 00:01:25,700
All right, so as I mentioned both the widget

33
00:01:25,700 --> 00:01:28,400
and a standard way of presenting data have been created

34
00:01:28,400 --> 00:01:31,233
for us and included in the android framework.

35
00:01:32,250 --> 00:01:34,200
Now, the widget is called a ListView

36
00:01:34,200 --> 00:01:37,720
and its job is to display views in a list.

37
00:01:37,720 --> 00:01:39,950
Now, we're gonna worry about where those views come from

38
00:01:39,950 --> 00:01:43,120
in a minute, what we're interested in is that the ListView

39
00:01:43,120 --> 00:01:46,940
will display as many views as will fit on the screen,

40
00:01:46,940 --> 00:01:49,520
as the screen scrolled it adds more views

41
00:01:49,520 --> 00:01:52,060
to the bottom or top if you're scrolling down,

42
00:01:52,060 --> 00:01:54,630
so that the screens always full.

43
00:01:54,630 --> 00:01:57,460
Now, these views can contain more than one widget

44
00:01:57,460 --> 00:02:00,440
so, you could have a Textview and an image view widget

45
00:02:00,440 --> 00:02:03,320
to display the photo in a description for example.

46
00:02:03,320 --> 00:02:06,660
Now, I'm throwing the word view around a lot here,

47
00:02:06,660 --> 00:02:10,750
so, I'd better clarify what exactly a view is in Android.

48
00:02:10,750 --> 00:02:12,900
So, I'm gonna just open up a browser because whenever

49
00:02:12,900 --> 00:02:14,810
I wanna know what something means in the world

50
00:02:14,810 --> 00:02:19,000
of Android, my first protocol is Google's documentation.

51
00:02:19,000 --> 00:02:21,990
So, let's see what google have to say about views.

52
00:02:21,990 --> 00:02:25,660
So, the reference documentation is here we're gonna paste

53
00:02:25,660 --> 00:02:30,230
the link in and this page is very informative

54
00:02:32,010 --> 00:02:34,380
and you can see that the first paragraph,

55
00:02:34,380 --> 00:02:38,280
defines the view as a view can occupies a rectangular area

56
00:02:38,280 --> 00:02:40,330
on the screen and is responsible

57
00:02:40,330 --> 00:02:42,670
for drawing and event handling.

58
00:02:42,670 --> 00:02:44,850
That's possibly with the least informative sentence

59
00:02:44,850 --> 00:02:48,400
on the paragraph, the rest is actually quite useful.

60
00:02:48,400 --> 00:02:51,310
So, this class represents the basic building block

61
00:02:51,310 --> 00:02:53,640
for user interface components.

62
00:02:53,640 --> 00:02:56,480
So, think about that carefully because of the implication

63
00:02:56,480 --> 00:03:00,350
is that everything we see on the screen is a view.

64
00:03:00,350 --> 00:03:04,218
Now, that's not strictly true because of you has a canvas on

65
00:03:04,218 --> 00:03:07,210
which you can draw lines and other objects but for

66
00:03:07,210 --> 00:03:10,090
the layouts we're dealing with everything is a view

67
00:03:10,090 --> 00:03:14,390
and that includes our layouts they are also views.

68
00:03:14,390 --> 00:03:17,710
Now as the documentation states, layouts are based

69
00:03:17,710 --> 00:03:21,720
on the view group class which is a subset of view.

70
00:03:21,720 --> 00:03:24,730
So, if a view group is a view and a layout is

71
00:03:24,730 --> 00:03:28,470
a view group then a layout is also a view.

72
00:03:28,470 --> 00:03:31,360
Now, if we give our layouts an ID, then we can use

73
00:03:31,360 --> 00:03:34,280
to find peoples ID to get a reference to them.

74
00:03:34,280 --> 00:03:36,530
We can hide them just like any other view,

75
00:03:36,530 --> 00:03:39,160
we can also respond to taps on them just like we've done

76
00:03:39,160 --> 00:03:42,690
with buttons and if we can respond to taps on a button

77
00:03:42,690 --> 00:03:45,640
which is a view then we can also respond to taps

78
00:03:45,640 --> 00:03:47,863
on the layout because that's also a view.

79
00:03:48,720 --> 00:03:51,060
Now, the reason that I've mentioned all this here,

80
00:03:51,060 --> 00:03:54,510
is I'm gonna be talking about views but it's important

81
00:03:54,510 --> 00:03:58,410
to bear in mind that a view can contain other views.

82
00:03:58,410 --> 00:04:01,230
Now, when we talk about a ListView displaying views,

83
00:04:01,230 --> 00:04:03,220
remember that those views don't have to just

84
00:04:03,220 --> 00:04:06,074
be simple widgets such as a TextView.

85
00:04:06,074 --> 00:04:07,550
The views that a ListView displays

86
00:04:07,550 --> 00:04:09,510
can be quite complex layouts.

87
00:04:09,510 --> 00:04:11,840
In fact, they often are, our first one

88
00:04:11,840 --> 00:04:13,820
won't be it'll just be a text view but

89
00:04:13,820 --> 00:04:16,730
we're gonna expand on that in a later video.

90
00:04:16,730 --> 00:04:19,370
So, remember that as we discussed the ListView.

91
00:04:19,370 --> 00:04:22,400
And remember also that views can be complex layouts,

92
00:04:22,400 --> 00:04:25,550
containing other views and even other layouts.

93
00:04:25,550 --> 00:04:28,900
All right, so moving on, with Android lollipop,

94
00:04:28,900 --> 00:04:31,730
Google released the recycler view widget

95
00:04:31,730 --> 00:04:34,330
which is intended as a more efficient replacement

96
00:04:34,330 --> 00:04:37,920
for the Listview when displaying large data sets.

97
00:04:37,920 --> 00:04:40,070
Now, that doesn't mean that the ListView is now redundant

98
00:04:40,070 --> 00:04:43,070
though and very often it doesn't make sense to struggle

99
00:04:43,070 --> 00:04:46,143
with the additional complexity of the recycle of view.

100
00:04:47,460 --> 00:04:49,560
All right, so as you can see on the screen there

101
00:04:49,560 --> 00:04:52,840
we've got a picture here of the ListView recycling views

102
00:04:52,840 --> 00:04:56,300
on a concept of olicity RecyclingViews,

103
00:04:56,300 --> 00:04:59,190
also the name RecyclerView that implies that

104
00:04:59,190 --> 00:05:02,870
the newer widget Recycles views, so that the system

105
00:05:02,870 --> 00:05:05,940
doesn't have to create thousands of views to display,

106
00:05:05,940 --> 00:05:08,560
thousands of records, now that's true

107
00:05:08,560 --> 00:05:10,630
but therefore gives the impression that the ListView

108
00:05:10,630 --> 00:05:13,630
doesn't re-use its values and that's not true and

109
00:05:13,630 --> 00:05:17,810
the ListView will reuse views that scroll off the screen.

110
00:05:17,810 --> 00:05:21,170
Now, creating views is very expensive in terms

111
00:05:21,170 --> 00:05:24,300
of computer time and they also consume a fair bit

112
00:05:24,300 --> 00:05:27,510
of memory each view will need at least about 1kb of RAM,

113
00:05:27,510 --> 00:05:29,870
so you can see that creating thousands of them

114
00:05:29,870 --> 00:05:32,560
will rapidly eat up the device's memory.

115
00:05:32,560 --> 00:05:35,680
Now, when the list scrolled views ever moved off

116
00:05:35,680 --> 00:05:39,750
the screen can be re-used for the new data that will

117
00:05:39,750 --> 00:05:42,700
be displayed as the ListView Scrolls, so in this slide

118
00:05:42,700 --> 00:05:44,510
the ListView is scrolled up and when

119
00:05:44,510 --> 00:05:46,480
the view holding item one moves off the top

120
00:05:46,480 --> 00:05:49,810
of the screen, its re-used to display the data

121
00:05:49,810 --> 00:05:52,700
for item nine at the bottom of the screen.

122
00:05:52,700 --> 00:05:54,970
Now, the ListView keeps all the views that scroll off

123
00:05:54,970 --> 00:05:59,080
the screen and reuses them whenever it needs a new view,

124
00:05:59,080 --> 00:06:01,630
you know I said them there because a new view coming

125
00:06:01,630 --> 00:06:03,860
at the bottom may have a greater height

126
00:06:03,860 --> 00:06:05,690
than the views at the top of the screen,

127
00:06:05,690 --> 00:06:08,830
so it could display several views at once.

128
00:06:08,830 --> 00:06:11,110
Now, there's a lot of optimization going on inside

129
00:06:11,110 --> 00:06:13,710
the ListView widget and it is an efficient way

130
00:06:13,710 --> 00:06:15,900
to display lots of information.

131
00:06:15,900 --> 00:06:17,800
So, that's the widget that we're gonna be using

132
00:06:17,800 --> 00:06:21,090
to display a list of records but to what about

133
00:06:21,090 --> 00:06:24,083
the mechanism for getting the records into the list.

134
00:06:25,230 --> 00:06:27,070
So, to make the ListView work we have to put

135
00:06:27,070 --> 00:06:30,980
an adapter between the data and the ListView.

136
00:06:30,980 --> 00:06:33,870
Now, whenever the ListView needs to display more data

137
00:06:33,870 --> 00:06:37,400
it asks the adapter for a view that it can display,

138
00:06:37,400 --> 00:06:39,680
now the adapter takes care of putting the values

139
00:06:39,680 --> 00:06:42,800
of the data into the correct widgets in the view

140
00:06:42,800 --> 00:06:46,450
and then returns the view to the ListView for displaying.

141
00:06:46,450 --> 00:06:48,580
Now, the reason for the arrow going back from

142
00:06:48,580 --> 00:06:51,260
the ListView to the adapter is that the ListView

143
00:06:51,260 --> 00:06:54,380
will provide the adapter with a view if it has one

144
00:06:54,380 --> 00:06:56,750
that's gone off the screen which is how

145
00:06:56,750 --> 00:06:59,090
the system re-uses views rather

146
00:06:59,090 --> 00:07:00,973
than creating a new one each time.

147
00:07:01,900 --> 00:07:04,460
Now, obviously a new views will be created until the screen

148
00:07:04,460 --> 00:07:09,160
is full but after that they'll be reused wherever possible.

149
00:07:09,160 --> 00:07:12,480
Now, if the adapter receives a view from the ListView

150
00:07:12,480 --> 00:07:15,230
it'll actually replace any data in it with the data

151
00:07:15,230 --> 00:07:17,250
for the current record then send it back

152
00:07:17,250 --> 00:07:19,960
to the ListView so that it can be displayed.

153
00:07:19,960 --> 00:07:22,270
Now, the data source could be a cursor from a database

154
00:07:22,270 --> 00:07:25,600
for example or an ArrayList which is what we've passed

155
00:07:25,600 --> 00:07:28,580
our data into, so that's pretty handy.

156
00:07:28,580 --> 00:07:31,140
So, we're going to create our own adapter later

157
00:07:31,140 --> 00:07:33,960
but for now we can use the basic ArrayAdapter

158
00:07:33,960 --> 00:07:35,810
that's part of the android framework.

159
00:07:36,690 --> 00:07:39,450
Now, an ArrayAdapter is very basic and can only

160
00:07:39,450 --> 00:07:42,320
put data into a single text view widget,

161
00:07:42,320 --> 00:07:44,510
you also have very little control over how

162
00:07:44,510 --> 00:07:47,430
the data's presented the ArrayAdapter just uses

163
00:07:47,430 --> 00:07:49,590
the objects toString method and puts

164
00:07:49,590 --> 00:07:52,270
the returned string into the textview.

165
00:07:52,270 --> 00:07:54,330
So, you can probably see why we created

166
00:07:54,330 --> 00:07:58,023
our own toString method in the application class now.

167
00:07:59,820 --> 00:08:02,980
All right and the Google documentation for the ArrayAdapter,

168
00:08:02,980 --> 00:08:04,910
I'm just going to load that up on the screen

169
00:08:04,910 --> 00:08:07,280
and you can see it on the page there now,

170
00:08:07,280 --> 00:08:09,530
a handy a page to reference to find out

171
00:08:09,530 --> 00:08:11,320
more about the ArrayAdapter, all right.

172
00:08:11,320 --> 00:08:14,450
So, let's go back to Android studio and start looking

173
00:08:14,450 --> 00:08:17,203
at the layouts we need to see the ListView working.

174
00:08:19,110 --> 00:08:21,060
Now, we're going to start by modifying

175
00:08:21,060 --> 00:08:23,330
the activity underscore main layout and you can see

176
00:08:23,330 --> 00:08:26,130
that I've got that opened and on-screen, so we need

177
00:08:26,130 --> 00:08:29,070
to delete the TextView that Android studio added

178
00:08:29,070 --> 00:08:32,130
for us and replace it with the ListView widget.

179
00:08:32,130 --> 00:08:35,945
So, let's first delete the TextView default one

180
00:08:35,945 --> 00:08:39,510
by selecting it and clicking or pressing the del button,

181
00:08:39,510 --> 00:08:41,169
in this I mention we want to replace it with

182
00:08:41,169 --> 00:08:44,039
a ListView widget and that's in the section over here

183
00:08:44,039 --> 00:08:46,320
and a pallet under all, well actually I can get

184
00:08:46,320 --> 00:08:48,690
at point find it down here under containers is usually

185
00:08:48,690 --> 00:08:50,830
the quickest way of getting access to it and you can see

186
00:08:50,830 --> 00:08:52,990
the ListView there, so what I'm going to do is

187
00:08:52,990 --> 00:08:56,040
just drag that over and release

188
00:08:57,100 --> 00:08:59,860
and then what I'm gonna do is constrain each edge

189
00:08:59,860 --> 00:09:02,010
to the corresponding edge of the layout

190
00:09:02,010 --> 00:09:03,730
and then change both the width and the height

191
00:09:03,730 --> 00:09:06,280
to match constraint, so let's go ahead and do that.

192
00:09:08,350 --> 00:09:09,860
So, I'm just adding constraints to

193
00:09:09,860 --> 00:09:12,030
all four corners of the layout

194
00:09:14,135 --> 00:09:16,410
and as I mentioned we're going to change the layout width

195
00:09:16,410 --> 00:09:18,840
to match constraint and same for

196
00:09:18,840 --> 00:09:22,090
the layout height and then we weren't

197
00:09:22,090 --> 00:09:23,860
a lot of space here because the ListView

198
00:09:23,860 --> 00:09:25,740
is almost filling the layout.

199
00:09:25,740 --> 00:09:27,640
Now, we don't want it centred vertically

200
00:09:27,640 --> 00:09:29,880
on the screen though what it should do is start

201
00:09:29,880 --> 00:09:32,770
at the top, so I'm gonna drag the slider,

202
00:09:32,770 --> 00:09:36,173
right up to the top, this one up here,

203
00:09:37,130 --> 00:09:39,250
finally, what I'm gonna do is I'm gonna change

204
00:09:39,250 --> 00:09:43,430
the ID to XML ListView and that's because

205
00:09:43,430 --> 00:09:45,820
we need an ID because we're going to have to refer to

206
00:09:45,820 --> 00:09:49,893
this ListView in our code, so XML ListView.

207
00:09:53,190 --> 00:09:55,100
Now, notice on the design that it's appearing

208
00:09:55,100 --> 00:09:58,810
as a list of items with a vertical scroll bar

209
00:09:58,810 --> 00:10:01,050
just to see it expect a ListView to appear

210
00:10:01,050 --> 00:10:02,910
when we hook it up to an adapter,

211
00:10:02,910 --> 00:10:05,050
we'll get real information showing but in

212
00:10:05,050 --> 00:10:07,210
the layout designer it just uses item one,

213
00:10:07,210 --> 00:10:10,700
item two et cetera just to represent what it does.

214
00:10:10,700 --> 00:10:13,490
So, that's actually all we need to do with this layout

215
00:10:13,490 --> 00:10:15,800
the ListView is going to fill the screen

216
00:10:15,800 --> 00:10:18,540
and we'll take care of all the display for us

217
00:10:18,540 --> 00:10:20,970
and I'm gonna reformat the XML to keep it tidy

218
00:10:20,970 --> 00:10:23,550
so let's go ahead and do that, so generally

219
00:10:23,550 --> 00:10:25,820
we finally know that Android was doing a good job

220
00:10:25,820 --> 00:10:28,263
with that Android studio, a reformat code,

221
00:10:29,480 --> 00:10:33,230
you can see that was pop formatted and

222
00:10:33,230 --> 00:10:37,030
we're actually done we can close activity main now.

223
00:10:37,030 --> 00:10:39,220
So, the next thing we need to create, isn't really

224
00:10:39,220 --> 00:10:41,750
a layout, it's just going to be textview,

225
00:10:41,750 --> 00:10:44,650
stored in an XML layout file, so I'm gonna open

226
00:10:44,650 --> 00:10:48,520
the project pane and I'm gonna open the res folder

227
00:10:48,520 --> 00:10:50,380
and I'm gonna open the layout folder

228
00:10:50,380 --> 00:10:53,560
and what I'm going to do is right-click the layout folder

229
00:10:53,560 --> 00:10:56,903
and choose new layout resource file.

230
00:10:58,330 --> 00:11:00,580
Now, the phone name will be used to find

231
00:11:00,580 --> 00:11:03,290
the layout resources in our code and I'm gonna call

232
00:11:03,290 --> 00:11:06,230
this one List underscore item,

233
00:11:06,230 --> 00:11:07,097
that's because it'll be used to display

234
00:11:07,097 --> 00:11:09,170
each item in the list.

235
00:11:09,170 --> 00:11:10,220
Now, there's no need to provide

236
00:11:10,220 --> 00:11:12,670
the excel extension because the Android studio

237
00:11:12,670 --> 00:11:15,000
will do it for us if we leave it off.

238
00:11:15,000 --> 00:11:17,890
Now, when you create layouts the root element

239
00:11:17,890 --> 00:11:20,140
is usually a layer of some sort such as

240
00:11:20,140 --> 00:11:22,550
a constraint layer like we've been using.

241
00:11:22,550 --> 00:11:24,720
Now, we don't actually want to lay out here

242
00:11:24,720 --> 00:11:26,380
we just want to TextView.

243
00:11:26,380 --> 00:11:28,410
So, I'm gonna come over to the root element

244
00:11:28,410 --> 00:11:30,076
and just type in TextView.

245
00:11:30,076 --> 00:11:31,710
(tapping keyboard)

246
00:11:31,710 --> 00:11:34,300
Until I can select it and you saw a list

247
00:11:34,300 --> 00:11:36,570
of matching elements as I was typing,

248
00:11:36,570 --> 00:11:38,330
you can I could literally just type T

249
00:11:38,330 --> 00:11:40,090
and then selected from the list.

250
00:11:40,090 --> 00:11:41,810
All right, so Androids quite happy for us to use

251
00:11:41,810 --> 00:11:43,870
a simple widget in place of the layouts

252
00:11:43,870 --> 00:11:45,930
and that fits in with what we saw earlier

253
00:11:45,930 --> 00:11:47,700
that everything's a View.

254
00:11:47,700 --> 00:11:49,160
All right, so there's nothing else to change

255
00:11:49,160 --> 00:11:50,410
so, you can click on okay

256
00:11:52,634 --> 00:11:55,120
and we're going to close the project pane for now then

257
00:11:55,120 --> 00:11:56,370
to give a bit more space,

258
00:11:57,210 --> 00:11:58,780
now we're done here, there's nothing else

259
00:11:58,780 --> 00:12:01,380
that needs adding or changing for this View to work

260
00:12:01,380 --> 00:12:04,060
with the adapter, it doesn't even need an ID

261
00:12:04,060 --> 00:12:07,060
because the adapter will be inflating it from the XML

262
00:12:07,060 --> 00:12:09,290
whenever it needs to create a new one,

263
00:12:09,290 --> 00:12:11,120
we may want to use it in our own adaptor though

264
00:12:11,120 --> 00:12:14,040
so, for that reason I'm gonna give it an ID,

265
00:12:14,040 --> 00:12:16,300
so, I'm just going to click on making sure

266
00:12:17,170 --> 00:12:20,690
the component tree, the TextView is selected

267
00:12:20,690 --> 00:12:23,143
and under ID I'm gonna type in app.

268
00:12:23,143 --> 00:12:23,976
(tapping keyboard)

269
00:12:23,976 --> 00:12:28,487
TextView, press into there just to save it

270
00:12:28,487 --> 00:12:31,320
and at the moment its width and height

271
00:12:31,320 --> 00:12:33,462
are both set to match parent, so that

272
00:12:33,462 --> 00:12:35,250
it'll actually feel whatever space

273
00:12:35,250 --> 00:12:37,130
the ListView displays it in

274
00:12:37,130 --> 00:12:40,030
and that's fine but what I will do is change the text size

275
00:12:40,920 --> 00:12:44,940
to 18sp and they're gonna go back to

276
00:12:44,940 --> 00:12:47,970
the text tab and just to a code reformat

277
00:12:49,860 --> 00:12:52,340
which was okay, go back to the display tab

278
00:12:54,120 --> 00:12:56,120
and you can see in there now, that

279
00:12:56,120 --> 00:12:58,620
this layout really is just a text to you there's nothing

280
00:12:58,620 --> 00:13:01,350
in here except our TextView at the top.

281
00:13:01,350 --> 00:13:03,630
All right, so we can go back to the design

282
00:13:03,630 --> 00:13:05,340
and what I can now do is close

283
00:13:05,340 --> 00:13:07,690
this List under score item

284
00:13:08,690 --> 00:13:11,630
and we can start writing the code to create an adaptor

285
00:13:11,630 --> 00:13:13,690
then set our ListView to use it.

286
00:13:13,690 --> 00:13:16,140
So, that the changes to the code are very simple

287
00:13:16,140 --> 00:13:18,040
and we'll see those in the next video.