Well, hello everyone. So, we're going to talk about spinner in this video. So, spinner is an android component that we use in an android application development. Spinner opens a list, and then users can choose an item from the list. And when the user selects an item from the list, certain operations can start up with a selection. So, why don't we just go to Android studio and learn how it works.

Now I've created a new project for this lesson. Named this project as Spinner. You could also create a new project or continue with the previous one it's up to you. Now we're going to do an example in this video. So, the example project is going to go like this. So, there's a list of countries. So, when the user selects the country from the list, the country name will be written on the text view. For example if I select Germany on the text view, it's going to write Germany. So, if I select the Netherlands, on the text view you're going to see Netherlands. All right, so that's pretty much how a spinner works. Why don't we see the rest of it as we do the application. All right so, first we're going to add a text view component. I'll make the width of the text view component 300dp. Also going to make the height 50. Now let's set the text size to 20. And we'll change background color. And why don't we make the text color white. All right. So, finally let's center the text in the text view component, and I want to use the gravity property for this. I'll set the gravity value to center. So, we can add a spinner to the design area.

So, spinner is under the containers section. Also I'm going to change the width of the spinner to wrap_content. So, now we have a TextView and a spinner. And we will need to give an id to the components. So, for the spinner I'm just going to write spinnerCountry and for the Textview I will write result. And since our main layout is the ConstraintLayout we've got to determine the constraint values of the components. So, first I'm going to center all components horizontally. And after so, I think the TextView component I'll just press the 'Ctrl' key, on the keyboard and select spinner. So, now I can right click with my mouse and select the center horizontally option. And look at that as you can see that centers all the components horizontally. So, now let's determine the constraint values of the components in the vertical plane. Now I set the top constraint value of the TextView to 100, and I'll set the top constraint value of the spinner component to 20. So, after that I need to fill in the spinner. So, to fill in this spinner I need to create an array. Now I'm going to do this under the values folder in the strings.xml file. So, I'll open up this string.xml file, and as you can see one string is created here by default. Name of the string is app_name and its value is the application name, namely Spinner. So, now we will create an array of the type string here. For this I need to open up a new tag and choose the string-array option, and we have to give this array a name, and I'll write in countries. So, when I press the 'Shift' and '<' keys on the keyboard, it closes the tag.

We need to do that because we're going to add the country names into this array. So, each element that we add is called an item. So, I'm going to open up a new tag here, and this time I will choose the item option, and then I'll close this tag too. Now we can write the country names that we want to appear in the spinner between the item tag. So, the first country, I'm just going to make it England. Second, Netherlands. Third, Belgium. Fourth, Germany. Fifth, Finland. All right so, now we've got five items inside the country's array. So, the spinner's ready to go. The array, is also ready to go. So, let's go to the column side. First, thing I need to do is define the components I will write in here, lateinit var spinner: Spinner. And also, I will define the TextView, lateinit var result: TextView. Now inside the onCreate function. I have to match these variables to their ids; spinner = findViewById(R.id.spinnerCountry) result = findViewById(R.id.result) Now, I'll just take a moment to explain a pretty important topic here. So, we've got a spinner and an array. To transfer information from the array to the spinner, I'm going to need to create an adapter. So, in this case what is an adapter? So, let me just show you with a picture because it's very important. I want you to have a look at this in detail. We will use the adapter in some of the other components as well. So, now we're going to use this adapter for this spinner. But we'll also use it for, the list view and the grid view for some of the next videos. So, we will call the adapter and then what makes a connection between data set and a view. In this example, the data set is ArrayList and the view is spinner then we need to create an adapter between the ArrayList and spinner. And I'd do this in the main activity using colin code. All right so, in the on create function I will write var arrayAdapter =  after the equal sign I will write ArrayAdapter.createFromResources. The create from resource function, allows you to create an array adapter from the string array. All right. So, I needed to find three parameters inprinces vs context. I'll write this here. So, that means this adapter will work in this class. Also you can write application context or this at main activity for the context as well. So, the second, parameter is array id. I'll write R.array.countries, I defined array id to the adapter. So, the third argument for this method is a layout resource that defines how the selected choice appears in the spinner control. So, I'll write android.R.layout.simple_spinner_item So, the simple spinner item layout is provided by the platform and is the default layout that you should choose, unless you'd really like to define your own layout for the spinners appearance.

But, this you've got to learn about it first. So, now I'm going to need to specify the dropdown layout so, I'm going to write arrayAdapter.setDropDownViewResource. So, inside the (android.R.layout.simple_spinner_dropdown_item). So, the simple spinner dropdown item is another standard layout, defined by the platform. So, that makes the adapter ready. I just now need to assign this adapter to the spinner. So, how can I do this? What if I write, spinner.adapter = arrayAdapter. So, then these codes will fill in the spinner with the country's array. So, let's just check see if we've done it so far so good. The application opens, and you can see the spinner is filled in with the country names. So, let's just go over what we've done here. Do you know what we've done until now? We've created a spinner and a data set, and then we connected these spinner and data sets using the array adapter. So, then after all of that we need to do just one more thing. So, when the user selects a country from the spinner, the name of the country should be written in the text view. All right? So, that's where we need to continue. And to do that I'll add a listener to the spinner. But first we need to implement the adapterview. OnItemsSelectedListener. And this is an interface, it gets added to the main activity class. All right. So, that way when we implement this interface to functions that we will control the select process was going to be overwritten. So, we'll just do it now. I'll put in a comma right after the AppCompatActivity and write AdapterView after the dot. A code editor proposes the interface that we will implement. So, I select the OnItemsSelectedListener and press 'Enter'. And you can see that Android Studio gives a warning because there are two functions that we need to implement. Well, I'll just hover the cursor over MainActivity and from there, I select the 'Implement members' option. Now, you can see that there are two functions here.

I select both functions and press the 'Okay' button. And as you can see there are now two functions outside of the OnCreate method. Also the warnings are gone, so we can delete the ToDo statement inside these methods. All right, so let's examine these two functions. First one is, OnItemsSelected, another one is OnNothingSelected. So, I'm going to write my codes here. When the user selects an item from the spinner, this method will work. So now, let's look at the parameters here. The first parameter is the parameter of the AdapterView class. Also, I should mention that the parameter names here may be different for you but it doesn't matter. You can change these parameter names if you want to. You can even change the whole thing, I just write parent instead of p0. Second parameter is an object of the View class. So, we can also write a View here. The most important parameter is the third parameter because this parameter gives the index number of the clicked item in the array. So, using this index number we can determine which item was clicked. So that's why I'm going to write position here.

All right, so the ID of the item that was clicked in the last parameter. We can also write ID here. Now, let's print the name of the country that was clicked into the text view component. So I'll just write in here result.text = parent.getItemAtPosition. Inside the parentheses, I write position. Finally I write .toString. So, what's this code going to do? It's going to take the text of the item in the selected position. And after that I will assign this text to the text of the text view. Of course, you may notice there is a warning here and that's because a parameter in an AdapterView class 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. Now, the second method is to create an if statement here. So, if the parent is not equal to null, we should print the selected item in the text view component.

Now, there's one more thing to do. Within the OnCreate method, we must write, spinner.OnItemsSelectedListener = this, just below the line where we define the spinner. This keyword here is an instance of the interface that we're implementing. Follow? So in other words, when any item in the spinner is clicked, the operations that we described was just going to take place. So let's run it, and look at it again. So, the application opens when I select Netherlands in text view. You will see Netherlands. When I select Germany, it's going to write Germany in the text view. So, whichever item that I select from here, the name of the item is going to be written in the text view. So, that's what spinner is like. So I think that's enough for this video. I'll see you in the next video.