Android-app-using-Kotlin/C3/Display-Search-Result/English-timed
From Script | Spoken-Tutorial
| 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. |
