RecyclerView has proven to be a good and handy android tool for displaying and arranging contents on the screen. However, some other features and concepts of RecyclerView have not been widely explored, this tutorial will help readers understand how to :
1. Make an API call to a github ENDPOINT with Volley
2. Process the JSON data returned as response
3. Arrange and display the response on RecyclerView with Cardviews
Additional side knowledge to gain in this tutorial will be
How to populate the RecyclerView with Cards
How to parse an image response data to a View with Picasso
First off, what we’ll be building in this tutorial is an android app that will make a request to get a list of java developers in lagos from github using this API ENDPOINT private static final String URL_DATA = “https://api.github.com/search/users?q=language:java+location:lagos";
then display the contents (Image and username) on the RecyclerView with cards (CardView). This is a visual idea of what we’ll be building, just to feed your subconscious mind the end product
The first page displays a list of java developers in lagos, clicking on any developer will open up their profile page from where you can click their git url to lauch their github page on your browser.
Okay, that’s enough talk, lets get hands-on!
Set Up
First off, launch android studio and create a new project [File > New > New Project], it is my hope that anyone who has not written any android app before can follow along in this tutorial and build the app to completion so (if you can’t do this step on your own, refer to YouTube for tutorials on how to start a new android project in android studio). While setting up your project feel free to give your project any name of your choice, in my case I’ll name it CrossCheck.
Once your project has finished building, you’ll need to add some dependencies to your app level Gradle file [app > build.gradle] then locate the dependency block and add these dependencies
Then set internet permissions in the manifest file
LAYOUT
By default you already have activity_main.xml [res > layout > activity_main.xml] this is the layout that will hold the RecyclerView, so set the layout to RelativeLayout initialize the RecyclerView here.
Open the MainActivity.java file and initialize the RecyclerView and find it by the id you assigned to it in the xml file, in my case i set it’s id to be “RecyclerView” according to the snippet above. So open your MainActivity and do this
Now we have the RecyclerView set, for the items that will be in the RecyclerView, we’ll create another layout resource file that will store the data in a CardView and then use the cards to populate the RecyclerView. Create a new layout resource file [app > res > layout > New > layout resource file] and name it developers_list.xml.
Just like we created RecyclerView in the activity_main.xml file, we’ll create a CardView in a similar way here. Then we create a linear layout to hold the data that will be contained on this card inside the file do.
Now, we are done with the two layout files (activity_main and developer_list). To actually get the data with which we’ll populate our developer_list file, we need to create a java class for it (same way we created a new layout resource file, this time do it for java not res). Create a new java class and name it as you deem fit, in my case I called this java class DevelopersList and set it up like this
So here we define 3 String variables “login” to hold the developers name, “avatar_url” to hold the developers image url and “html_url” to hold the developers github url. We then initialized them and generated their getters and constructors since we’ll be making use of them in the DevelopersAdapter class.
Then to bind the data that will be returned by the DevelopersList class to the RecyclerView, we’ll need an adapter. Create a new java Class same way you did the last one and name it as you please, I’ll call my own DevelopersAdapter and set it up. To set it up we’ll need two things in this class, one is an adapter and the second is a ViewHolder so we’ll extend RecyclerView.Adapter<> in this class. Inside the adapter we’ll define a generic which will be the ViewHolder so we’ll have
public class DevelopersAdapter extends RecyclerView.Adapter<DevelopersAdapter.ViewHolder>{
// Inside this class, we’ll have another class for the ViewHolder thus
Public class ViewHolder extends RecyclerView.ViewHolder{
}
}
Am sure you got red lines yeah? Not to worry just press alt + Enter on your keyboard to implement methods and Constructors respectively after which your code will be clean. Now explaining everything that will be going on in all these implemented methods will probably get you bored and discouraged so I’ll go ahead and attach snippets to show you what’s going on and hopefully you’ll be able to replicate the same in your studio.
Here we inflate the layout to the developers_list file we created (take note of the arguments) and it returns a new ViewHolder(v). Then we bind the data to the View objects in the developers_list file (i.e imageView and TextView) in the BindViewHolder() thus
First notice that we defined an object of the DevelopersList and got their positions from the List (developersLists.get(Position) so that subsequently we can make reference to the position of each object in the List. Also notice how we used Picasso to load the image data from the developersList to the ViewHolder.
However we need to define the View objects in the viewHolder class so we can bind data to it from the BindViewHolder()
notice that we returned the developersLists.size() in the getItemCount method. This ensures that the number of items in the developers list = the number of items in the RecyclerView.
At the the end, this is a visual output of the DevelopersAdapter class
Next we setup the adapter class in the MainActivity. Just like we did earlier for the recyclerview, we initialize it globally | private RecyclerView.Adapter adapter; we also do the same for our DevelopersList class | private List<DevelopersList> developerslists |then in the onCreate() we do
developersLists = new ArrayList<>(); this list will hold the contents of our remote JSON and pass it to the recyclerview.
Fetching the remote json data.
First off this is the structure of the json data we’ll be returning
As seen the data is in JSON format with other {Json Objects} all wrapped in a [Json Array], so we’ll be returning the data in the same format. However we are not particularly interested in all the keys of the objects, we only need the login, the html_url and the avatar_url. These are the variables we defined in the DevelopersList class. So we’ll be parsing the respective values to their corresponding variables.
Goto MainActivity and define a String variable for the api private static final String URL_DATA = “api-url here”;
Now we create a method loadUrlData() to fetch the url data for the RecyclerView and we’ll call this method in the onCreate().
This is a lot of code in one block, yeah I know so am going to try and explain what is going in this block and hopefully you’ll get it. So we start by using StringRequest (From the volley dependency) to define the request and RequestQueue to then send the request. We then create an instance of the DevelopersList to store the individual objects we’ll be getting from the items Array.
Once the request is sent, we need to display a progress dialog to keep the user engaged while the task is performed. So we initialize the ProgressDialog globally and define it inside the loadUrlData() method.
We’ll then process the JSON file that will be returned so we can easily parse it into the defined variables we’ve already set for them. So we create a new JSONObject and pass in (response) as a parameter, then surround it with (try and catch) to catch all the possible exceptions. Next we define a JSONArray from the jsonObject we just created, this is to enable us gain access to the “items” array inside the jsonObject thus we’ll pass in “items” as a parameter.
Now we have the array, to get the data we want from the array, we’ll need a for-loop, like the one we defined in the snippet above. This is to enable us get the data from the array according to their index. Inside the loop, we create another JSONObject that will allow us get data from the array according to the current index.
Next we create a DevelopersList object called developers and pass in the data we’ll be getting from the jsonObject(o) as parameters with the getString method. This will get the data as a String and save it to the corresponding variable as earlier defined in the DevelopersList class. when this is all done, we then add the list into developersLists.
Then after the loop, we create the adapter and pass in the developersLists and the application context as its parameters, after which we’ll set it as the RecyclerView adapter.
So far we’ve been able to set up our layouts, used volley StringRequest and RequestQueue to define and send our request, we’ve fetched the data from the server and set it to display on the layout. Next we’ll handle what happens when an item is clicked on the list. What we want is to have an intent that will launch a profile page for every developer clicked on.
So first we create a new empty activity for profiles, call it ProfileActivity. This will be the profile page for every developer, we’ll use an intent to pass their information from the developerslist to this profile page and display their image, username (login) and github link (html_url). We’ll also add a share button that will use intent to share their profile with some hardcoded messages on other apps.
This is basically just setting up the Profile layout file. We define a Cardview inside the parent layout to hold the image and username in a relative layout. Then we create another Relative layout to hold the developers gihub link (html_url) and the share button. So basically we have 3 new views and a button, we’ll initialize them with their id’s in the onCreate method of the profile activity
Handling Intents
We need to be able to pass data from the MainActivity to the ProfileActivity since we’ll be displaying the developers image, username and link (in their profile page). Notice that we defined 3 global static variables (KEY_NAME, KEY_IMAGE and KEY_URL) in the DevelopersAdapter class.
These variables will help us achieve that task. So in the onBindVieHolder method inside the DevelopersAdapter class, we’ll set an OnClickListener on the linear layout holding the CardViews so that upon clicking any card on the RecyclerView, it’ll open the profile page of the developer on that card with an Intent.
So to achieve this we’ll define an object of the DevelopersList class inside the OnClickListener and get the values we need from it (developersList1). Then we save these values (Login, Html_url and Avatar_url) into the global static variables (KEY_NAME, KEY_URL and KEY_IMAGE) so that we can get the values from them in the ProfileActivity. To open the ProfileActivity we create an Intent (in this context) which I called skipIntent and put the values into the static variables.
In the ProfileActivity java class, we’ll create an intent to get these values from the holding variables and set them into the display String variables we’ve defined. For the image we’ll still use Picasso to display it on the imageView of the profile page. So in the onCreate() of the ProfileActivity java file add
Recall we’ve set the id’s of the TextView in the ProfileActivity layout file to userNameTextView and developerUrl . so here we just set the Texts on them whilst displaying the image on the profileImageView with Picasso.
Handling OnItem Clicks
Then we want to launch the browser to load the developers github profile page upon clicking the developerUrl on the profile page so we set an onClickListener on the developerUrl
The last functionality we want for the app is to have a button in the Profile page that will share the contents of the profile page via other social media apps, so we’ll define the intent to handle this with an onClickListener on the button.
We have achieved all we set out to do in this tutorial, we’ve successfully built an android app that returns a list of java developers from a github api and parse it to a RecyclerView with CardViews.
You can find this project on github https://github.com/Kennypee/CrossCheck . the project is open sourced, it’s well documented so that you can make contributions if you have any. if you require clarifications or have any questions, you can always reach me on twitter @petekeny or email ekeneeze3@gmail.com and i’ll respond as fast as i can.
