Join Albert Lo for an in-depth discussion in this video Implement AlbumViewHolder, part of Android Development: Modern Android UI Design Elements.
- [Instructor] Now we are ready to create our view holders. Before we do that, let's open up our project view with command 1, and I notice that our views package is under UI.googlephotos package. I want to move this, so let's select views and right mouse and select refactor and select move. And we select move everything. The reason that I want to move the views package is because I want to convey the concept that our views can be available to all screens, not just google photos package.
So let's go ahead and delete google photos and we're going to delete the views package. So we're going to move our views package to under UI and we select refactor. And there we go. Now our views is under our UI. Now we are ready to create our view holders. Let's close our project view with command 1. And switch over to album grid adapter.
There are a few viewholders that we need to implement so let's start with albumviewholder. To build properly, let's comment out the other viewholders as a temporary measure. Now we select albumviewholder and select alt return and select create class. We are going to create our albumviewholder under the viewholders package. So let's add in viewholders here, select that, press OK.
There are a couple of private class members that we want to define, so let's add them first. The first one is an imageview. And the other one is a reference to our activity which is appcompatactivity. Albumviewholder inherits from baseviewholder. As previously discussed, the constructor for baseviewholder will take in a root view.
So what we will do here is inflate our layout XML and pass it right in to our superclass method. So I'm going into here and call layoutinflater and passing in our activity. Then we will call the inflate method and we will define a new layout file and we will call it google photos item. We will also pass in the view group parent and set attach to root as false.
Let's also initialize our imageview here. So I'm going to cast to imageview and call get root view. Find view by ID and pass in the thumb. And let's also initialize our activity reference. Now let's go in and define our layout so let's select google photos item and select the lightbulb and select create layout resource file.
And let's clean up our layout resource file by putting attributes in their own line. Okay, let's replace linear layout with our own layout that we defined square relative layout. Now let's also add in a view inside this container. We'll add in imageview, the width will be match parent and the height is also match parent. Let's also add in an ID which we mentioned earlier.
The ID is thumb. Let's also add a couple of attributes to our square relative layout. Let's replace orientation because this is a relative layout. We will replace it with foreground attribute and our foreground will be selectable item background. Let's also define a theme. And our theme will be taken from a default style.
We will use the theme app compat. Let's also add in an XML namespace for tools. Now let's add in an attribute for context under tools and instead of the default main activity, I'm going to copy this here and use google photos fragment. Okay, I notice I have a syntax error here.
So let's go and fix that. Okay, so now we are finished with our changes to google photos item. Let's switch back to album view holder. There's a couple of methods that we will implement here. The first one is set data and we will press control O, select set data. Set data will actually bind our data to our views so let's get a reference to album entry.
We will call the get album item for our google photos item. Let's also define a local string to hold our thumbnail. And we will retrieve our thumbnail by calling album entry and call get media group, get contents, get first element, get URL.
To load our URL, we're going to call Picasso. Now let's switch over to our project view and select our app module's build.gradle file. And we are going to add in a dependency for Picasso.
I will also add a dependency for recycler view from the support library. Recycler view, and it will be the latest version, 25.3.1. Okay, now let's sync up with gradle. Make sure that our gradle sync is working. We'll also clean our project.
Let's go back to our album view holder and we're going to continue with our Picasso call, we're going to call load and we're going to pass in our thumbnail URL. And we're going to load into our imageview. Let's also define a click listener for our root view. Now normally we would define an anonymous inner class here as our click listener, but what I'm going to do is define a new private class so let's go to the bottom here, dismiss our project view, and I'm going to define a new private class and call it item click handler.
It will implement the view on click listener. Press control O and we will select object and also select onclick. So for our constructor, we are going to pass in base grid adapter. And we are going to define a private class member for base grid adapter.
And we will initialize base grid adapter here. And our click handler, what we're going to do is call the google photos fragment. Let's set that up with some logic to check for our current position to make sure we have a valid position and we do that by calling get adapter position and check that it's a valid position.
If we have a valid position, now we're ready to call google photos fragment. So let's define an album ID, and we will call the get item from the adapter and pass in the position. And we will call get album item, get Gphoto ID, and that is our album ID. Now we have our album ID, let's call our support fragment manager.
And now that we have our support fragment manager, we can look for our google photos fragment. And we call find fragment by tag. And we will pass in the name of our google photos fragment. Android Studio is flagging a warning here so let's fix that by casting to google photos fragment.
Now that we have our fragment, let's call the load photos method and pass in our album ID. Load photos method will be defined in google photos fragment later. Now that we have our item click handler, let's create a new instance of it and we will pass in our adapter. I've chosen to use a private class instead of the anonymous inner class structure that you typically see because I want to highlight the flexibility of using private classes.
The private classes come from being able to pass in runtime parameters as constructor parameters. In the case of item click handler, our constructor parameter is base grid adapter. Whenever there are runtime parameters like a view.getID method that are core to the behavior and operation of anonymous inner classes, the preference is to create a private class to encapsulate the behavior of the runtime parameter. And using this item click handler private class as an example we can create these private classes easily.
- Creating a custom layout with XML
- Setting up OnClick handlers
- Making API calls
- Creating custom views
- Implementing ViewHolder objects
- Signing certificates
- Adding a checkbox