So let's recap the major changes we just made to the app.
We changed from using a loop to populate a vertical linear layout,
to display a list of words,
to using a more efficient ListView + ArrayAdapter combination.
And then we built a list item layout that contains two TextViews.
So next we wanted to create a single list of objects that we could pass to
the ArrayAdapter.
So we created a custom work class that contains both the English and
Miwok translations for a single word.
Without we could have an ArrayList of word objects that we could pass to
an array adaptor.
Now let's navigate to the numbers activity.
Here we'll need to change our ArrayList of strings into an ArrayList of words.
So we need to update the generic type parameter, what's in between those
brackets and create an ArrayList where each element is a word object.
You might get two auto complete suggestions.
It is because the word class already exist in the Android framework
under a different package name.
So here, you'll see it's under UserDictionary.
So these are words that you can add to your auto complete dictionary say,
when you're messaging your friends.
So be sure to pick the correct option for the word class,
we want the ones in our package com.example.android.miwok.
So now we've updated our ArrayList to contain word objects instead of string
objects.
So remember that I'm specifying word as a parameter of the ArrayList, this means
that when we add elements to the list, we'll need to objects of data type word.
And if were to say call the get method, which is used for getting elements
at specific position in the list will receive an object with a data type word.
So currently all these add methods, or adding a single string object to
the words list each time, and that's why we're getting all these errors.
So we need to update each of these lines to pass in a single word object.
So let's just focus on this first element here.
So I'm going to comment it out.
So below it, I'm going to write in the version of the code where we're adding
in a new Word object to the words list.
[BLANK_AUDIO]
Here's the typical way to go about this.
We would've created a new Word object, store it in a variable here called w and
then added that variable to our words list.
So now here the one we're creating our new word object,
we're passing in two new inputs into the constructor.
So the english and miwok words.
So since we only need to reference this w variable once here.
There's actually a more concise way to write these two lines of code.
So this method of creating a word object and adding it to the list,
does work, but there's actually a more concise way to do it.
So you'll notice here that we only reference this variable w
once down here.
So we can go ahead and actually cut out the substantiation of the word object
and paste it directly into the add method.
So doing it this way, we don't need this extra step up here to create a new Word
object on a separate line of code and then store it into a temporary variable.
So we can actually go ahead and just remove this line completely.
Instead, we've directly added our new Word object into the list.
So to summarize, the input into this list is a new Word object which
is created in line by using the new keyword.
I'm going to go ahead and
finish populating the ArrayList with the word objects.
When you're all done, this is what the code for
creating an ArrayList of words should look like.
So let's move down here to where we're passing our
ArrayList into the adapter down.
So we need to update this generic type from string to be words.
And this change reflects that the ArrayAdapter now contains the list of
words as a status source instead of strings.
We'll also need to update the layout resource to be our new list item layout.
So instead of this, we'll have R.layout.List_item.
So now there's no errors in the code now, so I'm going to go ahead and
run the app on my device.
So here's the emulator, running this version of the app.
Let's navigate into the numbers activity.
That just crashed, I wonder what happened?
Let's check out the Android monitor and check out the Android logs.
Well at the very top of the log message, we see here that it says,
Java.Lang.IllegalStateException ArrayAdapter requires the resource
ID to be a text view.
I'm not exactly sure what this error means, so I'm going to have to go
into the documentation and see if I can find any clues.
Here's the developer documentation for the ArrayAdapter.
So let's read through the Class Overview.
Alternatively, you can also pause the video here if you want
to read through it yourself.
So what I've learn from these couple of paragraphs is By default, the class
expects that the provided resource id references a single text view.
That's probably why the list item layout from the Android framework itself worked
because the whole layout consisted of a single TextView.
And here in this next paragraph we see that we can add lists or
arrays of custom objects.
So that's perfect for us to help display our custom word objects.
Now all this makes sense because remember that the ArrayAdapter uses
generics.
Which means we can substitute any object data type in here for this team.
Now, moving down to the third paragraph, in order to display more
complicated list items that can pertain more than a single text view, we'll need
to override and provide our own implementation of a getView() method.
So ListView cause the adaptors getView() method when It needs a new view
on the screen.
And one of the input arguments into the method is the desired element of
the list.
So in this case we have position 0 that we need.
Knowing this information, the adapter returns a view to the ListView,
that's populated with the information from the position 0.
So think of the relationship between the ListView And getView, similar to what
happens between a surgeon and a surgical technician in an operating room.
So in this analogy, the surgical technician like the getView,
hands the surgeon the ListView,
the correct instrument of the correct view when the time comes.
So the ListView or surgeon requests for the view or the scissors in this case.
The getView gets what's needed, the View or
in this case the scissors and passes it to the surgeon.
So by default,
the ArrayAdaptor class expects that it'll be populating a single TextView.
So because the List item layout that we will be populating is more complex so
it has two TextViews and it eventually will have a image view.
We need to override the getView method with our own custom behavior.
And in order to do this, we need to sub class the ArrayAdapter class.
So to elaborate, this means we need to create a new Java class.
So we'll call it the WordAdapter class and use extend the ArrayAdapter class.
So I'll show you how to get that done now.
So let's navigate over here to the project view.
Select our package, right-click, New > Java Class.
So we want to name this file WordAdapter.
We'll need to modify this auto generated file from Android Studio.
We want this class declaration to specify that the WordAdapter extends or
inherits behavior from the ArrayAdapter class.
Now to show the available methods to override from the ArrayAdapter class,
our cursor will have to be between these two brackets.
We'll hit Code and then override methods.
Alternatively the keyboard shortcut is Ctrl+O, now in this list here,
go down and find getView and then click Enter.
So this method gets auto generated by default.
Now I'm going to take a step back and let you finish the steps that are needed
to make this app display the list of vocabulary words for
the numbers activity.
So the steps will include finishing the implementation of the getView method.
When you're done with this entire quiz, the app should look like this.
Each list item should display a miwok word on top of the English
translation for that word.
Now to help verify your own track, I'm going to provide you
with some code changes that are needed in the numbers activity.
So instead of the ArrayAdapter we'll be using a WordAdapter.
So the constructor fo the WordAdapter class takes in two inputs.
So just the context and this list of words and
then also remember to update the adapter variable down here.
Now make sure your WordAdapter class works with these number activities
changes, otherwise you'll need to go back and fix your WordAdapter class.
Now I know this clean exercise will be a bit of a challenge, because you've never
created a custom ArrayAdapter before or even overridden the getView method.
This task involves many steps, but I think you're definitely ready for this.
Now just be patient with yourself,
because this task will require a bit of time.
To give you another hint,
I'll point you an example app which handles a similar use case.
So this project here is hosted on GitHub as an open source project and
this mean that the code is available for anyone to take a look at.
So know that there's a different license on each open source project.
So remember to check out the license for
limitations on whether the code can be modified or distribute again.
If you're taking a look at a particular open source project.
So in this case, this app was created at Udacity, so
you're free to use it and adapt it as you wish.
So our Customer Adapter Sample App is called the Android Flavors app, and
it displays a list of all Android releases.
So each release is represented in a list item, and
each list item could contain an image, a title and the version number.
So this app is using a customer ArrayAdapter they were calling
the FlavorAdapter to display a custom list item view that contains
an image and two times used.
So having you practice this skill of reading code from other apps and
figuring out how to adapt it into army lock app.
So as a developer, you often looked at tutorials or other open source for apps.
And try to apply those skills into your own application.
So you can start browsing this Android Flavor app code by either flicking this
Download Zip button.
And then downloading all the code and then importing into Android Studio as
an existing project, or you can browse the files directly in the web browser.
So for example, I can click here, app > source/main,
and then navigate through the Java files or the rest files.
Another cool GitHub shortcut here is to type T on my keyboard, so
I'll hit T here, and that activates the file finder.
So this allows me to easily browse through the files in my project.
So if I want to look up that main activity, I can type activity and
it pulls up our mainActivity.java.
Or if I want to search up the FlavorAdapter that I mentioned earlier,
I can easily find that here.
So hopefully this example will help you in the next coding exercise.
So check out the quiz for specific instructions on how to get started, and
best of luck.