PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Search App.''' |- | 00:06 |..."

2020-10-13T10:34:14Z

Created page with " {| border=1 | <center>'''Time'''</center> | <center>'''Narration'''</center> |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Search App.''' |- | 00:06 |..."

New page

{| border=1
| <center>'''Time'''</center>
| <center>'''Narration'''</center>
|-
| 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 '''ID'''s 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.

|}

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

PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Search App.''' |- | 00:06 |..."