Android-app-using-Kotlin/C3/Display-Search-Result/English
| |
|
| Slide 1: | Welcome to the Spoken Tutorial on Display Search Result. |
| Slide 2:
Learning Objectives |
In this tutorial we will learn to
|
| Slide 3:
System requirement |
To record this tutorial, I am using
|
| Slide 4:
Pre-requisites |
To follow this tutorial, you should have basic knowledge
If not, then go through the relevant tutorials on this website. |
| Slide 5:
Recap |
* Earlier, we parsed the JSON data received from the server
|
| Open the Android studio from the launcher bar. | Let us open Android Studio. |
| Click on ST search | Open the project ST Search. |
| Click on activity_second.xml | Go to activity_second.xml |
| We will use the tool RecyclerView to display the thumbnail of videos. | |
| In palette search box, type RecyclerView. | 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. |
| Slide 6:
RecyclerView |
* RecyclerView recycles the visible views on the screen to show new views.
|
| Switch back to Android Studio | Let us switch back to Android Studio interface. |
| Type unique ID as videos_recyclerview | 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. |
| demo
Change its layout_width and layout_height attribute to match_constraint |
Change its layout_width and layout_height attribute to match_constraint
It helps to adjust the space occupied by the RecyclerView. |
| Next we will create our own custom layout file which will be used to fill a single item of RecyclerView. | |
| click on app then select New => XML => Layout XML File
In the Layout File Name, type my_customlayout and click on Finish button. |
On the top left panel, under project, go to app.
Right-click on App then select New => XML => Layout XML File Configure Component window appears. In the Layout File Name, type my_customlayout and click on Finish button. |
| Point to my_customlayout.xml | A new file my_customlayout.xml is created.
In this we will create a custom view for the RecyclerView. |
| Point to LinearLayout | 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. |
| In the attribute panel, set the layout_height of LinearLayout to wrap_content. | 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. |
| Next, we need to display thumbnail of each video in each list item.
So, now we will add an ImageView in the layout. | |
| In the palette, type ImageView.
Drag and drop it on the Linear Layout in the component Tree. |
In the Palette, search for ImageView.
Drag and drop it on the Linear Layout in the component Tree. |
| Open drawable >> project and select ic_launcher
Give a unique ID : video_thumbnail |
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. |
| Next we need a TextView to show the title of the video. | |
| Drag a TextView and drop it in the component tree on video_thumbnail.
Point to the image view |
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. |
| Point to Textview in the linear layout | In LinearLayout, there are no constraints.
The Textview places itself in the LinearLayout. |
| Type video_title as unique ID
Change the textAppearance attribute of TextView to AppCompat.Display1 |
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. |
| We need one more TextView to show the video level which are Basic, Intermediate and Advanced. | |
| Add a TextView and give a unique ID as video_level | 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. |
| Change the orientation of my_customlayout.xml LinearLayout to vertical
Change its ID attribute to itemLinearLayout. |
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. |
| Change layout_width of ImageView to match_parent
layout_height to 200dp. |
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. |
| We require an adapter to populate this custom layout in our RecyclerView now. | |
| 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. |
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. |
| Point to MyAdapter.kt | A new file gets created under the hierarchy, named MyAdapter.kt
In this, we will write the Kotlin code for the Adapter. |
| Go to MyAdapter.kt | 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. |
| Point to the error | The code shows error.
It is because we have not yet declared MyViewHolder class and implemented the required methods. |
| Copy- paste the code
class MyViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) |
So first we will declare MyViewHolder class.
Type the code inside MyAdapter class as shown. |
| Copy- paste the code | 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. |
| Copy- paste the code | 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. |
| Here we set the text of the video_title and video_level from the singleVideoItem’s values. | |
| 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 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. | |
| 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. | |
| Copy- paste the code | 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. |
| Let’s now create the third activity. | |
| On the top left panel, under project, go to app.
Right-click on app then select New -> Activty -> Empty Activity | |
| Type name of the Activity as ThirdActivity | 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. |
| Point to the line of code | Go to MyAdapter.Kt
The error in our playVideoIntent code is resolved as we have created the ThirdActivity. |
| Next we will initialize the RecyclerView in SecondActivity.kt. | |
| Go to SecondActivity.kt. | Go to SecondActivity.kt. |
| Type the code before the volley code to initialize the RecyclerView. | |
| Next we will create an object for MyAdapter. | |
| Copy- paste the code | Declare the variable globally so that we can use it in extractjson data method.
Type this code before onCreate method. |
| Copy- paste the code | 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. |
| myAdapter.notifyDataSetChanged() | In the extractJsonData method, add the below line for notifying that the data has been received.
myAdapter.notifyDataSetChanged() |
| Click on ThirdActivity.kt | Then go to ThirdActivity.kt |
| In onCreate method type this code.
Here we store the video ID and Title of the video that was clicked in second activity. | |
| We will see a message with the video name that was clicked as output. | |
| Run App | Let us now run the App to see the output on the Android phone |
| Show the output on the phone | 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. |
| This brings us to the end of this tutorial. Let us summarize. | |
| Slide 8:
Summary |
In this tutorial we learnt to
|
| Slide 9:
Assignment |
As an assignment do the following.
|
| Slide 10:
About Spoken Tutorial project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it |
| Slide 11:
About workshops |
The Spoken Tutorial Project Team
conducts workshops and gives certificates on passing online tests. For more details, please write to us. |
| Slide 12:
Forum for specific questions: |
Please post your timed queries in this forum. |
| Slide 13:
Acknowledgement |
Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
| 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. |
