Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that we have something to work with visually we need to read it again, but this time from internal storage.
If you want to learn more about displaying images in GridViews, check out the Implementing Designs for Android project. Specifically look at the stage Customizing a GridView for Friends.
-
0:00
Now that we have something to work with visually, we need to read it again.
-
0:03
But this time from internal storage.
-
0:06
So now that we have things being stored in our file system,
-
0:09
we can start adding functionality to show them visually.
-
0:12
Lets start by taking a look at image grid fragment,
-
0:15
which is located under our main Java Package, under UI and fragments.
-
0:21
This fragment will be responsible for reading JPEG files of all
-
0:24
the existing images in our internal storage and showing them in a grid format.
-
0:29
You're hopefully familiar with using grid views and adapters from previous projects.
-
0:32
But if not, check the teacher notes for
-
0:34
links, where you can learn more about them.
-
0:36
Let's look at line number 41 inside of image, grid, fragment.
-
0:41
Most of the work is done by setting our model files correctly in
-
0:43
the grid adaptor with the following line.
-
0:46
mGridAdapter equals new GridViewAdapter, passing in this.getActivity for
-
0:51
the context.
-
0:52
The second parameter's R.layout.view_grid for the layout.
-
0:56
And we have the last method, which is extractFiles.
-
0:59
Let's jump into extractFiles.
-
1:03
We will be implementing this method to pull back an array list of
-
1:06
image grid items.
-
1:08
The image grid item is our model object which our image grid
-
1:11
fragment already knows how to use in order to show images on the screen.
-
1:15
What we need to do is set up the connection between storage and
-
1:18
our model object, so the rest of our image grid fragment can do its job.
-
1:22
You'll see that we are already creating an array list and returning it.
-
1:25
Between these two lines of code is where we will add the new functionality to
-
1:28
read these files from storage.
-
1:30
So basically, we need to start out at getting access to our files we
-
1:33
have previously written to storage.
-
1:35
To do this, let's open up our files utilities class and add a new method.
-
1:38
Let's create a public static method called list files, which returns an array of
-
1:43
files and takes a context as a parameter since we'll be needing this.
-
1:47
Public static File array listFiles with a parameter of context.
-
1:55
[SOUND] Next, I'm gonna use that context which we
-
2:00
passed in to get the internal file directory.
-
2:04
File fileDirectory equals context.getFilesDir.
-
2:12
It might be weird to always talk about directories as files, but
-
2:16
that is the style in these types of OSs.
-
2:18
After we have a file directory,
-
2:19
we're going to list files under it using a file filter.
-
2:22
This will go through and extract files which contain a JPEG.
-
2:26
Note, I'm writing this file encoding example to use only JPEGs.
-
2:30
However, with a little work,
-
2:31
it can be modified to support other image file formats.
-
2:34
To do this work of listing files, we use the file directories objects method
-
2:38
called list files, which takes a file filtered typed object as an argument.
-
2:43
The file filter is implemented as an anonymous class, so
-
2:45
we'll need to implement its accept method.
-
2:48
The accept method will go through each file under the file directory.
-
2:50
And will add conditions to decide whether to filter it out or not.
-
2:54
By returning true in this method, we will filter it out.
-
2:58
Otherwise, we will return false to ignore it.
-
3:00
Let's add a condition to this method to filter out the file if it has a JPG as
-
3:04
its extension.
-
3:05
[BLANK_AUDIO]
-
3:09
So let's do if file.getAbsolutePath.contains.
-
3:17
And just do .jpg, and then left bracket.
-
3:21
And then if that's the case, we'll return true.
-
3:28
And then else we will return false.
-
3:32
We're done after that and just need to return the filtered files.
-
3:35
[BLANK_AUDIO]
-
3:37
Missing semicolon here and then we just do a return.
-
3:41
Actually, let's go back to the top and
-
3:46
do file array of filtered Files equals fileDirectory.listfiles.
-
3:55
And then we'll say return filteredFiles.
-
4:01
At the end, we still need to get it in to that model object I had talked about.
-
4:04
So let's move back in to the image grid fragment.
-
4:07
Let's call the new method which we just wrote to be
-
4:09
called in the extract files method.
-
4:11
We'll use the activity as a context to pass into list files.
-
4:15
So let's start with a File
-
4:19
array filteredFiles equals fileUtilities.listFiles.
-
4:28
Passing in this .getActivity.
-
4:32
Now we are working with array of files at this point, so let's create a for
-
4:35
each loop to go through each file and create a model object out of it.
-
4:39
So for and then we'll do file filteredFile colon filteredFiles.
-
4:50
Left bracket, right bracket.
-
4:52
For those who haven't seen this type of for
-
4:54
loop, it's just a convenient way to loop through every object in array.
-
4:58
Each object which will be iterated through will be known as file filtered file.
-
5:03
This is more of a short end way which avoids the need of maintaining a counter
-
5:06
to iterate through the array.
-
5:08
Next, we utilize a bit map factory to decode our jpg in to a fold bit map.
-
5:12
Bit map factory, in general,
-
5:13
is a utility style class with a lot of useful methods which work with images and
-
5:18
their conversion to ensure we can use them programatically.
-
5:21
So for here, we'll do Bitmap, we'll call that Bitmap as well.
-
5:27
Equals BitmapFactory.decode.
-
5:33
See.
-
5:34
Let's do file.
-
5:37
And then we'll pass in the filteredFile.getAbsolutePath.
-
5:43
Then we'll need to create the image item which contains the Bitmap object we
-
5:47
just created.
-
5:48
As well as a reference to it's full file path in a simpler name to refer to it.
-
5:53
So we'll do ImageGridItem Item equals new
-
5:59
ImageGrid passing in the Bitmap as your first one,
-
6:05
and the second one we'll put into it's simpler name.
-
6:07
So filteredFile.getName, which won't give us the whole path, just the last part.
-
6:16
And then we will pass in filteredFile.getAbsolutePath, and
-
6:24
then colon.
-
6:26
The image item will be then added back into the array by the following.
-
6:29
[SOUND] ImageItems.addItem.
-
6:35
The real magic in this code is not how we read contents in this file, but
-
6:39
how we use the contents in this file.
-
6:41
Utilizing the static decode file operation on the bitmap factory,
-
6:44
we create a Bitmap which we are going to use to show the actual context of the file
-
6:48
in our fragment.
-
6:49
So after this bit of code, if we run our app,
-
6:52
we should be able to see these images show up in our grid.
-
6:55
So let's run the app.
-
6:56
[BLANK_AUDIO]
-
7:05
At this point, we should see the acid files which we originally copied to
-
7:09
internal storage, now red and shown in our view grid
You need to sign up for Treehouse in order to download course files.
Sign up