https://github.com/enyason/NestedRV
Repository
https://github.com/enyason/NestedRV
How to create a Nested Recycler View
How to make network request with Retrofit
Difficulty
Intermediate
In this tutorial we are going to implement a nested RecyclerView like that present in the google playstore. We will be using data i hosted here for this implementaion. With this said, lets get our hands dirty.
In the app level gradle.build file, add the following dependencies
// for displaying items in a list view
implementation 'com.android.support:recyclerview-v7:27.1.1'
// for displaying items on a card view
implementation 'com.android.support:cardview-v7:27.1.1'
// library for loading images into imageviews
implementation 'com.squareup.picasso:picasso:2.5.2'
//retrofit library for making network calls
implementation 'com.squareup.retrofit2:retrofit:2.4.0'
implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
Before we dive into the back-end aspect , we are going to define the layout file in the XML.
Main Activty Layout
XML Code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.nexdev.enyason.nestedrv.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<ProgressBar
android:id="@+id/pb_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Basically i just defined the main List widget using the Recyclerview component.This Recyler view will house the inner recycler view.
image output of the xml should be this
Main Activity Row Layout
This layout will handle the layout structure for each item in the Main Activity Layout.
xml code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_movie_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="Movie Category"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="@+id/home_recycler_view_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tv_movie_category"
android:layout_marginLeft="10dp"
android:layout_marginBottom="15dp"
android:orientation="horizontal" />
<View
android:id="@+id/activityMainDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/home_recycler_view_horizontal"
android:layout_marginBottom="5dp"
android:background="#31C7C7CC" />
</RelativeLayout>
The xml contains a label for the movie genre and a RecyclerView for the horizontal scrolling. After doing this, you should have something similar to the image below
Inner RecyclerView RowLayout
This layout will handle the layout structure for each item of the horizontal RecyclerView which is the inner recyclerview.
xml code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view_home"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:elevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_view_movie"
android:layout_width="130dp"
android:layout_height="170dp"
android:scaleType="fitXY"
/>
<LinearLayout
android:id="@+id/layout_mov"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/image_view_movie"
android:layout_margin="1dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Mission Impossible"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_genre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="Action,Comedy..."
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
The xml contains a label for the movie title and genre and an image view for the horizontal scrolling.
We are going structures our model classes, to depict the data structure returned from the response
Response
HomeBodyResponse.java
public class HomeBodyResponse {
String status;
HomeData data;
public HomeBodyResponse(String status, HomeData data) {
this.status = status;
this.data = data;
}
public String getStatus() {
return status;
}
public HomeData getData() {
return data;
}
}
HomeData.java
public class HomeData {
List<Data> data;
public HomeData(List<Data> data) {
this.data = data;
}
public List<Data> getData() {
return data;
}
}
Data.java
public class Data {
List<Movie> list;
String genre;
String type;
public Data(List<Movie> list, String genre, String type) {
this.list = list;
this.genre = genre;
this.type = type;
}
public List<Movie> getList() {
return list;
}
public String getGenre() {
return genre;
}
public String getType() {
return type;
}
}
Movie.java
public class Movie {
String id;
String name;
String poster;
String genre;
public Movie(String id, String name, String poster, String genre) {
this.id = id;
this.name = name;
this.poster = poster;
this.genre = genre;
}
public String getId() {
return id;
}
public String getName() {
return name;
}
public String getPoster() {
return poster;
}
public String getGenre() {
return genre;
}
}
From the HomeBodyResponse class down to the Movie class, there is a relationship binding all four classes, which in turn maps perfectly to our JSON response. HomeBodyResponse stands top in the model hierarchy with others as children. The structure looks like this
HomeBodyResponse -> HomeData -> Data -> Movie
With HomeBodyResponse we can gain access to other model objects when we get a successful response from our network call using retrofit.
Before we proceed, lets understand what retrofit is. Retrofit is a networking library ....
**Create RetrofitApiClient interface **
public interface RetrofitApiClient {
@GET("/test/response.json")
Call<HomeBodyResponse> getMovieByCategory();
}
Basically we create an interface with only one method getMovieByCategory(). This method is annotated with GET, to specify the type of request we want to make. Also the return type of HomeBodyResponse is wrapped in a call object. In retrofit, the Call object basically sends a request to the web server and returns a response. Calls may be executed synchronously with execute, or asynchronously with enqueue as we will see later in the tutorial.
**Create a Retrofit Object **
The Retrofit object will help us create an implementation of the Api endpoint we defined in RetrofitApiClient above. This app demo doesn't require much network operations, but in a situation where much networking is involved, creating multiple instances of the retrofit object is a bad idea.
One workaround to this is Singleton. A Singleton implementation ensures only one instance of an object is created in a program. So whenever we want to make network calls, if the retrofit object is null, it will create an instance of it, otherwise use the already created one.
public class RetrofitSingleton {
...
//constructor
private RetrofitSingleton() {
gson = new GsonBuilder()
.create();
retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create(gson))
.build();
}
public static synchronized RetrofitSingleton getInstance() {
if (retrofitSingletonInstance == null) {
retrofitSingletonInstance = new RetrofitSingleton();
}
return retrofitSingletonInstance;
}
...
}
The constructor does the initialization of the retrofit object only when the retrofitSingletonInstance is null . Note : the constructor is private so it cannot be accessed from outside the class. The synchronized keyword ensures only one access to the method at a particular time, in cases where multiple requests are made to use the object
public RetrofitApiClient getApi() {
// creates an implemntation of the Api client
return retrofit.create(RetrofitApiClient.class);
}
This will be called to get access to the methods of in RetrofitApiClient.class . In our case we have just one method which is getMovieByCategory()
STEP 5 : CREATE THE RECYCLER VIEW ADAPTERS
We will need two adapters to achieve our nested recycler view. The First adpater for the outer Recycler view and the second for the inner horizontal recycler view. This adapters are responsible for populating the recyclerview with data.
First Adapter - HomeAdapter.java
public class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.HomeViewHolder> {
...
@NonNull
@Override
public HomeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// the custom layout for the first recycler view is inflated here
View theView = LayoutInflater.from(context).inflate(R.layout.row_layout_home, parent, false);
// returns a view holder with the view as a parameter
return new HomeViewHolder(theView);
}
@Override
public void onBindViewHolder(@NonNull HomeViewHolder holder, final int position) {
//display genre type
holder.textViewCategory.setText(data.get(position).getGenre());
//bind the inner recycler view to an adapter
horizontalAdapter = new MovieAdapter(data.get(position).getList(), context);
holder.recyclerViewHorizontal.setAdapter(horizontalAdapter);
}
@Override
public int getItemCount() {
returns size of the list
return data.size();
}
}
Second Adapter - MovieAdapter.java
public class MovieAdapter extends RecyclerView.Adapter<MovieAdapter.MovieViewHolder> {
...
@NonNull
@Override
public MovieViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new MovieViewHolder(LayoutInflater.from(context).inflate(R.layout.row_layout_movie, parent, false));
}
@Override
public void onBindViewHolder(@NonNull final MovieViewHolder holder, final int position) {
Movie movie = movieList.get(position);
holder.textViewTitle.setText(movie.getName());
holder.textViewGenre.setText(movie.getGenre());
// load images using picasso
Picasso.with(context).
load(context.getResources().getString(R.string.image_url) + movie.getPoster())
.into(holder.imageViewMovie);
}
@Override
public int getItemCount() {
return movieList.size();
}
public class MovieViewHolder extends RecyclerView.ViewHolder {
private TextView textViewTitle;
private TextView textViewGenre;
private ImageView imageViewMovie;
public MovieViewHolder(View itemView) {
super(itemView);
textViewTitle = itemView.findViewById(R.id.tv_title);
textViewGenre = itemView.findViewById(R.id.tv_genre);
imageViewMovie = itemView.findViewById(R.id.image_view_movie);
}
}
From these two adapters, we see that MovieAdapter is part of the HomeAdapter. The HomeAdapter binds the inner recycler view to the MovieAdapter and in turn the MovieAdapter populates the inner recycler view with the data it received from the HomeAdapter.
We will finish up by making a network call with retrofit to the server in the main activity. The response from the request will be used to update the UI via the adapters. The code block below shows what happens in the main activity.
MainActivity.java
public class MainActivity extends AppCompatActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//initialize the list
dataList = new ArrayList<>();
// initialize the home adapter passing the list and the context
adapter = new HomeAdapter(dataList, this);
// defining the layout manager for the recycler view
layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
//get reference to android views
recyclerView = findViewById(R.id.rv_main);
progressBar = findViewById(R.id.pb_home);
//set up main recvycler view
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(adapter);
// make network call
Call<HomeBodyResponse> responseCall = RetrofitSingleton.getInstance().getApi().getMovieByCategory();
responseCall.enqueue(new Callback<HomeBodyResponse>() {
@Override
public void onResponse(Call<HomeBodyResponse> call, Response<HomeBodyResponse> response) {
progressBar.setVisibility(View.GONE);
//load list with response
for (Data data : response.body().getData().getData()) {
dataList.add(data);
}
//update ui
adapter.notifyDataSetChanged();
}
@Override
public void onFailure(Call<HomeBodyResponse> call, Throwable t) {
progressBar.setVisibility(View.GONE);
}
});
}
}
RetrofitSingleton.getInstance().getApi().getMovieByCategory(); : this statement gets the retrofit object from the singleton which in turns calls the getMovieByCategory of the Api client returning a Call object of type HomeBodyResponse.
With the Call object, we call enqueue. Enqueue Asynchronously send the request and notify callback of its response. With the response, we load the data into the adapter and update the UI.
Our UI should look like the image below after following these steps
A simple demo of the app
Proof of Work The complete source code can be found on gitHub https://github.com/enyason/NestedRV