Join Albert Lo for an in-depth discussion in this video GooglePhotosFragment layout, part of Android Development: Modern Android UI Design Elements.
- [Instructor] Our Google Photos fragment will be responsible for loading the views and the layout XML and also to manage our access to the Google Photos library as needed to load our albums and photos. I've included a library for accessing the Picasa API. Now I say Picasa API because Google Photos is actually still using the Picasa API behind the scenes. The details of the Google Photos library is beyond the scope of this course.
However, feel free to browse through the source included in the exercise files to get ourselves familiar with the calls we will be making. Let's create our Google Photos fragment as follows. We go to the Android view of our project and we select App, go down into our package and under our package, we are going to create a new package. We will call our new package, ui. Under our ui package, we're going to create another package and we will name that new package, googlePhotos.
In this package, let's create our Google Photos fragment. So we right mouse again and go New Java Class and we will be creating a new fragment manually. We could have used the wizard to create a fragment for us, here. However, we don't need a lot of code that the wizard automatically creates for us. So to avoid confusion, it is simpler just to manually create the fragment ourselves. So let's go ahead and do that selecting Java Class and we will name our fragment, GooglePhotosFragment.
It will extend the v4 fragment class. So we select the v4 fragment and hit OK. Our Google Photo fragment will have the following method: first one is the public static method called new instance. It will return a Google Photos fragment instance and it will take no parameters. In this method, I'm going to call the constructor.
I'm going to also create a bundle and pass it to the arguments. I'm going to call the set arguments method of GooglePhotosFragment. And we'll just return our fragment now. The next method we will create will be a fragment life cycle method called onCreateView.
It's a public method onCreateView and it takes a couple of parameters. The first is the LayoutInflator. And the next parameter is the ViewGroup container. The last input parameter is the savedInstanceState.
So in the onCreateView, all I'm going to do is inflate my layout. I'm going to call my layout fragment_google_photos. We are going to pass in our ViewedGroup container and set the attached parent to false. We will leave the layout XML undefined for now and we will define it later on.
The next method that we will create is the onViewCreated Now the onViewCreated is similar to the inflate views in the main activity that we mentioned in the previous video. So it's also a public, returns nothing. It takes in two parameters. The first is the view and the next one is the bundle.
So in this onViewCreated, it will access the fragment layout and inflate the views, so it'll go and find the views from the fragment layout and inflate those views. So let's go ahead and create our fragment layout first. So I'm going to close the project view by pressing command one again. The Fragment Google Photos layout will contain three items.
The first is the text view, which will identify the account name. The next one is the swipe fresh layout. This is a view provided by the Android SDK to refresh our Google Photos recycler view. And lastly, we will include also a custom recycler view called grid recycler view. So let's go ahead and create that now. I'm going to change this to relative layout, put all my parameters into their own line.
Now that I've changed to RelativeLayout, I don't need my orientation anymore. Get rid of that. I'm going to add an id and call it container. Now I'm going to add in my TextView. I'm going to call it account name. The width will be match parent and the height will be wrap content, id is account name. I'm going to add in the swipe refresh layout next.
It's also going to be match parent and match parent for both width and height. So what we want to do with this swipe refresh layout is we want to swipe down on our screen and have it make the network call to the Google Photos library to load our albums and photos. We will talk a little bit more about swipe refresh layout once we go back into Google Photos Fragment. Now let's add our custom recycler view.
We will implement the code for this later but for now let's just define the package and the view. I'm going to switch over to Google Photos Fragment and I'm going to copy the package name here, switch back to fragment Google Photos layout and we will insert our custom view. And we will paste our package name. We are going to paste our custom recycler view under a views package.
And we will call our new custom recycler view, GridRecyclerView. Let's add a couple of attributes, the first is the id. And we'll give it an id photo grid. The next attribute we'll add in is the width. And the layout width will be match parent.
And the layout height will also be match parent. And now we're going to add in closing tag for our custom recycler view. Now we are done with our changes to Fragment Google Photos Layout and we're ready to switch back to Google Photos Fragment.
- Creating a custom layout with XML
- Setting up OnClick handlers
- Making API calls
- Creating custom views
- Implementing ViewHolder objects
- Signing certificates
- Adding a checkbox