Android-app-using-Kotlin/C3/Display-Search-Result/English-timed

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.

Contributors and Content Editors

PoojaMoolya