Lists & Views
The course is part of this learning path
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.
This course is intended for anyone who wants to learn how to start building their own apps on Android.
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.
Hello everyone. So, we're going to talk about Recycler View. The Recycler View is an advanced model of the List View. Now, of course you remember everything that we talked about when we practiced List View in the previous video. But the Recycler View is used to show a group of information to the user just like a List View. When a user clicks on one of the particular bits of information, Recycler View will do an action. It's got to be a particular action. The Recycler View gives the developer, well, a host of features to enable. You can see it on the right hand side in the picture here. All right, so this is a Recycler View. So, it's going to do an action when the user clicks on one of these items. Also, you can do your design in the Recycler View, so that's pretty cool too. This view of course shows information from top to bottom. A Recycler view can show information from both top to bottom and from left to right. So, what do you say we go on over to Android studio and how to create a proper Recycler View.
All right my friends, here we are. First of all I want to show you the finished version of this application that we have already made with Recycler View, just so that you can see where we're going. And here you can see the country flags in a circular image view. So again, we've got country names and related flag information. Of course this information is displayed in the Recycler View. So, we also create a card view design here and we're also going to try to use a Recycler View in conjunction with this card view. So, you'll be able to increase the number of categories here. Also when we click on any category, a toast message will be displayed and it'll be just indicating that we clicked on that particular country.
All right, so Recycler View offers us a lot more flexible operations compared to list view, but it's important to learn list view first, and now we're going to up the stakes a little bit. Now, if you notice this over here, you see how we can curl the corners of card designs, we can even leave space between the cards, we can color the cards. So, as just a small example. But because of this, I didn't want to add way more information because obviously there's a lot of information you can add into the Recycler View, but I do want to show you that it is ultimately configurable. All right so, let me show you this, you can also change this example into a phone number list. So, here you can show like pictures of your contacts for example, you can show the name of the contacts or phone number and if you want to, you can even build from this example. Go for it, you know how to improve it. Yes, so let's say that when a user clicks on a category, it will open a new activity and show even more information of the country or the person if it's a contact list or whatever. If you learn how to do this, you can definitely do more advanced designs for yourself and it's great. It's a lot of fun. Once you practice those basics, of course everything is up to you. But that's what our Recycler View application is going to be like. So, we just get to it, start making it up. I mean not making it up. Well all right, let's work together and do up a new project. So, first I am creating a new project, click on the 'File' tab in the upper left hand corner, click on the 'New' and the 'New Project' respectively. And then after selecting Empty Activity from the page it opens, I'll just click on the 'Next' button. Set the name of the project,
RecyclerView. You could probably type any name that you want to but you got to remember it tomorrow morning I'm telling you. Now the package name is going to be shown here. So, I'm not going to change the location where the project is going to be saved. No, that's up to you and your system but just remember. Okay, so the Minimum SDK set it to API 23 and then finally we start creating our project by clicking on the 'Finish' button. All right, so our project is currently being created and you might have to wait just a little bit at this stage. There it is, our project has now been created.
So, first we got to get into the design of our application. So, what I'll do is I'll open up the activity_main.xml page. All right, so we can close the project directory by clicking on the eye icon here. I can just choose the Show System UI option, and that way the design area will look like a phone screen. What do you say? So, now let's delete the text view component here. I've completely emptied out my design area, and we'll add a Recycler View component to the design area. After this, I'll choose the Recycler View component from the palette and here I have to express this. So, in order to use the Recycler View component, you need to add the material design library to your project.
Now in previous versions of Android studio you had to manually add this library into the dependency section in the great old build file in the project directory. But with the zippy new updates the material design library is now automatically added to the project. So, that is a lifesaver. Well okay, it's a time saver anyway. Okay, so we can then therefore use the Recycler view component directly. So, you should see a Download button right next to the Recycler View component here. So, just go ahead and click on that button to add the material design library required to use the Recycler View component to your project. All right. So, just as a sidebar you won't be able to use a Recycler View component if you don't do that.
Now, if you are using the current version of Android studio, the material design library is automatically added to your project and then you can just use a Recycler View component directly. So, I will now drag the Recycler View component and drop it in on the design area. All right, so as you can see it takes up the entire design area since our root element, that is the main layout is the constraint layout, I have to determine the constraint values of the Recycler View component. So, this I can pin the Recycler View component up, right, down, and left from the layout part in the attributes section. I also need to make sure that the constraint values remain zero so that they fill the screen completely. Now let's set the id of the Recycler View component.
All right, Recycler View right here on the top id section, and you can specify the id however you want, but I create the id just by pressing the 'Enter' key on the keyboard. Now actually, this is the design of the main activity. If we want to show some data in the Recycler View component, well, we've got to make a separate design for it, and then later we'll be able to import this design into the Recycler View with an adapter class, but at this point, the design that we're going to make is a card view design, you follow? So, let's go ahead and start making that necessary design.
So, first of all, I've got to create a new design file and for this, I'll just select the layout folder under the resource folder from the project directory and right click. So now, I'll choose New, Layout Resource File as my option from this drop down menu, and we will of course determine the name of the layout design we will create from the window that opens and I'll write card_design. That's right here in the final name section. So, we can leave the root element as ConstraintLayout. I'll press the 'OK' button without changing anything else. And what do you see? Well, I see a new design file has been created under the layout folder. So, whatever design that we want to appear on the screen, we've got to do that design right here in this layout.
Cool. So, now we can start making our necessary design. I mean close project directory and I'm going to just move the design area a little closer. All right, so first of all, we're going to add a card view component to the design area. And if you type card view into the search bar in the palette, you can see the CardView component. So, everything that I'd just explained for the RecyclerView, that is a material design library that's been added to the project. Well, that applies to the CardView as well. And again, in the previous versions we could use a CardView component manually by pressing the download button right here. But now, it just gets automatically implemented into the project. That means I can drag the CardView component, and poof drop it right into the component tree area this time. Component tree area, don't get lulled into any complacency here. So, you can drag it and drop components into the design area or the component tree, but you do have to know the difference.
Now, I just want to add the ImageView and the TextView components right into the design area. So, at this stage, I do need to tell you that we're not going to directly import components in the CardView. First of all we're going to place a layout inside the component. Then, we will transfer the components into this layout. And for that I'll just choose one more constraint layout from the palette, drag and drop it into the CardView component. Are you with me so far? Cool. So, now what we got to do is determine the height of the constraint layout component. And I'm just setting the layout height to 75, okay? And that means we've got to set the layout height of the CardView component to wrap content. And what do you see? The height of the CardView component is about 75.
Now, another point that you need to pay attention to is this. You should change the height of the constraint layout component which is the root element to wrap_content. Otherwise, only one CardView component is going to appear, right, on the entire screen. Anyway, you can figure that out, right? So, after doing all that, well, we can now transfer the ImageView and the TextView components right into the design area. Now, notice here that there is one ImageView and two TextViews in the design area. But the image view components are circular, not square, so that means our images will look like a circle.
So, to get this look, all we need to do is add a different library to our project. Okay, so, let me just open up my browser and show you how. So, just type in circle ImageView github in the search bar. And I'll just click on the first result. And if you scroll down the open github page, you can see the necessary library to show your images in a circle. Cool, so now we have to add that library here into our project. So, I'll choose the library here and copy it. Now, I'm going to open the build_gradle file under Gradle Scripts in android studio, and it's right in here in the project directory.
So, here we paste the library that we copied into the dependencies section. And after doing this, I'll press the sync now button in the upper right hand corner of the interface. And that way, we just added the relevant library to our project. And I see here that the sync is now complete, so we can go ahead and proceed. We're going to add an image view to the constraint layout component. Of course, this time we will not select the ImageView component from the palette, because if we select it from the palette, we're going to get a square ImageView instead of a circular ImageView.
So, I want to add my circle ImageView. I'll select this 'Split' option on the right, and open this section with the xml codes. So, I will create the circle ImageView component in the innermost constraint layout, you see that? And after creating the < sign and typing de, we can access the circle ImageView component. So, you can create the circle ImageView component just by selecting this component and changing its related properties. Now, the second method is this. On the github page where we have provided the relevant library, you can see the use of the circle ImageView component just below the library. So, you can just copy the xml code block here, and paste it into the tags of the constraint layout component on the xml side, all right? so that's it. Of course, we didn't transfer any of the images that we want to use in our project yet. So, let's now move the country flags to the drawable folder. So, I select the 'drawable' folder in the project directory and after right-clicking, I select the 'Open In' 'Explorer' as an option.
Now, from the window that opens, I'll just open a drawable folder, not the drawable-v24 folder, my friends, only the folder that says drawable. All right, so now I can select the three flags that I have previously obtained just out there from the innerwebs and I'm going to drag them into the drawable folder. So, that's how you transfer images that we're going to use into the drawable folder. Now, as you can see, three images have now been added to the drawable folder. And you can always view the images by double-clicking on one of them and we'll continue where we left off with the design. So, I can write the name of any of my images inside of the profile.
But, if you notice, we've determined the height of the constraint layout component to be 75. But here, the height of the image is 96. Therefore, part of the image is not going to be visible on the screen. So, what we'll do is change the height and width of the image to 60. Now also, did you notice that the components are marked in red? Because we are using the constraint layout, and we haven't pinned the components yet. So, we still haven't said their constraint values. Of course, if you want to, we can go ahead and determine the constraint values right now. So, I'll just choose the CardView component, pin it to the left, right, and up.
Now, let's pin the circle ImageView component, and I'll pin that to the left, and I'll center the circle ImageView component vertically. Now, did you notice that the margin start value of the ImageView component is zero? So, that's the left of the screen. But, I do want to leave some distance here. So, what I'll do is I'll just make the margin start value, I'll change it to five. Okay, so now let's add some TextView components. I'm going to select the TextView component from the palette and drag it into the design area. Now, let's add the second TextView component.
Cool, so now let's determine the constraint values of the TextView components. So, I'm going to pin the first TextView component to the left. I'll choose the second TextView component and pin it to the left as well. So, now what I'll do is select both TextView components, right-click, select 'Chains', 'Create Vertical Chain'. What? So, both TextViews will be connected to each other at equal distances vertically. It seems a lot easier to explain when you're looking at it as opposed to trying to explain it with your eyes closed. So, since there's going to be country names in the first TextView component, well, I want to make it more specific. So, the second TextView component can remain in the background. Therefore, I will choose the first TextView component. So first, I will determine its ID. All right, textViewCountryName. Now, let's increase the size and let's do 24. Wow, that's going to be obvious. And I also want to make the text color black. Now, how about that second TextView component? We're going to edit its ID to be textViewDetails, and press 'Enter' on the keyboard. Great, so now let's change the text size, I'm going to make that 16. I'm not going to change the text color. Just let it be. But finally, we are going to change the ID of the ImageView component, so I want to change it to imageView. Okay, so that's the roundabout general design. However, I would like to show you a couple of advantages of using CardView.
So, let's select the CardView component, and look at the attributes section. So, notice here the card corner radius property. So when you use this property, you can curl the corners of the CardView component. For example, I'm just going to make this value seven, and also by using the card elevation property, you can add a little bit of height to the CardView component, and that property could also be seven. Also, we could leave a little space between each CardView on the screens over this we can set CardView component. I'll write in marg into the search bar in the attributes section, and I'll make the layout margin value seven. Now as you can see, there's now some space around the edges of the CardView component.
That looks way better. So, we're also going to change the color of the CardView component, so that you can see this better. It's going to make a little contrast. So, after selecting the CardView component, you can change the background color just by using the background tint property. And of course, you can choose any color you want from the color palette here. If you want to, you can follow me, I'm going to choose yellow. And sure enough, if you pay attention to this, you can see the space and the edges, and the curl in the corners just like that. What do you think? Wow, that went by in a hurry. That completes our CardView design. I do want to show you one more feature though. In order to learn how the CardView design that we made is going to look in the RecyclerView in the activity_main.xml page after selecting the RecyclerView component. Well, we can select the card design that we made by using the list item feature from the attributes section.
See, that way we can just have a little preview, see in advance what our card's going to look like when it's displayed on the screen. All right, so that way when we run the application, our screen is going to look like this. Not a lot of surprise there, right? Cool, so that finishes the design of the app, my friends. We're going to take a short break here, and I'll see you in the next lesson.
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.