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

From Script | Spoken-Tutorial
Jump to: navigation, search
Visual Cue
Narration
Slide 1: Welcome to the Spoken Tutorial on Creating a Search App.
Slide 2:

Learning Objectives

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.
Slide 3:

System requirement

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
Slide 4:

Pre-requisites

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.

Slide 5:

Search App -Spoken Tutorial

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.

Open the Android studio from the launcher bar. Let us open Android Studio.
Click on Start a new Android project Click on Start a new Android Studio project to create a new project.
Type ST Search Enter a new application name as ST Search.
Show the demo on the interface Repeat all the steps as we did earlier.

Point to the company domain

We will keep the default value for the remaining fields.

Point to Project Location


Click on the Next button at the bottom of the window

Select Empty Activity >> click on the Next button.

Again click on the Next button
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.

Enter the Activity name as FirstActivity In the next window, enter the Activity name as FirstActivity.
Click on the Finish button Click on the Finish button at the bottom of the window.
Point to the IDE Now the Android Studio IDE opens.
Click on activity_first.xml file. Click on activity_first.xml file.

Delete the default Hello World TextView.

Show the image 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.

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.

Slide 6: Set the attributes

Show the table

Note the attribute values which I have given for the tools.

Assign the same value when you design the layout.

Slide 7:

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.
Slide 8:

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 Let us go back to Android Studio interface.

Go to FirstActivity.kt

var fossVsFossID = HashMap<String, Int>()

fossVsFossID.put("Java", 10)

fossVsFossID.put("Cpp", 57)

fossVsFossID.put("Python", 26)

fossVsFossID.put("RDBMS", 92)

Type the code below inside onCreate method.

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.

var languageVsLanguageID = HashMap<String, Int>()

languageVsLanguageID.put("English", 22)

languageVsLanguageID.put("Hindi", 6)

languageVsLanguageID.put("Gujarati", 5)

languageVsLanguageID.put("Tamil", 18)

languageVsLanguageID.put("Marathi", 12)

languageVsLanguageID.put("Kannada", 7)

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.

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.

var fossVsLanguage = HashMap<String, ArrayList<String>>() 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.

var availableLanguagesForFoss: ArrayList<String> Next, declare an array list to store languages of a particular FOSS, as shown.

We will use this ArrayList to fill our HashMap fossVsLanguage

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

fossVsLanguage.put("Java", availableLanguagesForFoss)

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.

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)

I’ll write the code for the remaining FOSS and its available language as shown.

We have stored all the required data.

var fossSpinner = findViewById<Spinner>(R.id.spinner1)

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

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 to quick fix the errors.

Do this whenever warning message appears.

Now we need to fill the spinners with their respective options.
var fossOptions = fossVsFossID.keys.toList() 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.

var languageOptions = languageVsLanguageID.keys.toMutableList() 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.

var selectedFoss = "none"

var selectedLanguage = "none"

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.

Now we will create adapters for the spinners which will fill the options into it.
var fossAdapter = ArrayAdapter<String>(applicationContext, android.R.layout.simple_list_item_activated_1, fossOptions) 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.

fossSpinner.adapter = fossAdapter Now we set this adapter to FOSS spinner.

fossSpinner.adapter = fossAdapter

var languageAdapter = ArrayAdapter<String>(applicationContext, android.R.layout.simple_list_item_activated_1, languageOptions)

languageSpinner.adapter = languageAdapter

Now we will do the same steps again for language spinner:
Next we will create item selected listener for spinners.
fossSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {

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

}

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


}

}

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.

Next we change the list of languages according to the FOSS selected.
languageOptions.clear()

selectedFoss = fossOptions.get(position)

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

languageAdapter.notifyDataSetChanged()

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.

languageSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {

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

}

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

selectedLanguage = languageOptions.get(position)

}

}

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.

Next we will write the code for Search button click.
searchButton.setOnClickListener {

}

Write the following code after the languageSpinner.onItemSelectedListener

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

Highlight the if block


Highlight the else block

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.

Highlight Second Activity 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.

Right-click on the app folder on the left side

Select New -> Activty -> Empty Activity

Right-click on the app folder on the left panel.

Select New -> Activty -> Empty Activity

Point to Configure Activity Configure Activity window pops up.
Enter the name of the activity as SecondActivity Enter the name of the activity as SecondActivity and click on the Finish button at the bottom of the window.
Click on activity_second.xml. Click on activity_second.xml.
Drag a TextView and set the attributtes 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

We will launch this second activity from the first activity when the user clicks on the Search button.
Click on FirstActivity.kt. Go to FirstActivity.kt.
Type the code:

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

putExtra("fossID", "" + fossID)

putExtra("languageID", "" + languageID)

}

startActivity(searchIntent)

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.

Click on SecondActivity.kt Go to SecondActivity.kt
var foss = intent.getStringExtra("fossID")

var language = intent.getStringExtra("languageID")

We write the code in onCreate method.

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

selectedOption.text = "Foss ID : " + foss + "\nLanguage ID : " + language Then we set the text of the TextView as shown here.

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

Click on the Run button Now run the Kotlin App.

Launch the ST Search App

Demo for output Select the Foss.

Select the Language.

Click on the Search button.

The FOSS ID and language ID is displayed as expected.
This brings us to the end of this tutorial. Let us summarize.
Slide 9:

Summary

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
Slide 10:

Assignment

As an assignment do the following.
  • Select various FOSS Id and Language Id in the App
  • Click on the search button
  • Check the output
Slide 11:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

Slide 12:

About workshops

The Spoken Tutorial Project Team

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

Slide 13:

Forum for specific questions:

Please post your timed queries in this forum.
Slide 14:

Acknowledgement

Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

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.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Android-app-using-Kotlin/C3/Creating-a-Search-App/English&oldid=47190"