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

From Script | Spoken-Tutorial
Revision as of 17:43, 27 June 2019 by Nirmala Venkat (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Visual Cue
Narration
Slide 1: Welcome to the Spoken Tutorial on Display Search Result.
Slide 2:

Learning Objectives

In this tutorial we will learn to
  • 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
Slide 3:

System requirement

To record this tutorial, I am using
  • Ubuntu Linux 16.04 operating system
  • Android Studio version 3.x and
  • Android Phone with minimum of Android OS version 4.03
Slide 4:

Pre-requisites

To follow this tutorial, you should have basic knowledge
  • Java programming language and
  • Android Studio

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

Slide 5:

Recap

* Earlier, we parsed the JSON data received from the server
  • The data is stored in an arraylist finalResultsArrayList
  • We will use this arraylist to display the searched result to the user
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.
  • When we scroll, it will use the same place to display new images.
  • This way RecyclerView is efficient and faster.
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
  • 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
Slide 9:

Assignment

As an assignment do the following.
  • Select a different FOSS and Language and check the thumbnails which are loaded.
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.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat