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

From Script | Spoken-Tutorial
Revision as of 16:10, 13 October 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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