1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Lists & Views in Android App Development

Recycler View - Part 2

Contents

keyboard_tab
Lists & Views
2
4
GridView
20m 58s
5
6
WebView
7m 1s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
1h 38m
Students
4
Description

In this course, we look at the various different ways that information can be presented to users within an Android app. We'll cover a variety of views that you can incorporate into your apps.

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.

Prerequisites

This is a beginner-level course so doesn't require any specific knowledge, but some basic knowledge of the fundamentals of Android would be beneficial.

Resources

Course GitHub repo: https://github.com/OakAcademy/android-app-development-with-kotlin/tree/main/Section%206%20-%20List%20and%20Views 

 

Transcript

Alright. So, hello friends. Now, in the previous lesson, what did we do?

We completed our application design. So now, we're going to concentrate on all the coding that is necessary and we're going to do it all right here. So, let's just get into it.

So, I'm going to open up the 'MainActivity.kt' file. But first, we've got to define the components that we've created, of course. Now, we're going to define only the RecyclerView component in the Main Activity. Yes?  Yes. We will define only the RecyclerView component in the Main Activity. And we will define the components that we use in the card design in the adapter class that we're going to create shortly. So, if that all makes sense, or even if it doesn't, we are just going to for this write, 'lateinit var recyclerView : RecyclerView'. Okay. So, now in the onCreate method, I have to match recyclerView with its ID. So, for this I'm just going to write, 'recyclerView = findViewById(R.id.recyclerView)'. Because we gave this ID to the RecyclerView component in the design area. Yes, it all falls into place.

Also, I need to determine how this data is going to appear on the screen. So, I have to determine whether the data will be displayed to the user in a horizontal or vertical format. So, for this, we're just going to use the recyclerView.layoutManager as a method. Now, we can display data in three different ways here. If you want to use the LinearLayoutManager method, your data will be displayed to the user in a single column from top to bottom. And in this case, that will be sufficient to just write, '(context)'. Now, if you do want to use the GridLayoutManager method, your data will still be sorted from top to bottom, but you'll also have the chance to specify the number of columns. You can view your data in two, three, or more columns. And in this case, you must write the 'context' and the number of columns in parentheses. And finally, if you use the StaggeredGridLayoutManager method, you're going to have a chance to display your data vertically or horizontally beside the number of columns. So, in this case, we have specified the number of columns for the first parameter and the way the data is displayed in parentheses for the second parameter. So, in this case, the second parameter that you typed in parentheses should be 'StaggeredGridLayoutManager.VERTICAL' or 'StaggeredGridLayoutManager.HORIZONTAL'.

Alright, my friends. So, you can use any one of those three methods to display data on the screen. Now, since we will display the data one under the other, I'm using here the LinearLayoutManager method. So, that means we've got to write 'context' as the parameter in parentheses. And remember that context represents the activity that we are currently in. That's why I'm writing right in here 'this@MainActivity'. So, that way, we define the RecyclerView component. Now, we need to transfer the country flags, the country names, as well as the detailed information that we're going to show on the screen, into the arrays. So, for this, I need to create three array lists and we'll create the first array list. And for that, I'll write 'var countryNameList = ArrayList'. Cool. So, I create this array for the country names. So, the type of your array is going to be string. That means that, I write '< String >'. Now lastly, I'm going to put the parentheses and there you see it. We've now created the first array list for the country name. Very good.

So, now let's create the second array list. I'll set the name of this array list to be 'detailsList'. And I'll create this second array list for this detail information. So, the type of the array will still be, or again be, whatever you want, '< String >', right? Excellent. Now, for the third array list, I'm going to set the name of this array to be 'imageList' and I'll create the third array list for country flags. And that way we'll keep the images inside of the array. So, the images are kept as integers, right? Images are still kept as integers in colon. So then, the type of the third array needs to be... Yes, integer. Alright. So, we've defined our array lists.

Now, let's add the necessary information to these array lists. First up, I need to add the country names. So, for this, I'll just write the name of the array and that is 'countryNameList.add' method. And alright, '("United Kingdom")'. And that way, the first element of the array named 'countryNameList'; the element with the zeroth index becomes United Kingdom. Alright. So, let's add in the second country name to the array. If you press the 'Ctrl + D' keys together on the keyboard for Windows or 'Command + D' keys on the keyboard for Mac, you can duplicate the code quite quickly. And then here, I'll just insert '("Germany")'. And then finally, we can add the third country name to the countryNameList array and I'll write '("USA")'. Alright. So, we've created our first array. Now, what we have to do is add the elements of the detailsList array. So, I'm just writing in here, 'detailsList.add'. Write the sentence like this '("This is the United Kingdom flag")'. Alright. And then, I can just duplicate this line of code like I did earlier just by pressing 'Ctrl + D'. And then, I'll edit it by writing in 'Germany'. And here, I can write 'USA'. Great. So finally, we can add in the country flags. So, I'm typing in 'imageList.add'. And we should write the path of the image that we will add in parentheses. So, our images are in the Project directory, in the drawable folder within the res folder. Yes, they should be. Okay. So, in the brackets I'm going to write 'R', representing the resources folder, then '.drawable', and finally, the name of the flag in the drawable folder. Now similarly, I could add my other two flags to the imageList array. So, I'll write 'germany'. And then, finally, I can add the flag of the USA. I'll write '(R.drawable.usa)'. Alright, my friends. So, we've added all of the necessary information to our arrays. And that's what we're going to need to do in the Main Activity for now. Right now, I want to show all of this data on the screen. So, we're going to need an adapter class for that. If you remember, we needed an adapter class earlier to use a ListView. But, in the coming videos, we're going to see the GridView component and we will also create an adapter there as well. So, if you want to, let's go ahead and create the adapter class without wasting any more time. We've got to get on with it. Alright. So, I just need to create a new class. And for this, I will select the Project package folder. 'Right-click', select the 'New', and 'Kotlin Class/File' from the options and make sure that the 'Class' option is selected here please. So, we have to determine the name of the adapter class that we're going to create. So, I'll define the name of the class as 'CountriesAdapter'. And I'll create my adapter class just by pressing the 'Enter' key. Cool.

What we need to do now is to create three array lists in the adapter class, just like in the Main Activity. So, for this, I can copy the arrays that we've created in the Main Activity and just paste them into the adapter class. Alright. Very good, very good. Now, we're got to create an object from the context class. And we're going to use the properties of the activity in this class. So, using the context object, we'll be able to show the toast message on the screen just by clicking on any one of the cards. Okay. So now, we're going to create a constructor for this class.  Constructor is the first method called when creating an object of any class. So, we will use the constructor to send the data that we created in the Main Activity to the adapter class. So, here we'll need to just create the constructor of the adapter class. Now, perhaps I should explain this. There are two different constructors in this Kotlin programming language, the primary and secondary constructors. You can use either one of these constructors, and I'll show you how. So, let's just create a constructor. I'll right click, choose 'generate', 'secondary constructor' for my option here, and select all the variables, click 'Ok'. So, that creates the secondary constructor. See, it's actually that easy to create a constructor, but like I'm saying this is the secondary constructor. You can also create a primary constructor if you want. You just mouse over the constructor keyword and select 'Convert to primary constructor'. So, you will automatically create the primary constructor as well. Now, if you do that, that means that you've got to delete the lateinit keyword here, you follow?

In a little while, when we want to create an object from the adapter class and the MainActivity, we are going to have to enter four different parameters. Otherwise, we wouldn't be able to create an object from the adapter class. So, by using this feature of the constructor, we can easily send the data in the MainActivity to the adapter class since we will display the data in the adapter class on the screen, the data needs to be transformed to the adapter class. So, after all this information about constructors, let's just continue from where we left off, and don't worry it will become crystal clear as you see it in action.

So, now we will create an inner class within this class. So, this class that we will create will represent the card design, and of course we will define the components in the card design in this class. So, I'm just writing the class keyword, I set the name of this class as CountryViewHolder. So, also this class will be derived from the RecyclerView.ViewHolder class. So,with this, after the : I will write RecyclerView.ViewHolder. So, what do we see here? Yes, Android Studio's warning us, why? Because we need to create a constructor for this class. So, for this all I do is click on the light bulb on the left, I'll choose the 'Add constructor parameter itemView' option. And thusly, my constructor has been created. And we also must specify the scope of this class using curly braces. So, now we can define right in here the imageView and the textView components that we use in our card view design. So, I'm writing var textViewCountryname : TextView =. And now I want to match this variable to its id, but here we can actually match directly using the findViewById method, like we did in the, all the way back in the MainActivity. So, to be able to use this findView by id method, we must first access the card design that we created, make sense? So, in other words we're going to make a match using the itemView object representing the card design. So, I'm writing itemView.findViewById, I'll write (R.id.textViewCountryName) Now, similarly, I matched the textViewDetails component with its id. And I'm writing var textViewDetails : TextView = itemView.findViewById and then I'll write (R.id.textViewDetails)

Now similarly, what I can do is, I can match the imageView component with its id. So, I'm writing in var imageView : CircleImageView = itemView.findViewById. I write (R.Id.imageView). See, so that way we define the components in the card design. Now we will drive the country's adapter class that we created from the RecyclerView.Adapter class. So, inside the tags here, I write CountriesAdapter.CountryViewHolder. Now look at that, Android Studio warns us again because there are methods that we have to implement. So, I take advantage of that by clicking on the 'light bulb' on the left and choose the 'Implement members' option. Now there are three different methods that we have to implement here, and we'll just add all of these methods. So, required methods were added. Let's just talk about these methods for a bit. So, the first method is this onCreateViewHolder method, right? So, as soon as the CountryViewHolder class we have created below is created, this method gets called. So, in this method, we'll define the card design that we've made. So, it's thanks to this method, we determine which design will be displayed in the recycler view. Now the second method, is the onBindViewHolder. And this method is also the method where we specify what should be done when the design we created is connected to recyclerView. So, in other words, we will show the data on the screen in recyclerView in this method.

Third method, is the get ItemCount method. So, in this method we will specify the amount of data that's going to be displayed in recyclerView, it's all right. So, let's do all of the necessary operations for this onCreateViewHolder method. First of all, I will create an object from the view class that I will transfer the card designed to, and then after that use the Layout.Inflater.from. And that's my method to link a design that we create to a view. So, I have to write (parent.context). So, here the parent object given as a parameter is the object of the view group which is MainActivity. And you can write here the context object that we created or (parent.context) here. So, when I write .inflate outside the parentheses. We will write three parameters in parentheses. The first is the card design that we made, so I write R.layout.card_design. Second parameter is the parent object here, and the third parameter will be false. And then finally, because this method will return an object from the CountryViewHolder class, I'll write return CountryViewHolder. And also I should write the view object in parentheses as the parameter. And then notice that the CountryViewHolder class has a constructor of type view, all right. So, that finishes this method. Now, let's do some of the necessary operations before the get ItemCount method. So, we've got three countries so far for this application, but we cannot know this number. If you're working with more complex applications, especially when you're retrieving data from the Internet or working with large complex databases, that's why we always write in here the size of the array that we created. So, I'll write return countryNameList.size.

So, now let's show some data on the screen. In the onBindViewHolder method, I will transfer the data in the arrays to the components. So, now let's write the country name and the textView country name component. Now of course we cannot directly access textView and imageView components here, right? For this we've got to use the holder object. So, I'll write the holder.textViewCountryName.text method and after the = I'll write countryNameList.get as my method. Then inside the parentheses I can write the variable position, and that will be given as a parameter. So, that way we print the country name in the textView component, all right. So, now let's show some detailed information on the screen. I'll write in holder.textViewDetails.text as the method. Then after the = I write detailsList.get. Inside the parentheses, I'll write the variable position given as the parameter. And then finally we can show some flags on the imageView components. So I'll write the holder.imageView.setImageResource method. I write the imageList.get method in parenthesis. And then inside the parenthesis, I write the variable position given as a parameter. There is one last thing that we'll need to do. We've got to send the data from the main activity to the adapter class. So, to do that, I need to create an object from the country's adapter class in the main activity. Here I will write Lateinit var. I define the name of this object as adapter and we will now define the adapter class after the array list methods. So, I write adapter = CountriesAdapter. Now I can write the four parameters in parenthesis because there are four parameters in the constructor that we created in the adapter class, right? So, for this I write countryNameList as the first parameter and I'll write detailsList as a second parameter, i'll write imageList as a third parameter, and now I have to write context as the last parameter. So, for this I'll write this@MainActivity as the context. Now finally, I can set the adapter object in the recyclerView. So, for this I'll write the recyclerView.adapter method then after the equal sign I can write the adapter object. All right, very cool. So, now we have transferred the data here to the adapter class. So, why don't we just run and test out the application and see what we get. All right, so there you see the application opens and you're looking at the country flags, the country name, and look at that detailed information. It's been created quite successfully if I do say so yourself. So, we have one last step left here. Now, whenever we click on each cardView component we should see a toast message right?

That tells us which category that we clicked on. All right, so why don't we just go ahead and do that now? So, we're going to create the process of showing this toast message in the recycler adapter class which is in the onBindViewHolder method because we have defined the cardView component here and we must do all of the operations concerning the cardView component here. Yes. So, we'll just do some necessary coding in the onBindViewHolder method. So, what do I do first, you know? Yeah, we just define the cardView component. So I'll write in here var cardView : CardView =. Now, I will match the CardView component with its ID. Now, I don't think that we have set the ID of the CardView component. So, let's set the ID right here, right now. So, I'll open up the card design, select a cardView component and I'm typing cardView in the ID section. Open the adapter class again and match the cardView component to each ID. And I'll write in itemView.findViewById(R.Id.cardView) in parenthesis. Now what do you think we ought to do? Yes, let's add a click listener to the cardView component in the onBindViewHolder method. So I'll write, holder.cardView.setOnClickListener. So, now we can create a toast message inside of the curly braces.

So, first of all we've got to determine which cardView component was clicked on. So I'll write, Toast.makeText. And I'll need to write in three parameters in parenthesis here. First one is going to be context. Of course you remember We created a context object from the context class at the very beginning of the adapter class, otherwise we wouldn't be able to create this toast message at all. Right, so let's write in our little message. And what's the message is going to be? "You selected the" and then after the plus sign, I am going to write countryNameList.get(position). All right, that way by using the position parameter, we'll get the country name in the clicked category.

Now, here look at this, I do want to show you something. So, do you notice the expression countryNameList.get(position)? That's going to give us a country name and it is a string expression. Now in addition,  the "You selected the" expression that we wrote in here, well, isn't that also a string expression? So, here what we've done is combine these two string expressions using just a plus sign. Now, Scotland also has a different way of doing this. If you were to put a dollar sign in here and put the code, countryNameList.get(position), in curly brackets you will no longer need to use the plus sign. That is, if you want an expression that you typed in double quotation marks to be perceived as code just use the dollar sign.

Cool. So, now let's write the third parameter. And the third parameter will be Toast.LENGTH_LONG. And then finally I can write .show outside the parenthesis. All right, all right, all right, so let's run this application, and test it out. Do you see the application opens? Now, click on the first category. That's the result expected and we've created the toast message. That's successful. So, you see my friends, this is how the recyclerView component is well, it becomes an integral portion of your app. Now, I know, it can get a little confusing but in general, these actions that we do are fixed and they're not going to really change much. So, in fact, let me just summarize what we've done together. First of all, you need to add one recyclerView component to the mainactivity.xmldesign. Then, you have to create one card design that you're going to show on the screen. You must also create an adapter class that then connects the design and the recyclerView component. And then finally, you just define your adapter to the recyclerView in the main activity. Okay, that's it, easy peasy, after some practice anyway, don't worry, you'll get it. Cool. So, we're going to have a short break here and I'll see you in the next video.

 

About the Author
Students
86
Courses
23
Learning Paths
1

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics