(upbeat music)
(tapping keyboard)
In the last video we finished up the parsing of
the XML feed and created a list of feed entry objects
with the data we want in the correct fields.
Now we need to present that information
in useful way on the device screen.
Now obviously, it wouldn't be very efficient to create
a TextView for each record to display the information
because we'd have to add more TextView widgets
to the layout if we wanted to display
the results of the top 25 feet for example.
So, what we need is some form of widget that can accommodate
as many records as necessary with out us
having to worry about how many there are.
Now, such a widget would need some sort of data source that
it could get its records from and if it's going to be able
to display any kind of data, then the data source
must appear in a standard form regardless
of the data that it contains.
Now, fortunately both the widget and a standard way
of presenting data have been created for us and included in
the android framework and the way I'm going to do here
you can see I'm gonna need these errors, I updated to
the latest emulator today and I've been getting errors
for that for some reason so I'm going to just close
the emulator down 'cause we don't need it right now.
I'm assuming it's some sort of bug
with this latest release by Android.
So, I'm just going to close it down
to avoid those issues for now.
All right, so as I mentioned both the widget
and a standard way of presenting data have been created
for us and included in the android framework.
Now, the widget is called a ListView
and its job is to display views in a list.
Now, we're gonna worry about where those views come from
in a minute, what we're interested in is that the ListView
will display as many views as will fit on the screen,
as the screen scrolled it adds more views
to the bottom or top if you're scrolling down,
so that the screens always full.
Now, these views can contain more than one widget
so, you could have a Textview and an image view widget
to display the photo in a description for example.
Now, I'm throwing the word view around a lot here,
so, I'd better clarify what exactly a view is in Android.
So, I'm gonna just open up a browser because whenever
I wanna know what something means in the world
of Android, my first protocol is Google's documentation.
So, let's see what google have to say about views.
So, the reference documentation is here we're gonna paste
the link in and this page is very informative
and you can see that the first paragraph,
defines the view as a view can occupies a rectangular area
on the screen and is responsible
for drawing and event handling.
That's possibly with the least informative sentence
on the paragraph, the rest is actually quite useful.
So, this class represents the basic building block
for user interface components.
So, think about that carefully because of the implication
is that everything we see on the screen is a view.
Now, that's not strictly true because of you has a canvas on
which you can draw lines and other objects but for
the layouts we're dealing with everything is a view
and that includes our layouts they are also views.
Now as the documentation states, layouts are based
on the view group class which is a subset of view.
So, if a view group is a view and a layout is
a view group then a layout is also a view.
Now, if we give our layouts an ID, then we can use
to find peoples ID to get a reference to them.
We can hide them just like any other view,
we can also respond to taps on them just like we've done
with buttons and if we can respond to taps on a button
which is a view then we can also respond to taps
on the layout because that's also a view.
Now, the reason that I've mentioned all this here,
is I'm gonna be talking about views but it's important
to bear in mind that a view can contain other views.
Now, when we talk about a ListView displaying views,
remember that those views don't have to just
be simple widgets such as a TextView.
The views that a ListView displays
can be quite complex layouts.
In fact, they often are, our first one
won't be it'll just be a text view but
we're gonna expand on that in a later video.
So, remember that as we discussed the ListView.
And remember also that views can be complex layouts,
containing other views and even other layouts.
All right, so moving on, with Android lollipop,
Google released the recycler view widget
which is intended as a more efficient replacement
for the Listview when displaying large data sets.
Now, that doesn't mean that the ListView is now redundant
though and very often it doesn't make sense to struggle
with the additional complexity of the recycle of view.
All right, so as you can see on the screen there
we've got a picture here of the ListView recycling views
on a concept of olicity RecyclingViews,
also the name RecyclerView that implies that
the newer widget Recycles views, so that the system
doesn't have to create thousands of views to display,
thousands of records, now that's true
but therefore gives the impression that the ListView
doesn't re-use its values and that's not true and
the ListView will reuse views that scroll off the screen.
Now, creating views is very expensive in terms
of computer time and they also consume a fair bit
of memory each view will need at least about 1kb of RAM,
so you can see that creating thousands of them
will rapidly eat up the device's memory.
Now, when the list scrolled views ever moved off
the screen can be re-used for the new data that will
be displayed as the ListView Scrolls, so in this slide
the ListView is scrolled up and when
the view holding item one moves off the top
of the screen, its re-used to display the data
for item nine at the bottom of the screen.
Now, the ListView keeps all the views that scroll off
the screen and reuses them whenever it needs a new view,
you know I said them there because a new view coming
at the bottom may have a greater height
than the views at the top of the screen,
so it could display several views at once.
Now, there's a lot of optimization going on inside
the ListView widget and it is an efficient way
to display lots of information.
So, that's the widget that we're gonna be using
to display a list of records but to what about
the mechanism for getting the records into the list.
So, to make the ListView work we have to put
an adapter between the data and the ListView.
Now, whenever the ListView needs to display more data
it asks the adapter for a view that it can display,
now the adapter takes care of putting the values
of the data into the correct widgets in the view
and then returns the view to the ListView for displaying.
Now, the reason for the arrow going back from
the ListView to the adapter is that the ListView
will provide the adapter with a view if it has one
that's gone off the screen which is how
the system re-uses views rather
than creating a new one each time.
Now, obviously a new views will be created until the screen
is full but after that they'll be reused wherever possible.
Now, if the adapter receives a view from the ListView
it'll actually replace any data in it with the data
for the current record then send it back
to the ListView so that it can be displayed.
Now, the data source could be a cursor from a database
for example or an ArrayList which is what we've passed
our data into, so that's pretty handy.
So, we're going to create our own adapter later
but for now we can use the basic ArrayAdapter
that's part of the android framework.
Now, an ArrayAdapter is very basic and can only
put data into a single text view widget,
you also have very little control over how
the data's presented the ArrayAdapter just uses
the objects toString method and puts
the returned string into the textview.
So, you can probably see why we created
our own toString method in the application class now.
All right and the Google documentation for the ArrayAdapter,
I'm just going to load that up on the screen
and you can see it on the page there now,
a handy a page to reference to find out
more about the ArrayAdapter, all right.
So, let's go back to Android studio and start looking
at the layouts we need to see the ListView working.
Now, we're going to start by modifying
the activity underscore main layout and you can see
that I've got that opened and on-screen, so we need
to delete the TextView that Android studio added
for us and replace it with the ListView widget.
So, let's first delete the TextView default one
by selecting it and clicking or pressing the del button,
in this I mention we want to replace it with
a ListView widget and that's in the section over here
and a pallet under all, well actually I can get
at point find it down here under containers is usually
the quickest way of getting access to it and you can see
the ListView there, so what I'm going to do is
just drag that over and release
and then what I'm gonna do is constrain each edge
to the corresponding edge of the layout
and then change both the width and the height
to match constraint, so let's go ahead and do that.
So, I'm just adding constraints to
all four corners of the layout
and as I mentioned we're going to change the layout width
to match constraint and same for
the layout height and then we weren't
a lot of space here because the ListView
is almost filling the layout.
Now, we don't want it centred vertically
on the screen though what it should do is start
at the top, so I'm gonna drag the slider,
right up to the top, this one up here,
finally, what I'm gonna do is I'm gonna change
the ID to XML ListView and that's because
we need an ID because we're going to have to refer to
this ListView in our code, so XML ListView.
Now, notice on the design that it's appearing
as a list of items with a vertical scroll bar
just to see it expect a ListView to appear
when we hook it up to an adapter,
we'll get real information showing but in
the layout designer it just uses item one,
item two et cetera just to represent what it does.
So, that's actually all we need to do with this layout
the ListView is going to fill the screen
and we'll take care of all the display for us
and I'm gonna reformat the XML to keep it tidy
so let's go ahead and do that, so generally
we finally know that Android was doing a good job
with that Android studio, a reformat code,
you can see that was pop formatted and
we're actually done we can close activity main now.
So, the next thing we need to create, isn't really
a layout, it's just going to be textview,
stored in an XML layout file, so I'm gonna open
the project pane and I'm gonna open the res folder
and I'm gonna open the layout folder
and what I'm going to do is right-click the layout folder
and choose new layout resource file.
Now, the phone name will be used to find
the layout resources in our code and I'm gonna call
this one List underscore item,
that's because it'll be used to display
each item in the list.
Now, there's no need to provide
the excel extension because the Android studio
will do it for us if we leave it off.
Now, when you create layouts the root element
is usually a layer of some sort such as
a constraint layer like we've been using.
Now, we don't actually want to lay out here
we just want to TextView.
So, I'm gonna come over to the root element
and just type in TextView.
(tapping keyboard)
Until I can select it and you saw a list
of matching elements as I was typing,
you can I could literally just type T
and then selected from the list.
All right, so Androids quite happy for us to use
a simple widget in place of the layouts
and that fits in with what we saw earlier
that everything's a View.
All right, so there's nothing else to change
so, you can click on okay
and we're going to close the project pane for now then
to give a bit more space,
now we're done here, there's nothing else
that needs adding or changing for this View to work
with the adapter, it doesn't even need an ID
because the adapter will be inflating it from the XML
whenever it needs to create a new one,
we may want to use it in our own adaptor though
so, for that reason I'm gonna give it an ID,
so, I'm just going to click on making sure
the component tree, the TextView is selected
and under ID I'm gonna type in app.
(tapping keyboard)
TextView, press into there just to save it
and at the moment its width and height
are both set to match parent, so that
it'll actually feel whatever space
the ListView displays it in
and that's fine but what I will do is change the text size
to 18sp and they're gonna go back to
the text tab and just to a code reformat
which was okay, go back to the display tab
and you can see in there now, that
this layout really is just a text to you there's nothing
in here except our TextView at the top.
All right, so we can go back to the design
and what I can now do is close
this List under score item
and we can start writing the code to create an adaptor
then set our ListView to use it.
So, that the changes to the code are very simple
and we'll see those in the next video.