1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Classes, Objects, OOP, and RecyclerView for Android

Setup Custom Adapter and Viewholder

Start course
Overview
Difficulty
Intermediate
Duration
3h 12m
Students
2
Description

The course covers Recycler Views, which is one of the most important features of Android app development. They allow us to work with lists or grids of data with a ton of built-in optimizations. We'll then put your knowledge into practice by building an app to display a list of posts that we can scroll through, edit them, delete them, etc.

We'll also explore object-oriented programming with Kotlin, focusing on how to build objects, work with inheritance concepts and interfaces, and other highly advanced features. You'll also learn about classes and objects and how to work with them with the Kotlin programming language.

Intended Audience

This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.

Prerequisites

Since this is a beginner level course, there are no requirements, but any previous experience with coding would be beneficial.

Transcript

Hello and welcome back. In this video, we'll pick up where we left off in the last video and write out our code for this PostAdapter. We created the class over here. We need to write out the code over here. I also mentioned that we need to create two classes over here which will extend from the generic recycler ViewAdapter and the recycler view ViewHolder that we get and we'll do that. But before we do, let's take a look at a quick list of items that brings it all together in terms of how the adapter will work to get a general idea of the overall process. Again, this will sound a little confusing at first and don't worry about it. We'll just take it one step at a time. Here we go. 

So, for the number 1 over there, view template for each post. We already created this a temporary one that'll work. Number 2 is we are going to need a data source and we're going to create a dummy data. So, data for each of the let's say, blog titles and bodies and whatnot, we'll create that dummy data. The data type: this is where we're going to have to create a custom class for post which will specify the properties. We have title then body and then an image and maybe some actions and they'll all be specified in the class post when we create it. Number 2 and 3: those are things we'll need to actually finish our project but they're an integral part of this. But to get a basic framework for this adapter going, we need numbers 4 and 5 and number 4 is a PostAdapter which we started creating as the class and this will extend recycler view's adapter. 

This is necessary. And number, 5 which is we're going to create a custom view holder so we'll call it PostHolder and this will extend from recycler view ViewHolder. Number 4 and 5: we definitely need to do at a bare minimum in combination with number 1 to get a basic setup going. Number 1 is already done so with number 4 and 5 in mind, let's get started in our PostAdapter. This PostAdapter right here is going to extend RecyclerView.Adapter and we have to specify the type and the type that we have to specify over here is the view holder type which is something we're going to create as the next step. And after this, we have to put () to actually call that constructor and once we've done that, you see I have this red over here and I have some red over here and this we already discussed is the view holder which you have to create. If I hover over this, you see that this has some members which I have to implement and what are these members? I'm going to click on Implement members. 

You see, I have these three methods that I have to implement and that'll be for any adapter that I'm trying to create but I'll cancel it. I won't do it yet over here because first, I need to specify the type and this is going to be another class. You can create this outside of the PostAdapter or you can create it inside. I'll just create it inside. I'll say class and this will be my custom ViewHolder which was number 5 from the list. I'll call it PostViewHolder since I'm dealing with posts and this will extend recycler view's generic ViewHolder class. So, RecyclerView.ViewHolder right there. And you see this is red over here. It's because the view holder needs a parameter for its constructor which is the view that I'm going to be working with. 

Basically, think of view holders working with views. So for this class, PostViewHolder. I'm going to create a parameter. Call it postView and this will be of type View. Since we'll be working with views and this postView, I'll need to pass in to the constructor for my RecyclerView.ViewHolder. So over here, I'm going to pass this in post view and I'll make some space over here. Then I'll put this block even though I don't really need it right now. So, now that I've created the type, which is PostViewHolder, I can specify that that's the type over here. Adapter's view holder will be PostViewHolder and since I have this class inside my PostAdapter class, I have to specify the whole thing so, PostAdapter.PostViewHolder. 

You see that error is gone but this one's still there because I need to implement the members. Now, if I go to implement the members, it knows that the holder is posted after PostViewHolder which was showing up with question marks before because I hadn't implemented this class. Now, I'm going to highlight all three and bring this in. There we go. Those are the three members that need to be implemented. I'm going get rid of these two dudes. By now, you may be scratching your head as to what's going on. Again, remember this is the structure or should I say template for designing an adapter and a ViewHolder. And we haven't done much customization here beyond just the names. So, think of this as a template for virtually any other adapter that you're going to create with minor modifications. So, it has to be done. It doesn't have to be memorized. Simply a matter of going through the motions. 

Now, we have these two reds over here, one onCreateViewHolder, one item Count. Let's start with getItemCount. You see onBindViewHolder doesn't have any reds because technically we don't really need anything over here yet to get started but we need to get these two to work. So getItemCount. Think of this as the total number of roles that you'll be working with in your activity. Right now over here, how many roles or how many items are you going to be working with? When I actually have dummy data, I'm going to specify the size of the dummy data as the amount. For now, I'll just return something random like let's say return 30 and that's it. We'll leave it there for now and then we have to work on this onCreateViewHolder and what does this do?

All it does is it creates the view to display. We'll basically take our view layout file that we created which is right here post.xml and we will create a view with it. Well, you may ask, how do we create a view? We'll do it with a layout inflater and you've already done this. When you set up view binding over here, remember using layout inflater and all that good stuff. That's how you create a view and the code that we're going to use is very generic. You can literally copy, paste this into your other projects as well. There's no need to understand it fully. Just simple boilerplate code. Let's first create a variable for the view. I'll call it postView and the code you write is you call on the Layoutinflater.from and you see context over there so I'm going to put in the parentheses. The context is going to be the (parent.context). Right there. 

Again, boilerplate code so far .inflate () and here, you see we have a few ways we can go about it. We're going to use this third option right here. First is the resource which is the view that we created the post xml each individual view. Let's specify that. So, (R. It's in our layout.post) xml so that's each individual view. Then the root element is the parent and then the third option is attached to root. I'll say false. So again, boilerplate code. As we fill the rest of it in later on, this will make a little more sense. There's really not much to understand beyond the customization which we did here which is specifying which view to use to create the view which is this one right here. But you see we still have red and why is that? Because it expects a return value. It actually expects me to return this postView. So, how do I do that? If I say return postView, it's still red if I hover over it. You see Type mismatch. Required: PostAdapter.PostViewHolder. 

That's the type that I want to return which is the type that I created right here. PostViewHolder and this view parameter that it takes in. That's the view I just created. Very convenient. So, all I have to do is say PostAdapter.PostViewHolder which is the type and then pass in the view that I just created as my parameter which is what it takes in to do all its magic and you see that the error is gone and this specifying PostAdapter over here is actually redundant so what I can do is get rid of this. Simply PostViewHolder is good enough. It's available directly to return this type. That is a generic template code for PostAdapter and that should be enough to get a generic view going. So, let's go to our MainActivity.kt We have our linear layout manager. We have PostAdapter. 

We don't have any errors so let's go ahead and run our app and make sure we get a list of items to show up in the emulator. I'll say run. Looks like it's successfully installed the app. Let's pull up our emulator and make sure that we have it working. There we go. AlphaBlog and we have Title of blog post, Body of first blog post, Edit and delete actions and we should have about 25 of these. And you see I can scroll up and down. Obviously, it doesn't look that great because we haven't worked too much on the design of each post but we can modify it. For example, in our post, we can go over here and for each of these views, I can say padding = "5dp" and let's go ahead and add some margin to the bottom and say 5dp as well. 

We did that and ran it and you see we have some more room after each of our posts and some padding surrounding it as well. Again, obviously, it doesn't look perfect. We're going to customize it but you can see that we can make changes and they are reflected and you see the smooth scrolling as well. We've made a lot of progress in this video and we've set up the template for our adapter which we can work on. Now going forward, the next step will be working on this onBindViewHolder and making a couple of adjustments because you see, in our emulator, for each of these items, we want to display actual titles and bodies, not this generic one that's repeated right here 30 times and for that we're going to need to work on this and a few other things. So, hope you're excited and I'll see you in the next video.

 

About the Author

Mashrur is a full-time programming instructor specializing in programming fundamentals, web application development, machine learning and cyber security. He has been a technology professional for over a decade and has degrees in Computer Science and Economics. His niche is building comprehensive career focused technology courses for students entering new, complex, and challenging fields in today's technology space.

Covered Topics