In this video, I will show you how to provide a list of items for the user to choose from and how to offer your app in multiple languages. We will be using the example provided by the Block02 application. In this application, the user is presented with a list of animals, and when he clicks on one animal there is a small pop-up message at the bottom, which indicates the name of the animal which was picked. If I change the setting of this phone so the language is French, the name of the animals are translated, and if I click on one animal the text of the pop-up message is translated as well. Start a new Android Studio project. Call your application Block02, click Next, Next again, pick an Empty Activity, Next, and Finish. Let's start with the XML file for the layout. There is already a TextView, except that it reads "Hello world" instead of "Pick an animal", so let's change that. I will edit the XML file directly, I delete "Hello world", and I replace it by "Pick an animal". And here you notice this little, yellow light bulb here, and if I click on it I can choose to "Extract string resource". What does it mean? Let's do that. In fact, instead of hard-coding my string here, I will define it in a separate file called strings.xml. And here I will only give a pointer to this file. So my resource name, that will be the text prompt. Let's say that it's TextView_prompt. And then I click OK. And see that here my text is replaced by, instead, a reference. If you want to see what is the text of the TextView, then you need to look at @string in the strings.xml file and look for the string which is labelled TextView_prompt. So, let's go to this strings.xml file. You will find it here in the 'resource' folder, in the 'values' subfolder. Here is our strings.xml file. So, then I click to open it. And here you can see that we already have in fact two strings that are defined already. One that defines the name of the application, and the second one, the one we've defined, called TextView_prompt, and which value is "Pick an animal". And you see here that I can edit a translation for a different language using the translation editor. So let's open that up. You click here, to the right, on the 'Open Editor'. Now I can add a language here by clicking on the little Earth symbol, and I'll add French locale. Okay. And here all the keys values which were not translated into this second language appear in red here, so I need to translate this one. I double-click here, and I enter the French translation for "Pick an animal", which is "Choisissez un animal". Okay, if I move back to the activity_main.xml and I look at the result in the design view, here in English... (Maybe I should put that a little larger.) In English, it reads "Pick an animal", and if I click here on the little earth symbol, I can change the locale to French. And you will see that the text you read now is "Choisissez un animal". Okay, let's go back to English. And we have much more strings to define in our application, so let's do that right now. So you can either enter the string here, like that, for instance. So I need a new string. Let's say the name will be "dog". Okay, in the default language, in English, it should display "Dog". Okay, so that's one way of doing it. And I can also do the same using the translation editor. So since I'm working with a dog, let's write the French translation, which is "chien". And then I can add more strings using the plus symbol here. So let's add one for the cat. In English, that will be "Cat". Okay, and let's translate that to "chat". Next, we add a "Pig" in English; it translates to "cochon" in French. And the last one, last animal on our list was horse, which in French is "cheval". Okay, now we have all our strings which are defined. You can define strings, but you can also define arrays of strings. And that will come in handy later in our application because we want to display a list, and a list can feed on an array of strings. So let's define a string array. So it's a string-array, I need to give it a name, so let's call it 'animalsArray'. animalsArray... And then I need to define the different items, the different elements that make up this array. Remember that before, in the xml file, to refer to something defined in the strings.xml file, I've used this construction @string/ and then the name of the key. I'll do exactly the same in here. I want to refer to the first element of my array, this would be the dog, I want to refer to this string. So I just need to write @string/, and then the name of the key of the string here, which is "dog". And let's do the same for the three others animals. So, I've got @string/cat. I've got the item @string/pig. And the last one, the last item is @string/horse. Okay. Now I need to add a ListView to my graphical interface. So you find that in the Containers section. I'll put it right beneath the TextView. And now I need to somehow associate the array of strings with the name of the different animals in it to this ListView. So in order to do that, I'm going to edit the MainActivity.java file now. So first I need to retrieve a reference to the ListView. So, I'll create a ListView object. Let's call it listViewAnimals, and then I'll use the findViewById method, to retrieve this list. Sorry, id.ListView. And now, I need to create an adaptor in order to feed my ListView with the content of the string array we defined in the strings.xml file. So in order to do that I create an ArrayAdapter. This array adapter will contain a string or a characters sequence. Let's call it, adapterAnimals for instance, ...animals. And there is a special method to directly create an array adaptor from a resource such as the string array that we defined earlier. So you can just choose 'create from resource', then provide a context -this-, and then the name of the array you want to adapt. So it's R.array.animalsArray. And then you also need to provide the layout. Android lets you specify different ways of displaying each item in your list. We'll use one of the default ones, which is the "simple list item". So android.R.layout.simple_list_item_1. Okay. So now that I have my adapter I can fill my list with it. So listViewAnimals.setAdapter. adapterAnimals. Okay, now let's look at the results on the emulator. That's my message here, my TextView "Pick an animal", then I've got the list of animals. Now, let's change the interface to French. So in order to do that, I need to go into the Settings and look for the Language & input section, and here I need to change language here to French. Okay. Now let's go back to our application, Block02. Okay, now it is displayed in French. But here when I click an item of the list, nothing happens, because we didn't associate any action with that. So I'm going to show you how to do it. Let's go back to the Java code. One way of attaching action to a view is to add a listener to this view. That's what we're going to do here. So I take the listViewAnimals, and then I attach to it an OnItemClickListener. So I can either define an object which implements this interface in a separate class or I can decide that it's my main activity which implements the OnItemClickListener, like we did in the previous video. Or I can just create an anonymous object here. That's what I'm going to do. new OnItemClickListener, and I just have to define the OnClickItem method. So we want to display a little pop-up message when the user selects an item in the list. So let's first define the message that we want to display to the user. So there will be a string message, but first it can reads "Ok", for instance. Now let's create the toast message. I'm using the Toast class with the makeToast static method. I provide the context and then the message to display which is message. And the third parameter is for how long I want the message to be displayed. I want a short period. And don't forget to call the show method, otherwise nothing will happen. Okay, let's check if this is working. I'll run on the emulator again. So now when I click on an item, I've got the pop-up message at the bottom of the screen. But now, I would like the item picked to appear in the text of the pop-up message. So let's go back to the code in order to add that. So here, you see that when an item is clicked and this method is called, I'm given the position of the item which was clicked by the user. So I can use this index to find the appropriate message, appropriate string, in our array of strings here. So, the message will be "OK", plus the item in adapterAnimals at position, at the index position. Item at position. Okay, and also, I don't want to print "OK" both in French and in English. I want a different text here. As before, I put my cursor here and then I choose 'extract string resource'. That will be our toastMessage, this will be the key for our string. And then let's edit the strings.xml file. Open the translator, it's open already. Okay, so the text message in English will be "You picked... such and such animal, and in French that would be "Vous avez choisi" and followed by the name of the animal. I put a space character here. Okay, so let's try it out. Okay, so when I click on "chat": "Vous avez choisi chat" And let's move to English. When I click on dog: "You picked dog". In this video, you've learned how to provide your application in multiple languages. The first thing to do is to separate the definition of your message strings from the structure of your application. To do so, you define a set of keys and values in the strings.xml file, and then you can refer to the strings that you've defined there, either from your XML code using the @string followed by the name of the key, or in your Java code by using R.string.the name of the key. Then you can use a translations editor on the strings.xml file in order to first define additional locale for your application, and then, for each string that you've defined, provide a translation. In this video, you've also learned how to provide a list of items to the user. So for that you can use the ListView, which is a container view. And you will use an ArrayAdapter to feed the list. The ArrayAdapter will provide both the content of the of the list by taking it from an array, it will also provide the layout to be used to render the different items on your list. If you want to react to the selection of an item of the list, then you just need to add an OnItemClickListener.
