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

Lists & Views in Android App Development

Contents

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

The course is part of this learning path

ListView in Android App Development
Overview
Difficulty
Intermediate
Duration
1h 38m
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 ListView in this video. ListView. Well, it's used to show a list of items to the user. Now, you can see an example of it right here in the picture. For example, you can use ListView in a phone context application. You can show some phone numbers and names in the ListView. Now, when the user clicks a name, the phone calls that selected person. Or, you could just use ListView to message application, so you can show the messages in a list in ListView. You can give a lot of examples about using ListView. We don't have to go on with that, do we?

Because the logic here is important. You're going to show a list of items on the ListView, and when the user chooses an item on the list, it will do some kind of action. So, why don't we just go over to Android Studio and practice with it? Now, I've created a new project for this lesson. So, name of the project is ListView. So, you can create a new project yourself because it's always good to do practice or of course, you can continue with one of the previous projects. But yes, before we start to create ListView, I want to show you how it's going to look. So, when we're finished, it's going to look like this. You can see here, there's a country list, and when the user clicks on a country right here on the list, a toast message will appear. Hey, what do you think? You know how to do that. So, it's going to write which country is selected by the user. So, the user clicks; shows a toast message. Let's see how to do it. So, we've got a ConstraintLayout. Going to add a ListView on this layout. Where is ListView you ask? Well, it's under the 'Legacy' section. So, I'm going to drag and drop ListView, and now we've got a ListView. So, I want the ListView component to take up the entire screen. So, therefore, I will set all constraint values to zero. Now, let's see the idea of the ListView component should be ListView. So, after that we'll need to fill in this ListView. So, we're gonna need a list of items. So, what is our list of items? Well, in this example, it's country names. So, that means, I'm going to create an array with country names. Where do you remember that we create our array's in? So, I'm going to create it inside of strings.xml. So, it's going to be a strings.xml file under the values folder. So, I'll open the 'strings.xml' file. I created an array with country names before. Don't think I'm that magical. But if you remember, we did create a string array in the spinner section. So, you can do it yourself. Perfect. So, you're just going to write string-array and give a name to your array. And after that, you will write every country name between the two item XML tags. So, everything that you write between the two item XML tags will be an item of the array. Yeah, you got this. Now, I wrote 15 different country names here. Not that there are only 15 countries in the world, but you understand what I'm saying. So, in other words, my array has 15 items. So, now we have an array and we have a ListView. And we can go to the MainActivity.kt file now. And what I'll first do is define the ListView from here, and I'll write lateinit var listView : ListView. I'll write inside of the onCreate method, listView = findviewById(R.id.listView). So, we've defined ListView components, also we do need to access the string array that we created in the string.xml file, and we need to access it from here.

I'm sure you remember from the spinner lesson, we used the Create from resources function. Remember when we were defining the array adapter and one of the parameters of this function was the string array, and we've created that in this string.xml file. So, you can still use that method here. But this time, I want to show you a bit of a different way. So, first we're going to access the array that we created in that string.xml file, then will create the adapter. So, I'm going to create a new variable. Here, I'll write countryList; after the equal sign, I'll write resources.getStringArray. So, I'll write (R.array.countries) in parentheses. Thus, we transfer the array that we created in the string.xml file right into the country list. So, we defined ListView and the array. So, after all that, we need to connect this ListView and the array to each other. How do you do that? That's right. We'll use an adapter for this. So, what is the adapter?

The adapter connects a data source and a view. Right to each other. The data source in our case this time is country list. The view is ListView. So, that means I'll need to create this adapter, so I'll write it in here var arrayadapter = ArrayAdapter. So, now the adapter is going to take three different parameters. The first one is context; that means where this adapter is going to be working. So, I'll just write in here this, remember? this; the this. The this keyword. So, that means it's going to work in this class. Second one is the ListView layout. And I do need to define how items will be seen in the ListView. Now, of course, you're going to be predefined layout designs, and all I need to do is choose one of them. So, I just write in here android.R.layout.simple_list_item_1. And the third one is the array name. So, I'll just write in here countryList because the array name is countryList.

Now after that, I'll need to assign this adapter to the ListView. So, I'll write listView.adapter = arrayAdapter. That's it. The ListView is now ready to populate. So, we filled in the ListView. Let's just run it and see. So, the application opens. Now we transfer country names in the ListView. But look at this, when I click on an item on the list, nothing happens. It needs to show a toast message. What country did I click? Now, we did fill in the ListView, but we did not define what's going to happen when the user clicks an item. So, let's do that right now. So, I'll need to add a listener to the ListView, so I'll write it in here listView.setOnItemClickListener, I select the listener with the curly brackets next to it. So, right here you see that there are four parameters, and we also saw these parameters when we added the ClickListener to the spinner. So, we can change the name of the parameters to make them more meaningful to us right here; we can change the first parameter to parent. I'm not going to change the name of the second parameter; I'm going to leave that as is. But let's also change the third parameter, and we're going to make that position. Now, seriously though, do you remember? This parameter gives us a position of the clicked item. And that way we can detect which item was clicked in the list. And then finally, we'll just change this parameter to id. So now, we can write in some necessary code in curly brackets. So, just write here parent.getItemAtPosition; inside the parentheses, I write position. So, now when I click on an item on the lists, it's going to return an integer. So, if I click on the first item, it's going to return what number? Zero. And if I click on the second item, it returns one. Third item, it'll return two, and so on. So, it means that we're going to take the text of the item that gets clicked on from the ListView. So, I'll need to convert it to string. And because of this, I just add in here .toString.

So, now we took the text of the item that I click on and convert it to string. After that, I need to assign it to a string container. So, I'll create a string, and its name will be countryName. Now notice though, that I used val instead of var when I was creating this variable. l could also create a variable using the val keyword, but you cannot assign a different value to this variable later. That's the difference. In general, it would be more accurate, yes, to define the variables that you will use in one place as val. But mostly, I use the keyword var instead of val because you can change the value of the variables that you create using the var keyword later. So, that's just a handy tip. But now see, I can create a toast message and I'm going to write Toast.makeText. Hey, I should be giving you this for homework? Okay, no homework. Just study well, my friends. But here, check it out. The toast message takes three parameters and of course, we went over this before in the toast messages video. But to refresh your memory, the first one is application context, second one is message, and I'll write my message inside a quotation marks, and the message is "You selected the" + countryName. So, that way, whichever country gets chosen, it's going to write first you selected, and then after that, it'll add in the country name. Now, the last parameter is how much time it's going to stay up on the screen. So, what do you think? I will write Toast.LENGTH_LONG, and lastly, .show. So, it's now ready to go. Let's run it again. And the application opens. Let's see what happens when I click England. Hey, it writes a message: You selected England. What happens if I click Netherlands? It writes: You selected the Netherlands. Germany? You selected Germany. How does it know what I'm doing? All right, my friends. That's pretty cool. That's ListView. And of course, that's enough for right now. So, I'm going to end it here, and I want to see you in the next video because we've got more to build on.

 

About the Author
Students
47
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