Difference between revisions of "Android-app-using-Kotlin/C3/Playing-video-using-YouTube-API/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent...")
 
 
Line 62: Line 62:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Login in with google credentials
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Accept the terms and conditions >> Login in with google credentials
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Accept the terms and conditions of the '''Google Cloud''' platform.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Accept the terms and conditions of the '''Google Cloud''' platform.
  
Line 76: Line 76:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| click on Select a project
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the top menu bar, click on Select a project
  
Create a new project
+
Click on '''NEW PROJECT '''button
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the top menu bar, click on '''Select a project''' drop-down box.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the top menu bar, click on '''Select a project''' drop-down box.
  
Line 86: Line 86:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the name of project as '''MyKotlinProject.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the name of project as '''MyKotlinProject.'''
  
click '''Create'''.
+
Click '''Create''' button.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the next screen, type the name of the '''project''' as '''MyKotlinProject.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the next screen, type the name of the '''project''' as '''MyKotlinProject.'''
  
Line 92: Line 92:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''select a project''' dropdown
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''Select a project''' >> '''MyKotlinProject '''
 
+
Select the project '''MyKotlinProject '''
+
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Then go to '''Select a project''' dropdown box.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Then go to '''Select a project''' dropdown box.
  
Line 104: Line 102:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click '''APIs & Services >> dashboard'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on navigation menu at the top left corner >> Click '''APIs & Services >> dashboard'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will enable the '''YouTube API''' in this '''project'''.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now we will enable the '''YouTube API''' in this '''project'''.
  
Line 112: Line 110:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|  
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Dashboard
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A new '''dashboard''' of '''APIs & Services''' appears.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| A new '''dashboard''' of '''APIs & Services''' appears.
  
Line 129: Line 127:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click '''Enable'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click '''Enable'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| click on the '''ENABLE '''button'''.'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''ENABLE '''button.
  
Within a few seconds the '''API''' will be enabled.
+
After few seconds the '''API''' will be enabled.
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''click on Create Credentials'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Create Credentials''' button
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now select '''Credentials''' in the left sidebar or click on '''Create Credentials '''button.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now select '''Credentials''' in the left sidebar or click on '''Create Credentials '''button.
  
 
This will create new '''credentials'''.
 
This will create new '''credentials'''.
  
Let us click on '''Create Credentials '''drop-down and select''' API Key.'''
+
|-
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Create Credentials >> API Key'''
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us click on '''Create Credentials '''drop-down and select''' API Key.'''
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''API Key'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Save '''API Key'''
  
 
'''AIzaSyAmivb62TEzhqNnqDO-RArUIEUsYCeRFvQ '''
 
'''AIzaSyAmivb62TEzhqNnqDO-RArUIEUsYCeRFvQ '''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''API Key''' is generated and shown under '''Your API Key.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''API Key''' is generated and shown under '''Your API Key.'''
  
Copy that '''key''' and save it in a text editor for future use.
+
Copy that '''key''' and save it in a '''text editor''' for future use.
  
 
|-
 
|-
Line 153: Line 153:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Then click on the '''Close''' button in the dialog box.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.
+
We will use this '''key''' in our '''app’s Kotlin code''' to load the '''YouTube''' video.
  
 
|-
 
|-
Line 166: Line 166:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Open the web browser'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the web browser.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the web browser.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the web browser.
  
Line 172: Line 172:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Download'''. Click on '''SaveFile''' option
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Download''' >> Click on '''SaveFile''' option >> '''Ok''' button
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to this website.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to this website.
  
 
A download option is provided under '''Download''' link column.
 
A download option is provided under '''Download''' link column.
  
Click on '''Download '''and then click on '''SaveFile''' option and click on '''ok''' button.
+
Click on '''Download '''and then click on '''SaveFile''' option and click on '''Ok''' button.
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the zip file.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the zip file.  Extract it.
  
 
Open libs folder
 
Open libs folder
Line 189: Line 189:
 
This folder contains '''YouTubeAndroidPlayerApi.jar '''file which we can use to play '''YouTube''' videos.
 
This folder contains '''YouTubeAndroidPlayerApi.jar '''file which we can use to play '''YouTube''' videos.
  
We need to copy this file in our '''Android Studio project.'''
+
|-
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the file.
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We need to copy this file in our '''Android Studio project.'''
  
 
So, right-click and select '''copy'''.
 
So, right-click and select '''copy'''.
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open the '''Android studio '''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Open '''Android studio '''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.
 
|-
 
|-
Line 203: Line 205:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Project>>app>Show in Files'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Project>>app>Show in Files'''
  
'''Paste the file'''
+
Open '''libs''' folder >> Paste the file.
  
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Once the '''project''' completely loaded go to the left panel – and select '''Project''' tab.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.'''
 
Right-click on the '''app '''folder and select '''Show in Files.'''
Line 218: Line 220:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| double click on '''build.gradle(Module:app) '''in '''Gradle Scripts'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Double click on '''build.gradle(Module:app) '''in '''Gradle Scripts'''
  
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel, under '''Project''', go to '''Gradle Scripts.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel, under '''Project''', go to '''Gradle Scripts.'''
Line 227: Line 229:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| add the code
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Add the code
  
 
'''implementation files('libs/YouTubeAndroidPlayerApi.jar')'''
 
'''implementation files('libs/YouTubeAndroidPlayerApi.jar')'''
  
'''Point to sync'''
+
Click '''Sync now'''.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| At the end of the '''block''' add a new line.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| At the end of the '''block''' add a new line as shown here.
 
+
'''implementation files('libs/YouTubeAndroidPlayerApi.jar')'''
+
  
 
A '''Sync Now''' message appears at the top right corner.
 
A '''Sync Now''' message appears at the top right corner.
Line 241: Line 241:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Point to gradle build'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''gradle build'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Wait for the '''gradle build''' to complete. This is shown at the bottom.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Wait for the '''gradle build''' to complete.  
  
 
|-
 
|-
Line 276: Line 276:
 
Now we can clearly see the '''constraint''' circles.
 
Now we can clearly see the '''constraint''' circles.
  
Join the '''top''', '''left '''and '''right '''circles to the boundaries.
+
Join the top, left and right circles to the boundaries.
  
 
|-
 
|-
Line 311: Line 311:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''class ThirdActivity : YouTubeBaseActivity()'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''class ThirdActivity : YouTubeBaseActivity()'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Change the '''class declaration''' code as shown.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Change the '''class declaration''' code as shown.
 
'''class ThirdActivity : YouTubeBaseActivity()'''
 
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Point to '''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to
  
 
'''var KEY = "YOUR KEY HERE"'''
 
'''var KEY = "YOUR KEY HERE"'''
Line 333: Line 331:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code:
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code.
 +
 
  
''')'''
 
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, we’ll make an '''object''' for '''YouTube player view.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, we’ll make an '''object''' for '''YouTube player view.'''
  
Line 341: Line 339:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|  
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will then initialize the '''playerView.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will then initialize the '''playerView.'''
  
Line 362: Line 360:
 
We can see that the video thumbnails get loaded.  
 
We can see that the video thumbnails get loaded.  
  
Click on any one.
+
|-
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on any one >> Go back >> Click on another one.
 +
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|Click on any one.
  
 
The video plays in a new screen.
 
The video plays in a new screen.

Latest revision as of 12:24, 15 July 2019

Visual Cue
Narration
Slide 1: Welcome to the Spoken Tutorial on Playing video using YouTube API.
Slide 2:

Learning Objectives

In this tutorial we will learn to
  • Create a project in Google cloud
  • Enable the YouTube API
  • Initialise the YouTubePlayerView in Android studio
  • Run the Kotlin App and
  • Play 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 of
  • Java programming language and
  • Android Studio

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
  • Create a project in Google cloud
  • Enable the YouTube API
  • Initialise the YouTubePlayerView in Android studio
  • Run the Kotlin App and
  • Play the selected video
Slide 7:

Assignment

As an assignment-
  • Select different FOSS and Language combinations and play the selected video
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.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat