Android-app-using-Kotlin/C3/Playing-video-using-YouTube-API/English
| |
|
| Slide 1: | Welcome to the Spoken Tutorial on Playing video using YouTube API. |
| 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 of
If not, then go through the relevant tutorials on this website. |
| First let us create a project in Google cloud. | |
| Open Firefox web browser
Go to the website: https://cloud.google.com/ |
Open a web browser and go to the website: cloud.google.com/
as shown here. |
| Click Console | Click Console at the top right corner of the window.
Maximise the window if you don’t see the Console option. |
| Accept the terms and conditions >> Login in with google credentials | Accept the terms and conditions of the Google Cloud platform.
Then sign in/login with your google credentials. I have logged in already. |
| Point to dashboard | A dashboard opens.
Now we will create a new project to mention the APIs that we will use in the Android app. |
| In the top menu bar, click on Select a project
Click on NEW PROJECT button |
In the top menu bar, click on Select a project drop-down box.
Create a new project by clicking on NEW PROJECT button at the top right of the dialog box. |
| Type the name of project as MyKotlinProject.
Click Create button. |
In the next screen, type the name of the project as MyKotlinProject.
Then click on Create button at the bottom of the scree. |
| Go to Select a project >> MyKotlinProject | Then go to Select a project dropdown box.
Select MyKotlinProject that is created just now. |
| Point to MyKotlinProject | The project dashboard is displayed with the project name MyKotlinProject. |
| Click on navigation menu at the top left corner >> Click APIs & Services >> dashboard | Now we will enable the YouTube API in this project.
Open the navigation menu at the top left corner. Click APIs & Services >> dashboard |
| Dashboard | A new dashboard of APIs & Services appears. |
| Click Enable apis and services | Click Enable Apis and services at the top middle of the window. |
| In the search box, search for youtube.
Select YouTube Data API v3. |
In the search box, type youtube.
Select YouTube Data API v3. |
| Click Enable | Click on the ENABLE button.
After few seconds the API will be enabled. |
| Click on Create Credentials button | Now select Credentials in the left sidebar or click on Create Credentials button.
This will create new credentials. |
| Click on Create Credentials >> API Key | Let us click on Create Credentials drop-down and select API Key. |
| Save API Key
AIzaSyAmivb62TEzhqNnqDO-RArUIEUsYCeRFvQ |
API Key is generated and shown under Your API Key.
Copy that key and save it in a text editor for future use. |
| Click on the Close button | Then click on the Close button in the dialog box.
We will use this key in our app’s Kotlin code to load the YouTube video. |
| Slide 5:
Tool - YouTubePlayerView |
In Android Studio, we don’t have any tool in the palette which can play YouTube videos.
But YouTube provides its own YouTubePlayerView which we can use. The view just needs to be initialized directly to play a video from YouTube, by giving the video ID. |
| Open the web browser. | Open the web browser.
Now let’s download the required file from the developer website. |
| Click on Download >> Click on SaveFile option >> Ok button | Go to this website.
A download option is provided under Download link column. Click on Download and then click on SaveFile option and click on Ok button. |
| Point to the zip file. Extract it.
Open libs folder |
A zip file gets downloaded. Extract the zip file.
From the extracted folder, open libs folder. This folder contains YouTubeAndroidPlayerApi.jar file which we can use to play YouTube videos. |
| Copy the file. | We need to copy this file in our Android Studio project.
So, right-click and select copy. |
| Open Android studio | Let us open Android Studio. |
| Click on ST search | Open the project ST Search. |
| Project>>app>Show in Files
Open libs folder >> Paste the file. |
Once the project is completely loaded go to the left panel – and select Project tab.
Right-click on the app folder and select Show in Files. The File Explorer opens showing the project folder. Open libs folder. Right-click and select paste to copy the YouTubeAndroidPlayerApi.jar file into libs folder. Close the window. |
| Double click on build.gradle(Module:app) in Gradle Scripts | In the left panel, under Project, go to Gradle Scripts.
Double-click on build.gradle within brackets Module:app In the dependencies block {} we will add a new dependency. |
| Add the code
implementation files('libs/YouTubeAndroidPlayerApi.jar') Click Sync now. |
At the end of the block add a new line as shown here.
A Sync Now message appears at the top right corner. Click on it. |
| Point to gradle build | Wait for the gradle build to complete. |
| Now we will edit the layout file for third activity. | |
| Go to activity_third.xml | Go to activity_third.xml
Here we will display the YouTube video. |
| Copy -paste | At the bottom of activity_third.xml, click on Text mode.
Now we will write our own code for YouTube player. Between the tags of ConstraintLayout type the below code. |
| Click on Design button | Now again go back to Design mode by clicking on the Design button at the bottom.
We can see a view with the name “com.google...YouTubePlayerView” with a grey colored background. |
| Demo of alignment | Now we shall set its constraints.
First hold and drag the YouTubePlayerView box little lower. Now we can clearly see the constraint circles. Join the top, left and right circles to the boundaries. |
| In the Attribute window type the ID attribute as youtube_playerview | Go to Attribute window and type the ID attribute as youtube_playerview. |
| layout_ height = wrap_content | Change the layout_ height attribute of YouTubePlayerView to wrap_content. |
| Demo | Now let’s place a TextView below this to display the video title.
Drag a TextView and drop it in the layout. Set the top constraint below the YouTube player view. Set the left constraint to left boundary. Change the ID attribute of the TextView to youtube_title |
| Go to ThirdActivity.kt | Next we will write the code to play the video.
Go to ThirdActivity.kt |
| Point to class | To show YouTube video, our class should extend YouTubeBaseActivity. |
| class ThirdActivity : YouTubeBaseActivity() | Change the class declaration code as shown. |
| Point to
var KEY = "YOUR KEY HERE" |
Now we will add code in our onCreate method.
So first we’ll create a variable to store the API key that we got from Google Cloud Console. So declare the variable below the toast command as shown: In the place of “YOUR KEY HERE” paste the API key which was saved in the text editor. |
| youtube_title.text = selectedVideoTitle | Now we will set the text of our youtube_title.
Type the code as shown. |
| Type the code.
|
Next, we’ll make an object for YouTube player view.
So, type this code as shown here |
| Type the code. | We will then initialize the playerView.
For that, type the code as shown. The code will initialize the YouTube player with the selectedVideoID using cueVideo method. If it fails, it will show an error message as toast. |
| We’ve typed all the necessary code. | |
| Run the App | Now let us run the App.
Select the Foss and Language and click on the Search button. We can see that the video thumbnails get loaded. |
| Click on any one >> Go back >> Click on another one. | Click on any one.
The video plays in a new screen. Go back and click any other video thumbnail. Once again, the video plays in a new screen. Spoken Tutorial’s ST search app is now ready to launch. |
| Slide 8:
Publish Apps on Google Play Store |
Please follow the steps in the given link to become a publisher. |
| This is the official link where the registration is to be done : | |
| Once completed, you will be able to publish or upload your Android App on Google Play Store. | |
| This brings us to the end of this tutorial. Let us summarize. | |
| Slide 6:
Summary |
In this tutorial we learnt to
|
| Slide 7:
Assignment |
As an assignment-
|
| Slide 9:
About Spoken Tutorial project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it |
| Slide 10:
About workshops |
The Spoken Tutorial Project Team
conducts workshops and gives certificates on passing online tests. For more details, please write to us. |
| Slide 11:
Forum for specific questions: |
Please post your timed queries in this forum. |
| Slide 12:
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. |
