Android-app-using-Kotlin/C3/Creating-a-Search-App/English-timed

Time	Narration
00:01	Welcome to the Spoken Tutorial on Creating a Search App.
00:06	In this tutorial we will learn to
00:09	Create a Search App for Spoken Tutorial Project and
00:13	Run the Kotlin App to see the output in an Android phone.
00:19	To record this tutorial, I am using
00:22	Ubuntu Linux 16.04 operating system
00:26	Android Studio version 3.x and
00:30	Android Phone with minimum of Android OS version 4.03
00:36	To follow this tutorial, you should have basic knowledge
00:40	Java programming language and Android Studio
00:46	If not, then go through the relevant tutorials on this website.
00:51	In this tutorial, we will create a Search App.
00:55	Using this App, the user can search and find video tutorials from the Spoken Tutorial server.
01:02	Let us open Android Studio.
01:06	Click on Start a new Android Studio project to create a new project.
01:12	Enter a new application name as ST Search.
01:17	Repeat all the steps as we did earlier.
01:21	We will keep the default value for the remaining fields.
01:25	Click on the Next button at the bottom of the window
01:29	Again click on the Next button
01:32	The next window is Add an activity to Mobile.
01:37	I’ll select Empty Activity and then click on the Next button at the bottom of the window.
01:44	In the next window, enter the Activity name as FirstActivity.
01:50	Click on the Finish button at the bottom of the window.
01:55	Now the Android Studio IDE opens.
01:59	Click on activity underscore first dot xml file.
02:04	Delete the default Hello World TextView.
02:08	I have designed the app with two TextViews for FOSS and Language.
02:14	There are two Spinners. One to select the FOSS and another to select the Language.
02:21	A Search button to click and find the desired output.
02:26	Pause the tutorial and design the layout as shown here.
02:31	Make sure that required constraints are added to position and align elements to other elements.
02:39	You can refer to the previous tutorials in this series for this task.
02:44	Note the attribute values which I have given for the tools.
02:49	Assign the same value when you design the layout.
02:53	Every FOSS in Spoken Tutorial has an ID associated with it.
02:59	Each language also has an ID associated with it.
03:04	These IDs fetch the related videos from the Spoken Tutorial web server.
03:10	Those particular videos are displayed for the user to watch using the ST Search app.
03:17	The source code used in this tutorial are available in the Code files link of this tutorial page Please download and make use of it when you are practising
03:29	Let us go back to Android Studio interface. Go to FirstActivity dot kt
03:37	Type the code below inside onCreate method.
03:42	Here we store the FOSS and Language with their IDs in HashMap data structure, as shown.
03:50	The key and value pair are declared as String and Int data type.
03:55	Here Key will be FOSS name and value will be FOSS ID.
04:00	Next we will write HashMap for languages and their IDs.
04:05	Type the code as shown.
04:08	Here key will be language and value will be language ID.
04:13	When we select a FOSS, the language spinner should populate only the languages available for that FOSS.
04:20	So, we need to create a dynamic spinner for this.
04:24	Type the code as shown.
04:27	Here we have declared a HashMap with String and ArrayList.
04:32	Here, key will be the FOSS and value will be the ArrayList of its available languages.
04:39	Next, declare an array list to store languages of a particular FOSS, as shown.
04:46	We will use this ArrayList to fill our HashMap fossVsLanguage
04:52	First we will write the code to fill ArrayList with languages for one FOSS.
04:58	Type the code as I have done here.
05:01	JAVA course is available in English, Gujarati, Hindi and Kannada languages.
05:08	I’ll write the code for the remaining FOSS and its available language as shown.
05:14	We have stored all the required data.
05:18	Next let us create an object for both the spinner tools as shown.
05:24	You may see an error or warning in the code, which is highlighted in red color.
05:30	Keep the cursor on the code and press Alt+Enter keys to quick fix the errors.
05:37	Do this whenever warning message appears.
05:41	Now we need to fill the spinners with their respective options.
05:46	We need a list of available FOSS options.
05:50	Type the code as shown here.
05:53	This code will extract the keys of HashMap fossVsFossID to get the list of FOSS options.
06:02	Likewise, we can extract the keys of languageVsLanguageID HashMap to get the list of languages.
06:11	Write the code as shown.
06:14	Here we are converting it to a mutable list.
06:18	So we can change the list according to the FOSS selected.
06:23	Now we will create two variables to store the selected FOSS and languages:
06:28	Type the code.
06:30	We set these variables to none so that no option is selected initially.
06:36	Now we will create adapters for the spinners which will fill the options into it.
06:42	First we create an adapter for the FOSS spinner.
06:46	Write the below code.
06:48	We are using simple underscore list underscore item underscore activated underscore 1 method to highlight the option which is selected.
06:59	We pass the fossOptions list as the data.
07:03	Now we set this adapter to FOSS spinner.
07:07	Type fossSpinner.adapter equal to fossAdapter'
07:12	Now we will do the same steps again for language spinner:
07:17	Next we will create item selected listener for spinners.
07:22	First we create a listener for FOSS with the required methods inside it.
07:28	Keep the cursor on AdapterView and press Alt+Enter keys.
07:34	Then select import from the list.
07:38	Place the cursor on the object and press Alt+Enter
07:43	Select implement members from the available list.
07:47	Add the required methods as shown here.
07:51	Next we change the list of languages according to the FOSS selected.
07:56	Write the below code inside onItemSelected method:
08:04	First let us clear the list which was already present for languages.
08:09	This code gets the FOSS from its position and saves it in selectedFoss variable.
08:16	We extract the ArrayList from fossVsLanguage hashmap.
08:22	Then we fill languageOptions with the languages.
08:27	notifyDataSetChanged method is used to refresh the dataset whenever data has been changed.
08:35	Now we create a second adapter for language spinner.
08:40	For this we write the below code after the foss.spinner.onItemSelectedListener block
08:49	Here I have aligned the code for better view.
08:53	Inside onItemSelected method, the language that has been selected, is stored in the selectedLanguage variable.
09:02	Next we will write the code for Search button click.
09:06	Write the following code after the languageSpinner dot onItemSelectedListener
09:13	Any code written between the blocks get executed when the Search button is clicked.
09:19	We write an if else code inside this on click listener block to check if the user has not selected any option.
09:28	In the if block if nothing is selected, a short pop-up error message is displayed with Toast method.
09:36	And in the else block we extract the FOSS ID and Language ID of the selected options.
09:44	Next we will create a new activity called Second Activity.
09:49	Here the selected FOSS and Language is shown as the output in the new window.
09:55	Right-click on the app folder on the left panel.
10:00	Select New Activty 'Empty Activity'
10:06	Configure Activity window pops up.
10:10	Enter the name of the activity as SecondActivity and click on the Finish button at the bottom of the window.
10:18	Click on activity underscore second dot xml.
10:23	We will display the FOSS ID and Language ID in a TextView.
10:28	Drag a TextView and drop it in the center of the layout editor.
10:33	Set the constraints and align the size as shown.
10:39	Remove the text attribute and keep the TextView as empty.
10:44	Change the ID to selectedOption.
10:48	Change the textAppearance attribute to material dot large
10:53	We will launch this second activity from the first activity when the user clicks on the Search button.
11:00	Go to FirstActivity.kt.
11:03	Inside the else block at the end, write the below code.
11:08	In the Intent object, putExtra method adds the FOSS ID and Language ID.
11:15	Finally StartActivity method starts the activity.
11:20	Go to SecondActivity dot kt
11:23	We write the code in onCreate method.
11:27	Here we used the intent object to get the fossID and languageID from the first activity.
11:34	Then we set the text of the TextView as shown here.
11:39	This will change the TextView to show the FOSS ID and language ID.
11:44	Now run the Kotlin App. Launch the ST Search App
11:51	Select the Foss.
11:54	Select the Language. Click on the Search button.
12:00	The FOSS ID and language ID is displayed as expected.
12:06	This brings us to the end of this tutorial. Let us summarize.
12:12	In this tutorial we learnt to Create a Search app for Spoken Tutorial
12:19	Run the Kotlin App to see the output in an Android phone
12:24	As an assignment do the following.
12:27	Select various FOSS Id and Language Id in the App
12:32	Click on the search button Check the output
12:37	The video at the following link summarises the Spoken Tutorial project. Please download and watch it
12:45	The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests. For more details, please write to us.
12:56	Please post your timed queries in this forum.
13:00	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
13:12	The Android app and the script for this tutorial was contributed by Abhishek Shah.
13:19	And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off. Thanks for watching.

Contributors and Content Editors

PoojaMoolya