Create a Sectioned List in Android using RecyclerView

Welcome

Welcome back reader to the List using RecyclerView series. You may consider this the third article in this series. Do not forget to read the first and the second article of this series. In this article we will be creating a Sectioned List using RecyclerView.

Create List in Android using RecyclerView — Part 1

Create a List in Android using RecyclerView — Part 2

To recap, so far we have learned to create a simple vertical list, using an HTTP Client to GET data from a Web Service and shown it in a list using RecyclerView. Now we will move ahead towards creating a more complex list — specifically a title and a list collectively as a row of the list, as you might be able to tell from the image above.

In this example, we will create a list showing news article from different sources in a rather complex list (which we are referring to as Sectioned List). For that we will be using NewsAPI again. If this sounds novel to you, I would suggest reading the previous article in this series first.

So, let’s get started!

A Call for reinforcements!

All the dependencies used in the previous article will be used here.

After adding these dependencies, hit Sync Now.

Then you might want to add the following line just above the application tag in the AndroidManifest file of your project (to get the Internet Permission):

<uses-permission android:name="android.permission.INTERNET" />

A brief look at the Web Service, again!

At this point, I am going to assume that you have an account set up in NewsAPI. If not, you might want to do it now, as instructed in the previous article.

Just so we are clear, we are going to focus on creating the sectioned list in this article but if you want to read more about Web Service, we have already covered that in the previous article.

We will use the same WebServiceClient which we used in the previous article and its final code should look like this:

Now this would be the point where we create some Data Transfer Objects (DTOs). To work with the Sectioned RecyclerView, we need to create some DTOs and a model class.

• Source.java — a DTO to capture the Source object inside the Article Object.

• Article.java — a DTO to capture the Article Array (take a look at the API Response) inside the TopHeadline Object.

• TopHeadline.java — a DTO to capture the whole API Response Object as a TopHeadline Object.

• News.java — a model class (a what?). This might need some explanation. Actually, in the previous article, we were able to use the API Response directly in our List. But, in this case, we are creating a Sectioned List so we need to a custom object from the API Response (which we will do in MainActivity.javalater) to be able to use it in our view conveniently.

Getting done with the Objects part, now it’s time to setup the Web Service interface. Here again, we are using only one endpoint just for the sake of simplicity.

Couple of things to notice here:

• We are setting the language of the response as English by passing en as the value of language param, and
• We will specify the number of results per request by passing a numeric value to the pageSize param.

<?Views and Layouts and XML?>

Illustration of a Sectioned RecyclerView

With that said and done, we now move on to the UI. Let’s start by creating the row layouts first. One thing I would like to clear here is that a Sectioned RecyclerView is basically a list of a number of views + a RecyclerView as its single row. In other words, a row of a Sectioned RecyclerView has a view (or more) and a RecyclerView.

This layout (row_headline.xml) will act as the row of our inner RecyclerView (next layout file). Keep reading you’ll get it.

And this layout (row_news.xml) will be the row model of the outer RecyclerView (Sectioned RecyclerView). It will all make more sense once we start writing the Adapter and ViewHolder classes.

Holders for the Views, you said?

Now let’s get on with creating the ViewHolder classes. There will be two ViewHolder classes in this example, because there are two rows, right?

HeadlineViewHolder is a ViewHolder class to interact with the row_headline.xml layout and its views.

NewsViewHolder is a ViewHolder class to interact with the row_news.xml layout and its views.

Ah yes! The Adapter.

This is the part where you will see most of the changes and it’s most important to understand the Sectioned RecyclerView. So, focus!

Do note that there will be two adapters here. You can just think of it as two RecyclerViews will require two different Adapters to function. So, let’s create the HeadlineAdapter first, since it is almost the same as the one we created in the previous article.

But before creating the Adapter class, we are going to use a DateUtil class in the adapter. So let’s create that class first.

This util provides methods to parse and get the Date object from the timestamp as a String in a presentable manner.

Now we can create the HeadlineAdapter class.

Pretty basic stuff, right? Just an adapter creating views, reading values from list and binding them with the view. But the point to note is that this adapter is for the inner RecyclerView, i.e. the one containing the actual News Headlines.

Now moving on to the next adapter class NewsAdapter.

Now this is almost similar to every adapter class, but the point to understand here is that we are working with a TextView (Source Name) and a RecyclerView inside an adapter. In other words, we are going to create and set another Adapter and set it to the inner RecyclerView inside the onBindViewHolder() method here. This might be seen as the main point of what a Sectioned RecyclerView is — a RecyclerView (and an adapter with it) working with another RecyclerView (and the adapter associated with it).

Is that all? No, of course!

Being done with all the Models and Adapters, we are at the position of using them in an Activity. But first let’s create the home layout of the application.

It’s a pretty simple layout file — containing a RecyclerView (parent one) and a ProgressBar to be used as a loader.

Now moving on to the MainActivity class. This part also needs some explaination so we will understand it in chunks.

First of all, declare all the necessary class level members — a RecyclerView object, a ProgressBar object, a List of model objects, a NewsAdapter object, and a logger tag.

But wait! What’s that Map object about?

Well, as we discussed above, the API response is not the best example to use for a Sectioned RecyclerView. So we are going to create a custom List of data which will then be used by the Sectioned RecyclerView. And to do that, we will require a Map object. We will see that in a bit!

Now let’s create a methodinit() to initialise all the class level objects.

Then we create method setRecyclerView() which simply sets the layout manager and adapter to the RecyclerView.

Then finally we move on to the most important part — Web Service call. We create a method getNews() to perform the call — after creating the WebService object from WebServiceClient. Then we can get the RetrofitCall object from the WebService object and enqueue the call.

Now we have two callback methods:

• onResponse() — to handle the response received from the Web Service.
• onFailure() — to handle any error that may occur during or after the call.

First we define the onFailure() method. We simply log the error method to the Logcat and hide the progress bar. But in real case scenario, proper error message should be shown to the user also — using a Toast, Snackbar or maybe a dialog box!

Now let’s define the onResponse() method. We start by traversing the response article list and storing the news in the map as values in a list for each source name.

Then we further traverse the map object, and create a list of News objects, which can later be used by the NewsAdapter. Finally we instantiate the adapter object and call the setRecyclerView() method.

So all things considered, at last your MainActivity should look like this:

Now if you run the application, it should run perfectly fine.

And if there’s any error while running the app, do check the Logcat of your IDE. Feel free to post the error in the response section below. You can also check out this project in our Git Repository for any reference.

We are now at the position to wrap this up. I hope this article was helpful to you in ways and if you have questions feel free to comment it down. Stay connected for the upcoming articles. Thanks for reading!

Meanwhile, you might wanna check out the following articles:

Everything you need to know about DDoS

Build your first React App