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

GridView

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

Well, hello everyone. So, we're going to talk about GridView in this video. So, the GridView shows items in a two-dimensional grid. Now, you probably already figured that one out. But you can design rows and columns in GridView. Well, okay. That might be a plus. It is similar to the RecyclerView and ListView. Okay. So, maybe it's going to be easy. But let me tell you this. You got to remember that items are shown from top to bottom. All right? All the way down in a ListView. In a RecyclerView, items are shown vertical or horizontal. But you can choose just one orientation. So, in the GridView, you can choose two-dimension to show items. You can see a GridView design in the picture here. You can see that the items are listed both horizontally and vertically. And here you can define the number of columns and rows. So, I'll show you how to do that as we practice. All right? Now, before we get started, I just want to show you what this is going to look like in the end. So, you see here we've got nine pictures and underneath the pictures, I just wrote in some of the names of the pictures, right?

So, if I were to click on a picture, toast message will show which animal that I've just clicked on, right? Now, this right now is a three column GridView. And actually the purpose of all the views is pretty much the same. But the aim here is to show data. And when the user selects one of the boxes, it's going to do this action. Every view shows data in a different way. So, you will be able to decide which view that you want to use according to whichever project you're working with.

All right. So, let's get in there and see how we can play around. So, here I've created a new project for this lesson. The name of the project is GridView. You can create a new project or continue the previous project. Entirely up to you. No judgment here. So, now let's add a GridView into the design area. And you can find the GridView under the Legacy section. I'm going to drag a GridView, drop it into the main activity. And if you look at it carefully, it looks like the ListView. All right. Wait. Did I drag the right thing? I will define some of the features on the xml page. I will be able to define the number of columns. I want three columns. Also, I can set the gravity property to center. And I'll give an ID to this GridView. Let's have the ID be GridView.

Also, since our main layout is ConstraintLayout, let's determine the constraint values of the GridView component right here. So, I'm going to set all constraint values to zero. And that way, it's going to cover the whole screen. All right. So, now we have a three column GridView, and I'll define this GridView in the main activity. So, right here, lateinit var gridView : GridView Now, on the onCreate method. All right. gridView = findViewById(R.id.gridView) Now, I'll need to create two array list. And these are for the pictures and the animal names. So, I'll create it here. The first one is a string array list, and that will be for the names. And let's just say then, name of that is nameList. Second one is an integer array list for images. And this name can be imageList.

Okay. So, now I'm going to need to fill in these array lists. And I will do that by creating a new method below. So, I write fun_fillArrays You can name it anything that you want. Of course. Now, you can even do this directly in the onCreate method without creating a new function. But we did it in the onCreate method in the previous lesson. So, in this lesson I wanted to give you a new way to do it, a new perspective, and that is by creating this new function. All right? So, now I can start to fill it in. And I will write here, nameList.add Inside the quotation marks, I will write animal names. And let's have the first animal be Bird.

Now, I've got nine different animals. So, I will duplicate this code just by pressing my 'Control' and 'D' key together eight times. Right? So, the second animal can be Cat. Third animal, let's have it be a Chicken. Fourth animal, Dog. Fifth animal, fish. Sixth, Monkey. Seventh, Rabbit. Eighth animal is got to be a Sheep. And the ninth animal, let's have it be a Lion. Okay. So, now I need to fill in the image array. But before I continue that, I will need to add images to the project. So, for that, I need to open the drawable folder. Paste my picture inside this folder. And I will share with you the projects that we did in the lesson, so that way you'll be able to access all the pictures that we've used in the lesson.

All right. So, let me just continue with that. So, I'll write, imageList.add Inside the parenthesis, I'll write, R.drawable.bird All right? Now, I can copy and paste this nine times. And I'll just change it. So, the second image can be cat. Third one will be chicken. Fourth one will be dog. Fifth, fish. Then monkey. Seventh image should be rabbit. Eighth one, sheep. And then we'll finish off with the ninth image, it'll be lion. All right. So, after finishing filling in your arrays, I'm just going to call this function in the onCreate method. Right? Cool. So, that means the GridView is now ready. The arrays are ready. We will need to create an adapter class. So, I just right click on the project package folder and select 'New Kotlin Class/File' Go ahead and just give it a name, AnimalsAdapter Also, this adapter class will extend the base adapter.

All right. So, after the colon sign, I'll just write in BaseAdapter. So, what you're looking at here is the code editor. Again, gives us a warning because there are some methods that we need to implement. And for this, we just click this little lamp and that will implement the methods. So, I select the 'Implement members' as my option. And I'll select all methods. Click 'OK'. And see how that will implement four methods. So, now we have the getCount method, getItem method, getItemId method, and the getView method.

Cool. So, in the getCount method, let's write in the number of items to be displayed in the GridView. So, in a getItem method, we can get the data associated with a specified position in the dataset. In the getItemId method, well, we can get the row ID associated with the specified position in the list. We will not be using the getItem and getId methods. That's why I'm just writing in return 0. So, here I'm writing return null. Now, I should also put in a question mark next to the Any statement here.

So, the question mark. Well, it just indicates that the returned value can be of a different type. So, in the getView method, we're going to define the special design that we will create for the items that we will display on the screen. Now, before we continue in the adapter class, I want to show you how to do another thing. So, you know that every item in the GridView has its own layout, right? So, that means we need to create this layout first. For that, I just right click the 'layout' folder, select the 'New Layout Resource File'.

Now, I'm going to need a name for this layout file, right? So, the name has got to be custom_layout; for me anyway. Also, I'm going to change the Root element to LinearLayout. Now, you can also work with a ConstraintLayout, but since we're going to make just a simple design, it's going to be easier to use LinearLayout, and you'll see why. Click 'OK'. And now here's where I can design this layout. So, inside this layout, I will need one ImageView, one TextView. So, let me just add in an ImageView. And I will select an image for default. Also for a TextView. So, I'm going to continue on the xml side. I will change the height and width and the imageView to 100. And let's go ahead and define the id; it can be imageView. And then the width of the TextView can be "wrap_content". Also, I'll make the text color just black. And lastly, the idea of the TextView can be "TextView".

So, now you can see what it looks like here with the design, and it gives you better idea of what you want to do. So, I'm just going to set the gravity property of the linear layout right to the center. Also, I'm going to give it a padding value. I'm going to make it 8. So, what that'll do is I'll give "8dp" of space for every side of the layout. Now, that finishes the layout design, and let's just continue the adapter class. Now, in the adapter class, just needed to define some variables. First one will be context. So, I'll write lateinit var context: Context. Secondly, I'll need to define array lists in here too, so I'll just copy the array lists and the main activity and paste them right into the adapter class.

Cool. So, after that I need to create the constructor for this class. So, I'll right click here. Select 'generate secondary constructor' and select these three variables. Click 'OK'. So, Android Studio creates the constructors automatically, just like that, but I will convert this secondary constructor into the primary constructor. Remember I showed you that, you just mouse over to the constructor keyword, select, 'Convert the primary constructor.' That way, your primary constructor gets automatically created as well. Remember what else I told you though? You also have to delete the lateinit keyword. All right, very good. So, after that, I need to change this.

Now, do you remember from the RecycleView, if this is zero, the GridView will be empty. So, it should be the number of the element. I'll just write in here, nameList.size, and that will return the number of elements of that NameList array. So, after that, we'll continue with the getView method. And let's say that we want to change the parameter names here first because that way it's not really very clear what they represent. So, I'm just going to write position instead of P0. if you follow that right. So, we can write convertView instead of P1. We can also write parent instead of P2. All right, so now we can continue where we left off knowing our clear way forward.

First of all, I'll create an object from the view class that I will transfer the custom design to. And then after the equal sign, we can use the LayoutInflater.from() method to link a design that we created to a view. I have to write (parent.context) right here in parenthesis. But the parent object given as a parameter is the object of the view group, right? That is the main activity. And you can write here the context object that we created, or (parent.context) here, either one. So, then I'll write .inflate outside the parentheses. And we will write three parameters in parentheses. So, I'll write, (R.layout.custom_layout. Second parameter is the parent "object" here. Third parameter will be "false."

Now, of course, you may notice there is a warning here, and that's because the parent object here can return null. So, here we need to prevent my app from crashing, in the case of returning null, and we can do this in two different ways. First is to put a double exclamation mark here. All right, so this statement guarantees that the parent object will never be known. All right, so now using the view object that we created, we will define the imageView and the TextView components that we'll use in the custom design. So, I'll write, var animalName: TextView = view.findViewById(R.id.textView). Now to define the imageView: var animalImage: ImageView : = view.findViewById(R.id.imageView). And then after that, I need to assign data to this TextView, as well as the image ImageView, right? So, first I'm going to assign the TextView, animalName.text = nameList.get(position).

Now, instead of the get method here, you could also use square brackets. The purpose here is to access the elements of the array using the position variable. That is the index number. As can do this by using the get method or by typing the position variable in square brackets. So, it's going to take the data from the nameList array, set it to the text view, and I will also do the same for the ImageView, animalImage.setImageResource(imageList.get(position)) And then we can sneak in here the return view. All right, so now the adapter class is ready. So, once that's done, I'll create an object of this adapter class in the main activity, var adapter = AnimalsAdapter. That's going to take three parameters. The first one is "context." I'll write the the "this" keyword. Second one is the "nameList." Third one is the "imageList." And you can see the parameters here again: context, nameList, imageList. Cool.

So, after that, I'm going to set this adapter to the gridView. gridview.adapter = adapter. See how easy it is once you know it? All right, so let's just run it and see. Now, we have the application open. Yes, we've got nine pictures. Under each of the pictures, write the names of the pictures. Now, I do want to show you something here. So, I'm going to change the size of the ImageVew. So, let's say 150dp, and we're going to run it again. So, you see all the pictures are bigger now; we just changed one imageView size and all of the pictures are bigger. Cool.

So, this GridView has three different columns. Why don't we change it? So, I'm going to write here 2, and we'll run it again and see what changes. Now, the grid view has two columns. All the pictures are not seen on the screen but it did create a handy scroll bar automatically. And that way you can scroll from top down, see all the different pictures. Now, we do need to do one more thing. When we click an item, it should show a toast message, right? So, we need to add a listener to the GridView. So, if you go into the onCreate method, I'll write gridView.setOnItemClickListener. And of course, you remember these parameters from the ListView lesson, right? We'll change the names of the parameters now and I'll write a position here and I'll also write id here.

Now, we've got to create a toast message in curly brackets. So, I'll write Toast.makeText because parameter will be "applicationContext." And after that, what's the message going to be? Now, let's have the message read "You selected $, remember I told you about that, right? So, after the $, {nameList [position]} And it's going to take the selected item name from the array and add it into the message. I also mentioned this writing style in the previous lesson, you remember? If you want to write code in a string expression, you do have to use a dollar sign. And Toast.LENGTH_LONG).show(). Cool. So, let's run that all again. And you see how it works. So, when I click on an item, it shows a toast message. Now, the important thing here is, even if I click the text, it's still going to show this toast message. All the layouts have a listener. You follow? Cool. So, you can use the GridView to do really good designs in your projects. All right, so we're finished here. I want to 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