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

From Script | Spoken-Tutorial
Jump to: navigation, search
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