Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Replace ListView With RecyclerView

In this lesson, you'll learn how to reuse most of the code that's present inside the ArrayAdapter of a ListView to create and configure a RecyclerView.Adapter and a RecyclerView.

2.5 Replace ListView With RecyclerView

Hello, and welcome back. In this lesson, we are going to be replacing this list view with a recycler view. Because recycler views are usually easier to work with while creating material design user interfaces. Let's start by opening activity.main.xml, and replacing this ListView tag with a RecyclerView tag. Go to now. Here, replace this ListView with RecyclerView. Of course, inside the onCreate method, you must also change the type cast of findViewById from ListView to RecyvlerView. Next, replace this ArrayAdapter for Questions with RecyclerView.adaptor for QuestionViewHolders. Now the QuestionViewHolder object can't be used but RecyclerView.adaptor object without a few changes. So open and make this class a subclass of RecyclerView.ViewHolder. This type of class needs a constructor. So create a constructor that matches the constructor of RecyclerView.ViewHolder. The QuestionViewHolder is now ready, so go back to mainactivity. We have a few errors now and will fix them one after another. Go to the renderList method first. You can see that the adapter is being initialized here. This is a wrong initialization now because we don't have an ArrayAdapter anymore. Nevertheless, for now, leave the code as it is and above it start initializing the adapter variable using the constructor of RecyclerView.adapter. RecyclerView.adapter is an abstract class. So Android Studio should automatically generate stubs for all its abstract methods. We can now reuse most of this code which belongs to the older adapter's constructor. Let's start with this code here, which creates and initializes the QuestionViewHolder object. Cut all these lines inside this if block, except for the last one which contains a call to the setTag method. We can ignore the call to setTag because the new adapter is capable of handling viewHolder objects automatically. Paste the lines you cut inside the onCreateViewHolder method of the new adapter. Set the type of convertView to view and pass convertView to the constructor of QuestionViewHolder. You can now return the viewHolder object from this method. Let's cut these lines now which initialize the views inside the viewHolder. Again, you can ignore the call to the getTag method here. Paste the lines inside the onBindViewHolder method. Change the name of this parameter to viewHolder so that you don't have to make too many changes. Lastly, inside the getItemCount method, return the size of the questions list. You can now delete the constructor of the older adapter because our new adapter is ready. Now our RecyclerView needs a layout manager. So just before the call to the setAdapter method, add a call to the setLayoutManager method and pass a new instance of the LinearLayoutManager class to it. As its context, you can pass a reference to MainActivity. There's just one more error remaining. RecyclerViews can't have onItemClickListeners. To fix this problem, we must add a ClickListener to a widget inside the questions layout. To do that, first open question.xml. We'll be adding a listener to this RelativeLayout, so give it an id. You can call it question. And then open the QuestionViewHolder class and add a reference to the RelativeLayout. Back in, scroll down to the onCreateViewHolder method. And initialize the RelativeLayout using findViewById. And finally, inside the onBindViewHolder method, add an onClickListener to the RelativeLayout using the setOnClickListener method. Now go back to the error and cut both these lines. You can now delete this call to setOnItemClickListener. And inside the onClick method of the RelativeLayout, paste the two lines you copied. We have an error here saying, position must be final. Now the recommended approach to fixing this error is to replace position with viewHolder.getAdapterPosition. If you run the app now, you'll see that the list view has been replaced with a Recycler View. In this lesson you learned how to replace a list view with a recycler view. You also learned how to reuse almost all the code that belongs to the list views adapter. In the next lesson we'll add cards to our recycler view. I'll be waiting for you there. Thanks for watching.

Back to the top