Difference between revisions of "Android-app-using-Kotlin/C3/Creating-a-Search-App/English"

Learning Objectives

• Create a Search App for Spoken Tutorial Project and
• Run the Kotlin App to see the output in an Android phone.

System requirement

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

Pre-requisites

• Java programming language and
• Android Studio

If not, then go through the relevant tutorials on this website.

Search App -Spoken Tutorial

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

Point to the company domain

We will keep the default value for the remaining fields.

Point to Project Location

Select Empty Activity >> click on the Next button.

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

Delete the default Hello World TextView.

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.

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.

Show the table

Assign the same value when you design the layout.

Spoken Tutorial – Data Identification

• 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.

Code Files

• 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

Go to FirstActivity.kt

fossVsFossID.put("Java", 10)

fossVsFossID.put("Cpp", 57)

fossVsFossID.put("Python", 26)

fossVsFossID.put("RDBMS", 92)

Here we store the FOSS and Language with their IDs 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.

languageVsLanguageID.put("English", 22)

languageVsLanguageID.put("Hindi", 6)

languageVsLanguageID.put("Gujarati", 5)

languageVsLanguageID.put("Tamil", 18)

languageVsLanguageID.put("Marathi", 12)

languageVsLanguageID.put("Kannada", 7)

Type the code as shown.

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

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

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.

We will use this ArrayList to fill our HashMap fossVsLanguage

fossVsLanguage.put("Java", availableLanguagesForFoss)

Type the code as I have done here.

JAVA course is available in English, Gujarati, Hindi and Kannada languages.

fossVsLanguage.put("Cpp", availableLanguagesForFoss)

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

fossVsLanguage.put("Python", availableLanguagesForFoss)

availableLanguagesForFoss = arrayListOf("English")

fossVsLanguage.put("RDBMS", availableLanguagesForFoss)

We have stored all the required data.

var languageSpinner = findViewById<Spinner>(R.id.spinner2)

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.

Type the code as shown here.

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

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.

var selectedLanguage = "none"

Type the code.

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

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.

fossSpinner.adapter = fossAdapter

languageSpinner.adapter = languageAdapter

override fun onNothingSelected(parent: AdapterView<*>?) {

}

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

}

}

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.

selectedFoss = fossOptions.get(position)

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

languageAdapter.notifyDataSetChanged()

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.

override fun onNothingSelected(parent: AdapterView<*>?) {

}

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

selectedLanguage = languageOptions.get(position)

}

}

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.

}

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

Highlight the else block

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.

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

Select New -> Activty -> Empty Activity

Select New -> Activty -> Empty Activity

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

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

putExtra("fossID", "" + fossID)

putExtra("languageID", "" + languageID)

}

startActivity(searchIntent)

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

Finally StartActivity method starts the activity.

var language = intent.getStringExtra("languageID")

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

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

Launch the ST Search App

Select the Language.

Click on the Search button.

Summary

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

Assignment

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

About Spoken Tutorial project

Please download and watch it

About workshops

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

Forum for specific questions:

Acknowledgement

More information on this mission is available at

this link.

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

Thanks for watching.