PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Display Search Result.''' |- | 00:06 | In this tutorial we will learn to..."

2020-10-13T10:40:13Z

Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Display Search Result.''' |- | 00:06 | In this tutorial we will learn to..."

New page

{| border=1
| '''Time'''
| '''Narration'''

|-
| 00:01
| Welcome to the''' Spoken Tutorial''' on''' Display Search Result.'''

|-
| 00:06
| In this tutorial we will learn to

|-
| 00:09
| Use '''RecyclerView''' to display the thumbnail of videos

|-
| 00:14
|Get the thumbnail from a specific '''Spoken Tutorial YouTube URL'''

|-
| 00:20
|Pass the '''videoID''' of the selected '''Spoken Tutorial'''

|-
| 00:25
|Run the '''Kotlin''' '''App '''and Display the thumbnail of the selected video
|-
| 00:31
| To record this tutorial, I am using

|-
| 00:34
| '''Ubuntu Linux 16.04''' operating system

|-
| 00:38
| '''Android Studio''' version 3.x and

|-
| 00:42
| '''Android Phone '''with minimum of '''Android''' OS version '''4.03'''

|-
| 00:49
| To follow this tutorial, you should have basic knowledge of

|-
| 00:53
| '''Java programming language '''and '''Android Studio '''

|-
| 00:57
|If not, then go through the relevant tutorials on this website.

|-
| 01:02
| Earlier, we '''parsed''' the '''JSON data''' received from the '''server'''

|-
| 01:07
| The '''data''' is stored in an '''arraylist finalResultsArrayList'''

|-
| 01:12
| We will use this '''arraylist''' to display the searched result to the user

|-
| 01:17
| Let us open '''Android Studio'''.

|-
| 01:20
| Open the project''' ST Search.'''

|-
| 01:24
| Go to '''activity underscore second dot xml'''

|-
| 01:29
| We will use the tool '''RecyclerView''' to display the thumbnail of videos.

|-
|01:35
| In the '''Palette''' search box, type '''RecyclerView.'''

|-
| 01:39
| Then drag the '''RecyclerView''' to the layout.

|-
| 01:43
| '''Add project Dependency''' pop up box appears.

|-
|01:47
| Click on '''Ok''' button to accept the dependency.

|-
| 01:52
|Wait until the '''Gradle build''' is finished.

|-
| 01:56
| '''RecyclerView '''recycles''' '''the visible views on the screen to show new views.

|-
| 02:02
| When we scroll, it will use the same place to display new images.

|-
| 02:08
| This way '''RecyclerView''' is efficient and faster.

|-
| 02:13
| Let us switch back to '''Android Studio''' interface.

|-
| 02:18
| In the '''Attributes''' window, type '''videos underscore recyclerview''' in the '''ID''' field.

|-
| 02:26
|Join the top '''constraint''' of '''RecyclerView '''to the bottom of the '''Selectedoption TextView.'''

|-
| 02:33
|Align the other '''constraints''' of '''RecyclerView''' as shown here.

|-
| 02:39
| Change its '''layout width''' and '''layout height attribute''' to '''match constraint '''
|-
| 02:45
|It helps to adjust the space occupied by the '''RecyclerView'''.

|-
| 02:50
| Next we will create our own custom layout file which will be used to fill a single item of '''RecyclerView'''.

|-
| 02:58
| On the top left panel, under '''project''', go to '''app.'''

|-
| 03:03
|Right-click on '''App''' then select '''New ''' '''XML ''' and '''Layout XML File'''

|-
| 03:11
|'''Configure Component '''window appears.

|-
| 03:14
|In the '''Layout File Name,''' type '''my underscore customlayout '''and click on '''Finish '''button.

|-
|03:24
| A new file '''my underscore customlayout dot xml '''is created'''.'''

|-
| 03:30
|In this we will create a custom '''view''' for the '''RecyclerView'''.

|-
| 03:35
| In the '''Component Tree '''panel, we already have '''LinearLayout''' as '''root''' in the '''layout''' file.

|-
| 03:42
|The '''LinearLayout''' will stack the items either horizontally or vertically.

|-
| 03:48
| First, let us set the '''layout height '''of '''LinearLayout''' to '''wrap content''' in the '''Attribute '''panel.

|-
| 03:56
|'''wrap content '''will expand or shrink according to the space required while adding the tools.

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

|-
| 04:11
| Next, we need to display thumbnail of each video in each list item.

|-
| 04:17
|So, now we will add an '''ImageView''' in the '''layout'''.

|-
| 04:22
| In the '''Palette''', search for '''ImageView.'''

|-
| 04:26
|Drag and drop it on the '''Linear Layout''' in the '''component Tree.'''

|-
| 04:31
| A '''Resources''' dialog box opens.

|-
| 04:34
|On the left side, under '''Drawable''', click '''Project,''' then select the image '''ic underscore launcher '''and click on '''OK''' button.

|-
| 04:45
|In the '''Attribute''' window, type '''video underscore thumbnail''' in the '''ID''' field.

|-
| 04:52
| Next we need a '''TextView''' to show the title of the video.

|-
| 04:57
| So, drag a '''TextView''' and drop it in the '''component tree''' on''' video underscore thumbnail.'''

|-
| 05:06
|The '''ImageView''' and '''TextView''' are embedded together.

|-
| 05:11
|In the output, we can see the thumbnail of the video in the '''ImageView.'''

|-
| 05:16
| In '''LinearLayout''', there are no '''constraints'''.

|-
| 05:19
|The '''Textview''' places itself in the '''LinearLayout.'''

|-
| 05:23
| As a unique '''ID''' for the '''TextView''' we will type '''video underscore title.'''

|-
| 05:29
|Change the '''textAppearance attribute''' of '''TextView''' to '''AppCompat dot Display1'''

The text will look larger now.

|-
| 05:39
| We need one more '''TextView''' to show the '''video level''' which are '''Basic, Intermediate''' and '''Advanced'''.

|-
| 05:46
| Drag a '''TextView''' and drop it in the '''component tree''' on '''video_title'''.

|-
| 05:54
|As a unique ID to this '''TextView''' we will type '''video underscore level.'''

|-
| 06:00
| Click on the '''LinearLayout''' on the''' Component Tree'''.

|-
| 06:04
|In the '''Attributes''' window, change the '''orientation''' of '''LinearLayout''' to '''vertical'''.

|-
| 06:10
|This changes the '''TextView''' and '''ImageView''' orientation to vertical position.

|-
| 06:16
|Change its '''ID attribute''' to '''itemLinearLayout.'''

|-
| 06:21
|This '''ID''' will be used in '''on click listener method '''later.

|-
| 06:26
|Now, our custom layout is ready.

|-
| 06:29
| Next we’ll change the size of the image so that it looks larger.

|-
| 06:34
|So change the '''layout width '''of '''ImageView '''to '''match parent'''

|-
| 06:40
|We will also change the''' layout height''' to 200dp.

|-
| 06:46
| We require an '''adapter''' to populate this custom '''layout''' in our '''RecyclerView''' view.

|-
| 06:52
| On the top left panel, under '''project''',

Click on '''app java''' then '''com dot example dot spoken dot stsearch'''

|-
| 07:05
|Right-click and select''' New, Kotlin File or Class'''

|-
| 07:11
|In the pop-up window, type the name as '''MyAdapter''' and click on '''OK '''button'''.'''
|-
| 07:18
| A new file gets created named '''MyAdapter dot kt'''

|-
| 07:23
|In this, we will write the '''Kotlin''' code for the '''Adapter'''.

|-
|07:28
| Type the below code.

|-
| 07:30
|What we have done is, we have created a '''class MyAdapter.'''

|-
| 07:36
|'''mContext '''is the '''context''', that is the '''application''' which is used to fill the thumbnail images.

|-
| 07:44
|'''videoList '''will contain the list of all videos of type '''VideoItem class.'''

|-
| 07:51
|On compiling, the '''constructor''' for the values in the brackets, are created automatically.

|-
| 07:58
|So we don’t need to do that.

|-
| 08:02
| The code shows error.

|-
| 08:04
|It is because we have not yet '''declared MyViewHolder class '''and '''implemented '''the required '''methods'''.
|-
| 08:12
| So first we will declare''' MyViewHolder class.'''

|-
| 08:17
|Type the code inside '''MyAdapter class''' as shown.

|-
| 08:22
| Now we will '''implement''' the required '''methods'''.

|-
| 08:26
|First we will create the '''onCreateViewHolder method.'''

|-
| 08:30
|Copy and paste the code for this '''method''' from the '''Code file myadapter dot kt'''

|-
| 08:39
|Here we created a '''view''' having '''my underscore customlayout dot xml''' and '''returned''' it through '''MyViewHolder class.'''

|-
| 08:50
| Now we will create the next required '''method '''which is '''onBindViewHolder.'''

|-
| 08:56
|Type the following code below '''onCreateViewHolder method.'''

|-
| 09:02
|Press '''Alt+Enter''' keys and resolve the warnings.

|-
| 09:07
|We will use the '''position variable''' to know which item we are filling.

|-
| 09:12
|We first get the '''VideoItem object '''which is being filled currently in '''singleVideoItem'''.

|-
| 09:19
| Here we set the text of the '''video underscore title '''and''' video underscore level''' from the '''singleVideoItem’s '''values.

|-
| 09:27
| Next step is to fill the thumbnail image into the '''ImageView'''.

|-
| 09:32
|We can get the thumbnail from a specific '''spoken tutorial YouTube URL.'''

|-
| 09:37
|The '''URL''' has this format:

|-
| 09:40
|So we will use the '''URL''' and pass the '''videoID''' for which we need the thumbnail image.

|-
| 09:47
|We have used '''Picasso''', to load the image into '''video underscore thumbnail ImageView.'''

|-
| 09:54
| We have created '''setOnClickListener method''' for''' linear layout''' and named it as '''itemLinearLayout'''

|-
| 10:02
|When the thumbnail is clicked, it will play the '''YouTube''' video in the '''ThirdActivity'''.

|-
| 10:08
|We have not created the '''ThirdActivity '''and so it shows an error now.

|-
| 10:33
|We pass the '''videoID''' and '''videoTitle''' to the '''ThirdActivity''' by '''putExtra method.'''

|-
| 10:20
|We have added a required flag of '''Intent dot FLAG underscore ACTIVITY underscore NEW underscore TASK.'''

|-
| 10:29
|This is required by '''YouTube''' activity.

|-
| 10:33
|Then we start the '''intent''' using '''mContext variable.'''

|-
| 10:38
| Type the next '''method getItemCount '''below '''onBindViewHolder method.'''

|-
| 10:45
|The '''function getItemCount '''returns the number of items to be shown inside '''RecyclerView.'''

|-
| 10:52
|The '''adapter''' code is completed now.

|-
| 10:55
| Let’s now create the third activity.

|-
| 10:58
| On the top left panel, under '''project''', go to '''app.'''

|-
| 11:03
|Right click on '''app''' then select '''New ''' '''Activity ''' '''Empty Activity'''

|-
| 11:11
| '''Configure Activity''' window pops up.

|-
| 11:14
|Type the name of the '''Activity''' as '''ThirdActivity''' and click on the '''Finish''' button.

Wait for the process to finish.

|-
| 11:24
| Go to '''MyAdapter dot Kt'''

|-
| 11:27
|The error in our '''playVideoIntent '''code is resolved as we have created the '''ThirdActivity.'''

|-
| 11:34
| Next we will initialize the '''RecyclerView''' in '''SecondActivity dot kt.'''

|-
| 11:40
| Go to '''SecondActivity dot kt.'''

|-
| 11:43
| Type the code before the '''volley''' code to initialize the '''RecyclerView.'''

|-
| 11:52
| Next we will create an '''object''' for '''MyAdapter.'''

|-
| 11:57
| Declare the '''variable''' globally so that we can use it in '''extractjson data method.'''

|-
| 12:04
|Type this code before''' onCreate method'''.

|-
| 12:09
| Now we will initialize the value of '''myAdapter variable''' inside '''oncreate method ''' after '''findViewById''' method

|-
| 12:18
|Copy paste the code from the code file '''Secondactivity dot kt'''

|-
| 12:28
|Then set the required things to '''myRecyclerView '''as shown below.

|-
| 12:34
| In the '''extractJsonData method''', add the below line for notifying that the '''data''' has been received.

|-
| 12:42
| Then go to '''ThirdActivity dot kt '''

|-
| 12:46
| In '''onCreate method''' type this code.

|-
| 12:52
|Here we store the '''video ID''' and '''Title''' of the '''video''' that was clicked in''' second activity.'''

|-
| 12:59
| We will see a message with the '''video''' name that was clicked as output.

|-
| 13:04
| Let us now run the '''App''' to see the output on the '''Android''' phone

|-
| 13:11
| Select the '''FOSS''' and '''Language''' and click on the '''Search''' button.

|-
| 13:16
|We can see that the '''video''' thumbnail loads on the next page.

|-
| 13:21
|Scroll down to see all the thumbnails that are loaded for the selected '''FOSS''' and language.

|-
|13:28
|Video title and level are displayed as well.

|-
| 13:32
|When we select a video the '''third activity''' opens.

|-
| 13:36
|It shows the selected '''video '''name as message.
|-
| 13:40
| This brings us to the end of this tutorial. Let us summarize.

|-
| 13:45
| In this tutorial we learnt to

Use '''RecyclerView''' to display the thumbnail of videos.

|-
| 13:53
| Get the thumbnail from a specific '''Spoken Tutorial YouTube URL'''

|-
| 13:58
| Pass the '''videoID''' of the selected '''Spoken Tutorial'''

|-
| 14:02
| Run the '''Kotlin''' '''App '''and Display the thumbnail of the selected video
|-
| 14:08
| As an assignment do the following.

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

|-
| 14:17
| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

|-
|14:24
| The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

|-
| 14:24
| Please post your timed queries in this forum.

|-
| 14:38
| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

|-
| 14:50
| The '''Android app '''and the script for this tutorial was contributed by Abhishek Shah.

|-
| 14:56
|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-timed - Revision history

PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Display Search Result.''' |- | 00:06 | In this tutorial we will learn to..."