Android-app-using-Kotlin/C3/Creating-a-Search-App/English-timed
From Script | Spoken-Tutorial
| |
|
| 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. |
