Now that we have something to work with visually, we need to read it again.

But this time from internal storage.

So now that we have things being stored in our file system,

we can start adding functionality to show them visually.

Lets start by taking a look at image grid fragment,

which is located under our main Java Package, under UI and fragments.

This fragment will be responsible for reading JPEG files of all

the existing images in our internal storage and showing them in a grid format.

You're hopefully familiar with using grid views and adapters from previous projects.

But if not, check the teacher notes for

links, where you can learn more about them.

Let's look at line number 41 inside of image, grid, fragment.

Most of the work is done by setting our model files correctly in

the grid adaptor with the following line.

mGridAdapter equals new GridViewAdapter, passing in this.getActivity for

the context.

The second parameter's R.layout.view_grid for the layout.

And we have the last method, which is extractFiles.

Let's jump into extractFiles.

We will be implementing this method to pull back an array list of

image grid items.

The image grid item is our model object which our image grid

fragment already knows how to use in order to show images on the screen.

What we need to do is set up the connection between storage and

our model object, so the rest of our image grid fragment can do its job.

You'll see that we are already creating an array list and returning it.

Between these two lines of code is where we will add the new functionality to

read these files from storage.

So basically, we need to start out at getting access to our files we

have previously written to storage.

To do this, let's open up our files utilities class and add a new method.

Let's create a public static method called list files, which returns an array of

files and takes a context as a parameter since we'll be needing this.

Public static File array listFiles with a parameter of context.

[SOUND] Next, I'm gonna use that context which we

passed in to get the internal file directory.

File fileDirectory equals context.getFilesDir.

It might be weird to always talk about directories as files, but

that is the style in these types of OSs.

After we have a file directory,

we're going to list files under it using a file filter.

This will go through and extract files which contain a JPEG.

Note, I'm writing this file encoding example to use only JPEGs.

However, with a little work,

it can be modified to support other image file formats.

To do this work of listing files, we use the file directories objects method

called list files, which takes a file filtered typed object as an argument.

The file filter is implemented as an anonymous class, so

we'll need to implement its accept method.

The accept method will go through each file under the file directory.

And will add conditions to decide whether to filter it out or not.

By returning true in this method, we will filter it out.

Otherwise, we will return false to ignore it.

Let's add a condition to this method to filter out the file if it has a JPG as

its extension.

[BLANK_AUDIO]

So let's do if file.getAbsolutePath.contains.

And just do .jpg, and then left bracket.

And then if that's the case, we'll return true.

And then else we will return false.

We're done after that and just need to return the filtered files.

[BLANK_AUDIO]

Missing semicolon here and then we just do a return.

Actually, let's go back to the top and

do file array of filtered Files equals fileDirectory.listfiles.

And then we'll say return filteredFiles.

At the end, we still need to get it in to that model object I had talked about.

So let's move back in to the image grid fragment.

Let's call the new method which we just wrote to be

called in the extract files method.

We'll use the activity as a context to pass into list files.

So let's start with a File

array filteredFiles equals fileUtilities.listFiles.

Passing in this .getActivity.

Now we are working with array of files at this point, so let's create a for

each loop to go through each file and create a model object out of it.

So for and then we'll do file filteredFile colon filteredFiles.

Left bracket, right bracket.

For those who haven't seen this type of for

loop, it's just a convenient way to loop through every object in array.

Each object which will be iterated through will be known as file filtered file.

This is more of a short end way which avoids the need of maintaining a counter

to iterate through the array.

Next, we utilize a bit map factory to decode our jpg in to a fold bit map.

Bit map factory, in general,

is a utility style class with a lot of useful methods which work with images and

their conversion to ensure we can use them programatically.

So for here, we'll do Bitmap, we'll call that Bitmap as well.

Equals BitmapFactory.decode.

See.

Let's do file.

And then we'll pass in the filteredFile.getAbsolutePath.

Then we'll need to create the image item which contains the Bitmap object we

just created.

As well as a reference to it's full file path in a simpler name to refer to it.

So we'll do ImageGridItem Item equals new

ImageGrid passing in the Bitmap as your first one,

and the second one we'll put into it's simpler name.

So filteredFile.getName, which won't give us the whole path, just the last part.

And then we will pass in filteredFile.getAbsolutePath, and

then colon.

The image item will be then added back into the array by the following.

[SOUND] ImageItems.addItem.

The real magic in this code is not how we read contents in this file, but

how we use the contents in this file.

Utilizing the static decode file operation on the bitmap factory,

we create a Bitmap which we are going to use to show the actual context of the file

in our fragment.

So after this bit of code, if we run our app,

we should be able to see these images show up in our grid.

So let's run the app.

[BLANK_AUDIO]

At this point, we should see the acid files which we originally copied to

internal storage, now red and shown in our view grid