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

Nancyvarkey at 03:31, 26 April 2019

2019-04-26T03:31:18Z

Nirmala Venkat at 07:21, 24 April 2019

2019-04-24T07:21:07Z

Nirmala Venkat: Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
2019-04-16T05:54:27Z

Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent..."

New page

{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Visual Cue'''</center>
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Narration'''</center>
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 1:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Welcome to the''' Spoken Tutorial''' on''' Creating a Search App.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 2:

Learning Objectives
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial we will learn to

* Create a '''Search App''' for '''Spoken Tutorial Project '''and
* Run the '''Kotlin''' '''App''' to see the output in an '''Android''' phone.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 3:

System requirement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| To record this tutorial, I am using

* '''Ubuntu Linux 16.04''' operating system
* '''Android Studio''' version 3.x and
* '''Android Phone '''with minimum of '''Android''' OS version '''4.03'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 4:

Pre-requisites

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| To follow this tutorial, you should have basic knowledge
* '''Java programming language '''and
* '''Android Studio '''
If not, then go through the relevant tutorials on this website.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 5:

Search App -Spoken Tutorial
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial, we will create a '''Search App.'''

Using this '''App''', the user can search and find video tutorials from the '''Spoken Tutorial server.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the '''Android studio '''from the launcher bar.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Start a new Android project'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Start a new Android Studio project''' to create a new '''project'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type ST Search
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter a new '''application''' name as '''ST Search.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the demo on the interface
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Repeat all the steps as we did earlier.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|

Point to the company domain
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|

We will keep the default value for the remaining fields.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|

Point to Project Location

Click on '''Next '''button
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''Next '''button at the bottom of the window

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|

Select '''Empty Activity >> '''click on the '''Next''' button.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Again click on the '''Next '''button

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The next window is '''Add an activity to Mobile'''.

I’ll select '''Empty Activity '''and then click on the '''Next''' button at the bottom of the window.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the Activity name as '''FirstActivity'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the next window, enter the '''Activity name''' as '''FirstActivity.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''Finish''' button

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''Finish''' button at the bottom of the window.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the IDE
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now the '''Android Studio''' '''IDE''' opens.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''activity_first.xml''' file.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''activity_first.xml''' file.

Delete the default '''Hello World TextView'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the image
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| I have designed the '''app''' with two '''TextViews''' for '''FOSS''' and '''Language'''.

There are two '''Spinners'''. One to select the '''FOSS''' and another to select the '''Language'''.

A '''Search''' button to click and find the desired output.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Pause the tutorial and design the '''layout''' as shown here.

Make sure that required '''constraints''' are added to position and align '''elements''' to other '''elements'''.

You can refer to the previous tutorials in this series for this task.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 6: Set the attributes

Show the table
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Note the '''attribute''' values which I have given for the tools.
Assign the same value when you design the '''layout'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 7:

Spoken Tutorial – Data Identification
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * Every '''FOSS '''in '''Spoken Tutorial''' has an '''ID '''associated with it.

* Each '''language '''also has an '''ID '''associated with it.

* These '''IDs''' fetch the related videos from the '''Spoken Tutorial web server.'''

* Those particular videos are displayed for the user to watch using the''' ST Search app.'''

|-
| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 8:

Code Files

| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * 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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us go back to Android Studio interface.

Go to '''FirstActivity.kt'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''<nowiki>var fossVsFossID = HashMap<String, Int>()</nowiki>'''
'''fossVsFossID.put("Java", 10)'''

'''fossVsFossID.put("Cpp", 57)'''

'''fossVsFossID.put("Python", 26)'''

'''fossVsFossID.put("RDBMS", 92)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code below inside '''onCreate method'''.

Here we store the '''FOSS''' and '''Language''' with their '''ID'''s in '''HashMap data structure,''' as shown.

The '''key '''and '''value '''pair are declared as '''String''' and '''Int data type'''.

Here '''Key''' will be '''FOSS name''' and '''value''' will be '''FOSS ID.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var <nowiki>languageVsLanguageID = HashMap<String, Int>()</nowiki>'''

'''languageVsLanguageID.put("English", 22)'''

'''languageVsLanguageID.put("Hindi", 6)'''

'''languageVsLanguageID.put("Gujarati", 5)'''

'''languageVsLanguageID.put("Tamil", 18)'''

'''languageVsLanguageID.put("Marathi", 12)'''

'''languageVsLanguageID.put("Kannada", 7)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will write '''HashMap''' for languages and their '''IDs'''.

Type the code as shown.

Here '''key '''will be '''language''' and '''value '''will be '''language ID.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| When we select a '''FOSS''', the '''language spinner''' should populate only the languages available for that '''FOSS'''.

So, we need to create a dynamic '''spinner''' for this.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var <nowiki>fossVsLanguage = HashMap<String, ArrayList<String>>()</nowiki>'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code as shown.

Here we have declared a '''HashMap '''with '''String '''and''' ArrayList.'''

Here, '''key '''will be the '''FOSS''' and '''value '''will be the '''ArrayList''' of its available languages.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var <nowiki>availableLanguagesForFoss: ArrayList<String></nowiki>'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, declare a temporary '''array list''' to store languages of a particular '''FOSS,''' as shown.

We will use this '''ArrayList''' to fill our '''HashMap''' '''fossVsLanguage'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''availableLanguagesForFoss = ''arrayListOf''("English", "Gujarati","Hindi", "Kannada")'''

'''fossVsLanguage.put("Java", availableLanguagesForFoss)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| First we will write the code to fill '''ArrayList''' with languages for one '''FOSS'''.

Type the code as I have done here.
'''JAVA course''' is available in''' English, Gujarati, Hindi '''and''' Kannada '''languages'''.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''availableLanguagesForFoss = ''arrayListOf''("English", "Gujarati", "Hindi","Kannada", "Marathi", "Tamil")'''

'''fossVsLanguage.put("Cpp", availableLanguagesForFoss)'''

'''availableLanguagesForFoss = ''arrayListOf''("English", "Hindi")'''

'''fossVsLanguage.put("Python", availableLanguagesForFoss)'''

'''availableLanguagesForFoss = ''arrayListOf''("English")'''

'''fossVsLanguage.put("RDBMS", availableLanguagesForFoss)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| I’ll write the code for the remaining '''FOSS''' and its available language as shown.

We have stored all the required data.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var <nowiki>fossSpinner = findViewById<Spinner>(R.id.</nowiki>''spinner1'')'''

'''var <nowiki>languageSpinner = findViewById<Spinner>(R.id.</nowiki>''spinner2'')'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next let us create an '''object''' for both the '''spinner''' tool as shown.

You may see an error or warning in the code, which is highlighted in red color.

Keep the cursor on the code and press Alt+Enter keys.

to quick fix the errors.

Do this whenever warning message appears.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we need to fill the '''spinners''' with their respective options.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var fossOptions = fossVsFossID.keys.''toList''()'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We need a list of available '''FOSS''' options.

Type the code as shown here.

This code will extract the '''keys''' of '''HashMap''' '''fossVsFossID''' to get the list of '''FOSS''' options.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var languageOptions = languageVsLanguageID.keys.''toMutableList''()'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Likewise, we can extract the keys of '''languageVsLanguageID''' '''HashMap''' to get the list of languages.

Write the code as shown.

Here we are converting it to a '''mutable list'''.

So we can change the list according to the '''FOSS''' selected.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var selectedFoss = "none"'''

'''var selectedLanguage = "none"'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will create two '''variables''' to store the selected '''FOSS''' and languages:

Type the code.

We set these '''variables''' to '''none''' so that no option is selected initially.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will create '''adapters''' for the '''spinners''' which will fill the options into it.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| var <nowiki>fossAdapter = ArrayAdapter<String>(</nowiki>''applicationContext'', android.R.layout.''simple_list_item_activated_1'', fossOptions)
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| First we create an '''adapter''' for the '''FOSS spinner'''.
Write the below code.

We are using '''simple_list_item_activated_1 method''' to highlight the option which is selected.

We pass the '''fossOptions''' list as the '''data'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''fossSpinner.''adapter ''<nowiki>= </nowiki>fossAdapter'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we set this '''adapter''' to '''FOSS spinner.'''

'''fossSpinner.''adapter ''<nowiki>= </nowiki>fossAdapter'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var languageAdapter<nowiki> = ArrayAdapter<String>(</nowiki>''applicationContext'', android.R.layout.''simple_list_item_activated_1'', languageOptions)'''

'''languageSpinner.''adapter ''<nowiki>= </nowiki>languageAdapter'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will do the same steps again for '''language spinner:'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will create''' item selected listener '''for '''spinners'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''fossSpinner.''onItemSelectedListener ''<nowiki>= </nowiki>object : AdapterView.OnItemSelectedListener {'''

'''override fun <nowiki>onNothingSelected(parent: AdapterView<>?) {</nowiki>'''

'''}'''

'''override fun <nowiki>onItemSelected(parent: AdapterView<>?, view: View?, position: Int, id: Long) {</nowiki>'''

'''}'''

'''}'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| First we create a '''listener''' for '''FOSS''' with the required '''methods''' inside it.

Keep the cursor on '''AdapterView''' and press '''Alt+Enter '''keys. Then select '''import''' from the list.

Place the cursor on the object and press '''Alt+Enter'''

Select''' implement members''' from the available list.

Add the required methods as shown here.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we change the list of languages according to the '''FOSS''' selected.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''languageOptions.clear()'''

'''selectedFoss = fossOptions.get(position)'''

'''languageOptions.addAll(ArrayList(fossVsLanguage.get(selectedFoss)))'''

'''languageAdapter.notifyDataSetChanged()'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Write the below code inside '''onItemSelected method''':

First let us clear the list which was already present for languages.

This code gets the '''FOSS''' from its position and saves it in '''selectedFoss variable'''.

We extract the '''ArrayList '''from '''fossVsLanguage''' '''hashmap'''.

Then we fill '''languageOptions''' with the languages.

'''notifyDataSetChanged method''' is used to refresh the '''dataset''' whenever '''data''' has been changed.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''languageSpinner.''onItemSelectedListener ''<nowiki>= </nowiki>object : AdapterView.OnItemSelectedListener {'''

'''override fun <nowiki>onNothingSelected(parent: AdapterView<>?) {</nowiki>'''

'''}'''

'''override fun <nowiki>onItemSelected(parent: AdapterView<>?, view: View?, position: Int, id: Long) {</nowiki>'''

'''selectedLanguage = languageOptions.get(position)'''

'''}'''

'''}'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we create a second '''adapter''' for '''language spinner'''.

For this we write the below code after the '''foss.spinner.''onItemSelectedListener block'''''

Here I have aligned the code for better view.

Inside '''onItemSelected method''', the language that has been selected, is stored in the '''selectedLanguage variable'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will write the code for '''Search button '''click.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''searchButton.setOnClickListener {'''

'''}'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Write the following code after the '''languageSpinner.''onItemSelectedListener'''''

Any '''code''' written between the '''blocks '''get executed when the '''Search button''' is clicked.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We write an '''if else '''code inside this '''on click listener block''' to check if the user has not selected any option.

In the''' if block''' if nothing is selected, a short pop-up error message is displayed with''' Toast method.'''

And in the '''else block''' we extract the '''FOSS ID '''and '''Language ID '''of the selected options.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will create a new activity called '''Second Activity'''.

Here the selected '''FOSS''' and '''Language''' is shown as the output in the new window.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Right click''' on the '''app '''folder on the left side

Select '''New '''-> '''Activty '''-> '''Empty Activity'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Right click''' on the '''app '''folder on the left panel.

Select '''New '''-> '''Activty '''-> '''Empty Activity'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to Configure Activity
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Configure Activity''' window pops up.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the Activity as '''SecondActivity'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the activity as '''SecondActivity''' and Click on the '''Finish''' button at the bottom of the window.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''activity_second.xml.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''activity_second.xml.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag a '''TextView '''and set the attributtes
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will display the''' FOSS ID '''and '''Language ID''' in a '''TextView'''.

Drag a '''TextView''' and drop it in the center of the '''layout editor'''.

Set the '''constraints''' and align the size as shown.

Remove the''' text attribute''' and keep the '''TextView''' as empty.

Change the '''ID''' to '''selectedOption'''.

Change the '''textAppearance attribute''' to '''material.large'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will launch this second activity from the first activity when the user clicks on the '''search''' '''button'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''FirstActivity.kt.'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Type the code:'''

'''var searchIntent = Intent(this, SecondActivity::class.''java'').''apply ''{'''

'''putExtra("fossID", "" + fossID)'''

'''putExtra("languageID", "" + languageID)'''

'''}'''

'''startActivity(searchIntent)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Inside the '''else block''' at the end, write the below code.

In the '''Intent object, putExtra method''' adds the '''FOSS ID''' and '''Language ID.'''

Finally '''StartActivity method''' starts the activity.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''SecondActivity.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''SecondActivity.kt'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var foss = ''intent''.getStringExtra("fossID")'''

'''var language = ''intent''.getStringExtra("languageID")'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We write the code in '''onCreate method'''.

Here we used the '''intent object''' to get the '''fossID''' and '''languageID''' from the first activity.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''selectedOption.''text ''<nowiki>= </nowiki>"Foss ID : " + foss + "\nLanguage ID : " + language'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Then we set the text of the '''TextView''' as shown here.

This will change the '''TextView''' to show the '''FOSS ID''' and '''language ID'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the Run button
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now run the '''Kotlin App.'''
Launch the '''ST Search''' App

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Demo for output
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Select the '''Foss'''.

Select the '''Language'''.

Click on the '''Search button'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The '''FOSS ID''' and '''language ID''' is displayed as expected.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| This brings us to the end of this tutorial. Let us summarize.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 9:

Summary
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial we learnt to

* Create a '''Search app''' for '''Spoken Tutorial'''
* Run the '''Kotlin App''' to see the output in an '''Android''' phone

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 10:

Assignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| As an assignment do the following.

* Select various '''FOSS Id '''and''' Language Id''' in the '''App'''
* Click on the search button
* Check the output

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 11:

About Spoken Tutorial project

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 12:

About workshops

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The Spoken Tutorial Project Team

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

|-
| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 13:

Forum for specific questions:
| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Please post your timed queries in this forum.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 14:

Acknowledgement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The '''Android app '''and the script for this tutorial was contributed by Abhishek Shah.

And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.

|}

@@ Line 131: / Line 131: @@
 Spoken Tutorial – Data Identification
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * Every '''FOSS '''in '''Spoken Tutorial''' has an '''ID '''associated with it.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
 * Each '''language '''also has an '''ID '''associated with it.
@@ Line 144: / Line 145: @@
 Code Files
-| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * The source code used in this tutorial are available in the Code files link of this tutorial page
+| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
 * Please download and make use of it when you are practising
 |-
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us go back to Android Studio interface.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us go back to '''Android Studio''' interface.
 Go to '''FirstActivity.kt'''
@@ Line 206: / Line 208: @@
 |-
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var <nowiki>availableLanguagesForFoss: ArrayList<String></nowiki>'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, declare a temporary '''array list''' to store languages of a particular '''FOSS,''' as shown.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, declare an '''array list''' to store languages of a particular '''FOSS,''' as shown.
 We will use this '''ArrayList''' to fill our '''HashMap''' '''fossVsLanguage'''
@@ Line 216: / Line 218: @@
 Type the code as I have done here.
-'''JAVA course''' is available in''' English, Gujarati, Hindi '''and''' Kannada '''languages'''.'''
 |-
@@ Line 238: / Line 242: @@
 '''var <nowiki>languageSpinner = findViewById<Spinner>(R.id.</nowiki>''spinner2'')'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next let us create an '''object''' for both the '''spinner''' tool as shown.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next let us create an '''object''' for both the '''spinner''' tools as shown.
 You may see an error or warning in the code, which is highlighted in red color.
-Keep the cursor on the code and press Alt+Enter keys.
+Keep the cursor on the code and press '''Alt+Enter''' keys to quick fix the errors.
-−
 to quick fix the errors.
 Do this whenever warning message appears.
@@ Line 325: / Line 327: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| First we create a '''listener''' for '''FOSS''' with the required '''methods''' inside it.
-Keep the cursor on '''AdapterView''' and press '''Alt+Enter '''keys. Then select '''import''' from the list.
+Keep the cursor on '''AdapterView''' and press '''Alt+Enter '''keys.
-Place the cursor on the object and press '''Alt+Enter'''
+Then select '''import''' from the list.
 Select''' implement members''' from the available list.
-Add the required methods as shown here.
+Add the required '''methods''' as shown here.
 |-
@@ Line 348: / Line 352: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Write the below code inside '''onItemSelected method''':
-First let us clear the list which was already present for languages.
+First let us clear the '''list''' which was already present for languages.
 This code gets the '''FOSS''' from its position and saves it in '''selectedFoss variable'''.
-We extract the '''ArrayList '''from '''fossVsLanguage''' '''hashmap'''.
+We extract the '''ArrayList '''from '''fossVsLanguage hashmap'''.
 Then we fill '''languageOptions''' with the languages.
@@ Line 393: / Line 397: @@
 |-
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Highlight the if block
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We write an '''if else '''code inside this '''on click listener block''' to check if the user has not selected any option.
@@ Line 401: / Line 409: @@
 |-
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Highlight Second Activity
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will create a new activity called '''Second Activity'''.
@@ Line 407: / Line 415: @@
 |-
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Right click''' on the '''app '''folder on the left side
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Right-click on the '''app '''folder on the left side
 Select '''New '''-> '''Activty '''-> '''Empty Activity'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Right click''' on the '''app '''folder on the left panel.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Right-click on the '''app '''folder on the left panel.
 Select '''New '''-> '''Activty '''-> '''Empty Activity'''
@@ Line 419: / Line 427: @@
 |-
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the Activity as '''SecondActivity'''
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the activity as '''SecondActivity'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the activity as '''SecondActivity''' and Click on the '''Finish''' button at the bottom of the window.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name of the activity as '''SecondActivity''' and click on the '''Finish''' button at the bottom of the window.
 |-
@@ Line 442: / Line 450: @@
 |-
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will launch this second activity from the first activity when the user clicks on the '''search''' '''button'''.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will launch this second activity from the first activity when the user clicks on the '''Search''' button.
 |-
@@ Line 496: / Line 504: @@
 Select the '''Language'''.
-Click on the '''Search button'''.
+Click on the '''Search''' button.
 |-

@@ Line 72: / Line 72: @@
 Point to Project Location
-   Click on '''Next '''button
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''Next '''button at the bottom of the window