Nirmala Venkat: Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
2019-06-27T12:13:38Z

Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent..."

New page

{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Visual Cue'''</center>
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <center>'''Narration'''</center>

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 1:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Welcome to the''' Spoken Tutorial''' on''' Display Search Result.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 2:

Learning Objectives
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial we will learn to

* Use '''RecyclerView''' to display the thumbnail of videos
* Get the thumbnail from a specific '''Spoken Tutorial YouTube URL'''
* Pass the '''videoID''' of the selected '''Spoken Tutorial'''
* Run the '''Kotlin''' '''App '''and
* Display the thumbnail of the selected video
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 3:

System requirement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 4:

Pre-requisites
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 5:

Recap
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * Earlier, we '''parsed''' the '''JSON data''' received from the '''server'''
* The '''data''' is stored in an '''arraylist finalResultsArrayList'''
* We will use this '''arraylist''' to display the searched result to the user

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the '''Android studio '''from the launcher bar.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on ST search
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the project''' ST Search.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Click on activity_second.xml'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''activity_second.xml'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will use the tool '''RecyclerView''' to display the thumbnail of videos.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In palette search box, type '''RecyclerView.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette''' search box, type '''RecyclerView.'''

Then drag the '''RecyclerView''' to the layout.

'''Add project Dependency''' pop up box appears.

Click on '''Ok''' button to accept the dependency.

Wait until the '''Gradle build''' is finished.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 6:

'''RecyclerView'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| * '''RecyclerView '''recycles''' '''the visible views on the screen to show new views.
* When we scroll, it will use the same place to display new images.
* This way '''RecyclerView''' is '''efficient '''and '''faster.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Switch back to '''Android Studio'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us switch back to '''Android Studio''' interface.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type unique ID as '''videos_recyclerview'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Attributes''' window, in unique '''ID '''type '''videos_recyclerview.'''

Join the top '''constraint''' of '''RecyclerView '''to the bottom''' '''of the '''Selectedoption''' '''TextView.'''

Align the other '''constraints''' of '''RecyclerView''' as shown here.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| demo

Change its '''layout_width''' and '''layout_height''' attribute to match_constraint

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Change its '''layout_width''' and '''layout_height attribute''' to '''match_constraint '''
It helps to adjust the space occupied by the '''RecyclerView'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will create our own custom layout file which will be used to fill a single item of '''RecyclerView'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| click on '''app''' then select '''New '''<nowiki>=> </nowiki>'''XML '''<nowiki>=> </nowiki>'''Layout XML File'''

In the Layout File Name, type '''my_customlayout '''and click on Finish button.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| On the top left panel, under '''project''', go to '''app.'''

Right-click on '''App''' then select '''New '''<nowiki>=> </nowiki>'''XML '''<nowiki>=> </nowiki>'''Layout XML File'''

'''Configure Component '''window appears.

In the '''Layout File Name,''' type '''my_customlayout '''and click on '''Finish '''button'''.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''my_customlayout.xml'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A new file '''my_customlayout.xml '''is created'''.'''

In this we will create a custom '''view''' for the '''RecyclerView'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''LinearLayout'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Component Tree '''panel, we already have '''LinearLayout''' as '''root''' in the '''layout''' file.

The '''LinearLayout''' will stack the items either horizontally or vertically.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the attribute panel, set the '''layout_height '''of '''LinearLayout''' to '''wrap_content.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| First, let us set the '''layout_height '''of '''LinearLayout''' to '''wrap_content''' in the '''Attribute '''panel.

'''wrap_content '''will expand or shrink according to the space required while adding the tools.

After this, the '''LinearLayout''' will only occupy height as much as it is required.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, we need to display thumbnail of each video in each list item.

So, now we will add an '''ImageView''' in the '''layout'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the palette, type '''ImageView.'''

Drag and drop it on the '''Linear Layout''' in the''' component Tree'''.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette''', search for '''ImageView.'''

Drag and drop it on the '''Linear Layout''' in the '''component Tree.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open '''drawable''' >> '''project''' and select '''ic_launcher'''

Give a unique ID : '''video_thumbnail'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A '''Resources''' dialog box opens.

On the left side, under '''drawable''', click '''project,''' then select the image '''ic_launcher '''and click on '''OK''' button.

In the '''Attribute''' window, type '''video_thumbnail'''

in the '''ID''' field.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we need a '''TextView''' to show the title of the video.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag a '''TextView''' and drop it in the''' component tree''' on '''video_thumbnail.'''

Point to the image view
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| So, drag a '''TextView''' and drop it in the '''component tree''' on''' video_thumbnail.'''

The '''ImageView''' and '''TextView''' are embedded together.

In the output, we can see the thumbnail of the video in the

'''ImageView.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''Textview''' in the '''linear layout'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In '''LinearLayout''', there are no '''constraints'''.

The '''Textview''' places itself in the '''LinearLayout.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type '''video_title as''' unique ID

Change the '''textAppearance''' attribute of '''TextView''' to '''AppCompat.Display1'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| As a unique '''ID''' for the '''TextView''' we will type '''video_title.'''

Change the '''textAppearance attribute''' of '''TextView''' to '''AppCompat.Display1'''

The text will look larger now.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We need one more '''TextView''' to show the '''video level''' which are '''Basic, Intermediate''' and '''Advanced'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Add a '''TextView '''and''' '''give a unique ID as '''video_level'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag a '''TextView''' and drop it in the '''component tree''' on '''video_title'''.

As a unique ID to this '''TextView''' we will type '''video_level.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Change the '''orientation '''of '''my_customlayout.xml LinearLayout '''to '''vertical'''

Change its '''ID attribute to itemLinearLayout.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''LinearLayout''' on the''' Component Tree'''.

In the '''Attributes''' window, change the '''orientation''' of '''LinearLayout''' to '''vertical'''.

This changes the '''TextView''' and '''ImageView''' orientation to vertical position.

Change its '''ID attribute''' to '''itemLinearLayout.'''

This '''ID''' will be used in '''on click listener method '''later.

Our custom layout is ready.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Change''' layout_width of ImageView to match_parent'''

'''layout_height to 200dp.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we’ll change the size of the image so that it looks larger.

So change the '''layout_width '''of '''ImageView '''to '''match_parent'''

We will also change the''' layout_height''' to 200dp.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We require an '''adapter''' to populate this custom '''layout''' in our '''RecyclerView''' now.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''app => java => com.example.searchapp'''
Right click on '''com.example.searchapp'''

'''Select New => Kotlin File/Class'''

Type name as '''MyAdapter''' and click on '''OK.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| On the top left panel, under '''project''',

Click on '''app=> java''' => '''com.example.spoken.searchapp'''

Right-click and select''' New => Kotlin File/Class'''

In the pop-up window, type the name as '''MyAdapter''' and click on '''OK '''button'''.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to''' MyAdapter.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A new file gets created under the hierarchy, named '''MyAdapter.kt'''

In this, we will write the '''Kotlin''' code for the '''Adapter'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''MyAdapter.kt'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the below code.

What we have done is, we have created a '''class MyAdapter.'''

'''mContext '''is the '''context''', that is the '''application''' which is used to fill the thumbnail images.

'''videoList '''will contain the list of all videos of type '''VideoItem class.'''

On compiling, the '''constructor''' for the values in the brackets, are created automatically.

So we don’t need to do that.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Point to the error'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The code shows error.

It is because we have not yet '''declared MyViewHolder class '''and '''implemented '''the required '''methods'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

'''class MyViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView)'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| So first we will declare''' MyViewHolder class.'''

Type the code inside '''MyAdapter class''' as shown.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we '''implement''' the required '''methods'''.

First we will create the '''onCreateViewHolder method.'''

Type this code for the '''method'''.

Here we created a '''view''' having '''my_customlayout.xml''' and '''returned''' it through '''MyViewHolder class.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will create the next required '''method '''which is '''onBindViewHolder.'''

Type the following code below '''onCreateViewHolder method.'''

Press Alt+Enter keys and resolve the warnings.

We will use the '''position variable''' to know which item we are filling.

We first get the '''VideoItem object '''which is being filled currently in '''singleVideoItem'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Here we set the text of the '''video_title '''and''' video_level''' from the '''singleVideoItem’s '''values.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next step is to fill the thumbnail image into the '''ImageView'''.

We can get the thumbnail from a specific '''spoken tutorial YouTube URL.'''

The '''URL''' has this format:
[https://i.ytimg.com/vi/videoId/sddefault.jpg https://i.ytimg.com/vi/videoId/sddefault.jpg]

So we will use the '''URL''' and pass the '''videoID''' for which we need the thumbnail image.

We have used '''Picasso''', to load the image into '''video_thumbnail ImageView.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We have created '''setOnClickListener method''' for''' linear layout''' and named it as '''itemLinearLayout'''

When the thumbnail is clicked, it will play the '''YouTube''' video in the '''ThirdActivity'''.

We have not created the '''ThirdActivity '''and so it shows an error now.

We pass the '''videoID''' and '''videoTitle''' to the '''ThirdActivity''' by '''putExtra method.'''

We have added a required flag of '''Intent.FLAG_ACTIVITY_NEW_TASK.'''

This is required by '''YouTube''' activity.

Then we start the '''intent''' using '''mContext variable.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the next '''method getItemCount '''below '''onBindViewHolder method.'''

The '''function getItemCount '''returns the number of items to be shown inside '''RecyclerView.'''

The '''adapter''' code is completed now.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let’s now create the third activity.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| On the top left panel, under '''project''', go to '''app.'''

Right-click on '''app''' then select '''New '''-> '''Activty '''-> '''Empty Activity'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type name of the Activity as''' ThirdActivity'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Configure Activity''' window pops up.

Type the name of the '''Activity''' as '''ThirdActivity''' and click on the '''Finish''' button.

Wait for the process to finish.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the line of code
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''MyAdapter.Kt'''

The error in our '''playVideoIntent '''code is resolved as we have created the '''ThirdActivity.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will initialize the '''RecyclerView''' in '''SecondActivity.kt.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''SecondActivity.kt.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''SecondActivity.kt.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code before the '''volley''' code to initialize the '''RecyclerView.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will create an '''object''' for '''MyAdapter.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Declare the '''variable''' globally so that we can use it in '''extractjson data method.'''

Type this code before''' onCreate method'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy- paste the code

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will initialize the value of '''myAdapter variable''' inside '''oncreate method '''and after '''findViewById''' method

Copy paste the code from the code file '''Secondactivity.kt'''

Then set the required things to '''myRecyclerView '''as shown below.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''myAdapter.notifyDataSetChanged()'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''extractJsonData method''', add the below line for notifying that the '''data''' has been received.

'''myAdapter.notifyDataSetChanged()'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''ThirdActivity.kt '''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Then go to '''ThirdActivity.kt '''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In '''onCreate method''' type this code.

Here we store the '''video ID''' and '''Title''' of the '''video''' that was clicked in''' second activity.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will see a message with the '''video''' name that was clicked as output.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Run App
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us now run the '''App''' to see the output on the '''Android''' phone

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the output on the phone
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Select the '''FOSS''' and '''Language''' and click on the '''Search''' button.

We can see that the '''video''' thumbnail loads on the next page.

Scroll down to see all the thumbnails that are loaded for the selected '''FOSS''' and language.

Video title and level are displayed as well.

When we select a video the '''third activity''' opens.

It shows the selected '''video '''name as message.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| This brings us to the end of this tutorial. Let us summarize.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 8:

Summary

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial we learnt to

* Use '''RecyclerView''' to display the thumbnail of videos.
* Get the thumbnail from a specific '''Spoken Tutorial YouTube URL'''
* Pass the '''videoID''' of the selected '''Spoken Tutorial'''
* Run the '''Kotlin''' '''App '''and
* Display the thumbnail of the selected video
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 9:

Assignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| As an assignment do the following.

* Select a different '''FOSS '''and '''Language''' and check the thumbnails which are loaded.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 10:

About Spoken Tutorial project

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 11:

About workshops

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The Spoken Tutorial Project Team

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 12:

Forum for specific questions:
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Please post your timed queries in this forum.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 13:

Acknowledgement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.

|}

Android-app-using-Kotlin/C3/Display-Search-Result/English - Revision history

Nancyvarkey at 11:42, 15 July 2019