Difference between revisions of "Android-app-using-Kotlin/C3/Display-Search-Result/English"

Learning Objectives

• Use RecyclerView to display the thumbnail of videos
• Get the thumbnail from a specific Spoken Tutorial YouTube URL
• Pass the videoID of the selected Spoken Tutorial
• Run the Kotlin App and
• Display the thumbnail of the selected video

System requirement

• Ubuntu Linux 16.04 operating system
• Android Studio version 3.x and
• Android Phone with minimum of Android OS version 4.03

Pre-requisites

• Java programming language and
• Android Studio

If not, then go through the relevant tutorials on this website.

Recap

• The data is stored in an arraylist finalResultsArrayList
• We will use this arraylist to display the searched result to the user

Wait until the Gradle build is finished.

RecyclerView

• RecyclerView recycles the visible views on the screen to show new views.
• When we scroll, it will use the same place to display new images.
• This way RecyclerView is efficient and faster.

Join the top constraint of RecyclerView to the bottom of the Selectedoption TextView.

Align the other constraints of RecyclerView as shown here.

Change its layout_width &layout_height attribute to match_constraint.

It helps to adjust the space occupied by the RecyclerView.

In the Layout File Name, type my_customlayout and click on Finish button.

Right-click on App then select New => XML => Layout XML File

In the Layout File Name, type my_customlayout and click on Finish button.

In this we will create a custom view for the RecyclerView.

The LinearLayout will stack the items either horizontally or vertically.

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.

So, now we will add an ImageView in the layout.

Drag and drop it on the Linear Layout in the component Tree.

Drag and drop it on the Linear Layout in the component Tree.

Give a unique ID : video_thumbnail

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.

Point to the image view

The ImageView and TextView are embedded together.

In the output, we can see the thumbnail of the video in the

ImageView.

The Textview places itself in the LinearLayout.

Change the textAppearance attribute of TextView to AppCompat.Display1

Change the textAppearance attribute of TextView to AppCompat.Display1

The text will look larger now.

As a unique ID to this TextView we will type video_level.

Change its ID attribute to itemLinearLayout.

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.

layout_height to 200dp.

So change the layout_width of ImageView to match_parent

We will also change the layout_height to 200dp.

Right click on com.example.searchapp

Select New => Kotlin File/Class

Type name as MyAdapter and click on OK.

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.

In this, we will write the Kotlin code for the Adapter.

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.

It is because we have not yet declared MyViewHolder class and implemented the required methods.

class MyViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView)

Type the code inside MyAdapter class as shown.

Point to the code line as per narration

First we will create the onCreateViewHolder method.

Copy and paste the code for this method from the Code file myadapter.kt

Here we created a view having my_customlayout.xml and returned it through MyViewHolder class.

Type the following code below onCreateViewHolder method.

We first get the VideoItem object which is being filled currently in singleVideoItem.

We can get the thumbnail from a specific spoken tutorial YouTube URL.

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.

When the thumbnail is clicked, it will play the YouTube video in the ThirdActivity.

We pass the videoID and videoTitle to the ThirdActivity by putExtra method.

This is required by YouTube activity.

The adapter code is completed now.

Right-click on app then select New -> Activity -> Empty Activity

Type the name of the Activity as ThirdActivity and click on the Finish button.

Wait for the process to finish.

The error in our playVideoIntent code is resolved as we have created the ThirdActivity.

Type this code before onCreate method.

Copy paste the code from the code file Secondactivity.kt

Then set the required things to myRecyclerView as shown below.

myAdapter.notifyDataSetChanged()

Here we store the video ID and Title of the video that was clicked in second activity.

We can see that the video thumbnail loads on the next page.

When we select a video the third activity opens.

It shows the selected video name as message.

Summary

• Use RecyclerView to display the thumbnail of videos.
• Get the thumbnail from a specific Spoken Tutorial YouTube URL
• Pass the videoID of the selected Spoken Tutorial
• Run the Kotlin App and
• Display the thumbnail of the selected video

Assignment

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

About Spoken Tutorial project

Please download and watch it

About workshops

conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

Forum for specific questions:

Acknowledgement

More information on this mission is available at

this link.

And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.