Introduction

Explore part of the application is created to help users find interesting and relevant information about different countries, cities, vacation spots etc., which will help them during trip planning. It includes general country information (time zones etc.), more detailed information about accommodation near wanted destination, forecasts for selected trip periods, location of nearest embassy in a given country, SARS-COV-2 statistics for the country user is travelling to, quality of life index, crime index, currency converter and prices of products known to everyone (BigMac, Coca Cola...) and some other functionalities.

As we agreed on a specific design variant for the Explore screen, we thought it would be useful to explain the process of creating the layouts and linking them to the application's Java code.

Nested Recycler View

Nested Recycler View consists of two recycled views of which one contains the other. We implemented nested recycler view to the Explore screen of our application. The decision for implementing it came from the liking of its visual representation and from its possibility to contain arbitrary number of element views (elements (data) are added programmatically).

images/nested_recycler_view.png

How does it work?

The main RV should be set vertically, and its elements (nested RVs) should be set horizontally.

Creating the necessary layouts

There are 3 layouts that need to be implemented.

Root layout (fragment_explore.xml)

The root layout contains the main (vertical) RV. It must be scrollable vertically, should occupy the whole screen and should contain horizontal RVs.

Vertical RV item layout (recycler_item_vertical.xml)

Vertical RV item’s layout contains a CardView which represents each vertical item and each category shown on Explore screen. Furthermore, the CardView contains two TextViews (title and short description) and the horizontal RV (the user should be able to scroll horizontally through vertical items (CardViews)).

Horizontal RV item layout (recycler_item_horizontal.xml)

Horizontal RV item’s layout contains a CardView with background image, title and short description. Basically, almost the same as vertical RV item except of incorporating an additional RV.

Implementing RV model

In order to access each RV’s items easily and in a structured, organized way, we created a couple of Java classes that reflect the RVs. The result – we can create array list for each horizontal RV item (represents all the items scrollable horizontally) and an array list for the main vertical RV (represents all the categories scrollable vertically and consists of horizontal RV items) and then just display created data.

HorizontalRecyclerViewItem.java

The class that represents an item within the horizontal RV. It consists of an image resource (regular integer because each resource can be referenced by an integer (R.drawable.imageExample is an integer)), title and text.

HorizontalRecyclerViewAdapter.java

The class extends RecyclerView.Adapter<RecyclerView.ViewHolder> and represents an adapter which is a link between our data (horizontal items that we want to display) and the RV considered exclusively as a View. The adapter always provides as many items as we need at the time (performance improvements).

The class consists of an array list of horizontal items (instances of HorizontalRecyclerViewItem) which represents all items of one horizontally scrollable RV.

It also contains another class, HorizontalRecyclerViewHolder which extends RecyclerView.ViewHolder and describes an item view and metadata about its place within the RV. HorizontalRecyclerViewHolder contains an ImageView and two TextViews which reference to a specific item’s image, title and description inside of the horizontal RV.

HorizontalRecyclerViewAdapter also overrides onBindViewHolder (HorizontalRecyclerViewHolder holder, int position) method that passes values to our item’s views using the references (that we saved in HorizontalRecyclerViewHolder – holder.view). It also tells us at which array list item we are looking using argument position.

Last thing HorizontalRecyclerViewAdapter contains is getItemCount method which simply returns number of items inside the specific horizontal RV.

VerticalRecyclerViewItem.java

The same explanation as HorizontalRecyclerViewItem, except that it contains title, text and an array list of HorizontalRecyclerViewItem instances.

VerticalRecyclerViewAdapter.java

The same explanation as HorizontalRecyclerViewAdapter, except that it contains an array list of VerticalRecyclerViewItem instances and Context instance that is needed for placing items into the vertical RV.

ExploreFragment.java

It should retrieve relevant information from a selected API (still in development, past due date) and show it using RVs.

To display our main, vertical RV, we need to create an instance of VerticalRecyclerViewAdapter (holds our data for RV) and locate our view container inside of explore_fragment.xml. Then, we need to create a LinearLayoutManager which is responsible for placing items into the RV. After that, only thing left is to link the instances of LinearLayoutManager and VerticalRecyclerViewAdapter with our view container for vertical RV from explore_fragment.xml.

The same thing (concerning the layout manager and adapter for placing items into the RV) is also needed for horizontal RV and is implemented inside of the VerticalRecyclerViewAdapter class.

Tasks and assignees

• Nested Recycler View - Ivan Rubinić
• API for filling Recycler View with data - Vanja Ljubobratović and Karlo Graf