Android-app-using-Kotlin/C3/Playing-video-using-YouTube-API/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time
Narration
00:01 Welcome to the Spoken Tutorial on Playing video using YouTube API.
00:07 In this tutorial we will learn to

Create a project in Google cloud

00:13 Enable the YouTube API
00:16 Initialise the YouTubePlayerView in Android studio
00:21 Run the Kotlin App and Play the selected video
00:27 To record this tutorial, I am using

Ubuntu Linux 16.04 operating system

00:34 Android Studio version 3.x and
00:38 Android Phone with minimum of Android OS version 4.03
00:45 To follow this tutorial, you should have basic knowledge of

Java programming language and Android Studio

00:55 If not, then go through the relevant tutorials on this website.
01:00 First let us create a project in Google cloud.
01:05 Open a web browser and go to the website cloud dot google dot com as shown here.
01:13 Click Console at the top right corner of the window.
01:17 Maximise the window if you don’t see the Console option.
01:22 Accept the terms and conditions of the Google Cloud platform.
01:27 Then sign in or login with your google credentials.

I have logged in already.

01:35 A dashboard opens.
01:38 Now we will create a new project to mention the APIs that we will use in the Android app.
01:46 In the top menu bar, click on Select a project drop-down box.
01:52 Create a new project by clicking on NEW PROJECT button at the top right of the dialog box.
02:00 In the next screen, type the name of the project as MyKotlinProject.
02:06 Then click on Create button at the bottom of the scree.
02:11 Then go to Select a project dropdown box.
02:16 Click on MyKotlinProject that is created just now.
02:21 The project dashboard is displayed with the project name MyKotlinProject.
02:27 Now we will enable the YouTube API in this project.
02:32 Open the navigation menu at the top left corner.
02:36 Click APIs & Services then dashboard
02:41 A new dashboard of APIs & Services appears.
02:47 Click Enable Apis and services at the top middle of the window.
02:52 In the search box, type youtube.
02:57 Select YouTube Data API v3.
03:02 Click on the ENABLE button.
03:05 After few seconds the API will be enabled.
03:09 Now select Credentials in the left sidebar or click on Create Credentials button.
03:17 This will create new credentials.
03:20 Let us click on Create Credentials drop-down and select API Key.
03:27 API Key is generated and shown under Your API Key.
03:32 Copy that key and save it in a text editor for future use.
03:37 Then click on the 'Close button in the dialog box.
03:42 We will use this key in our app’s Kotlin code to load the YouTube video.
03:48 In Android Studio, we don’t have any tool in the palette which can play YouTube videos.
03:55 But YouTube provides its own YouTubePlayerView which we can use.
04:01 The view just needs to be initialized directly to play a video from YouTube, by giving the video ID.
04:09 Open the web browser.
04:12 Now let’s download the required file from the developer website.
04:17 Go to this website.
04:20 A download option is provided under Download link column.
04:25 Click on Download and then click on SaveFile option and click on Ok button.
04:33 A zip file gets downloaded. Extract the zip file.
04:40 From the extracted folder, open libs folder.
04:45 This folder contains YouTubeAndroidPlayerApi dot jar file which we can use to play YouTube videos.
04:54 We need to copy this file in our Android Studio project.

So, right-click and select copy.

05:02 Let us open Android Studio.
05:04 Open the project ST Search.
05:10 Once the project is completely loaded go to the left panel and select Project tab.
05:17 Right-click on the app folder and select Show in Files.
05:23 The File Explorer opens showing the project folder.
05:28 Open libs folder.
05:31 Right-click and select paste to copy the YouTubeAndroidPlayerApi dot jar file into libs folder.

Close the window.

05:43 In the left panel, under Project, go to Gradle Scripts.
05:47 Double-click on build dot gradle within brackets Module colon app
05:55 In the dependencies block {} we will add a new dependency.
05:59 At the end of the block add a new line as shown here.
06:04 A Sync Now message appears at the top right corner.

Click on it.

06:10 Wait for the gradle build to complete.
06:13 Now we will edit the layout file for third activity.
06:18 Go to activity underscore third dot xml
06:23 Here we will display the YouTube video.
06:27 At the bottom of activity underscore third dot xml, click on Text mode.
06:34 Now we will write our own code for YouTube player.
06:39 Between the tags of ConstraintLayout type the below code.
06:44 Now again go back to Design mode by clicking on the Design button at the bottom.
06:51 We can see a view with the name “com dot google YouTubePlayerView” with a grey colored background.
06:59 Now we shall set its constraints.
07:03 First hold and drag the YouTubePlayerView box little lower.
07:09 Now we can clearly see the constraint circles.
07:13 Join the top, left and right circles to the boundaries as shown here
07:19 Go to Attribute window and type the ID attribute as youtube underscore playerview.
07:27 Change the layout height attribute of YouTubePlayerView to wrap content.
07:34 Now let’s place a TextView below this to display the video title.
07:39 Drag a TextView and drop it in the layout.
07:43 Set the top constraint below the YouTube player view.
07:47 Set the left constraint to left boundary.
07:51 Change the ID attribute of the TextView to youtube underscore title
07:57 Next we will write the code to play the video.

Go to ThirdActivity dot kt

08:05 To show YouTube video, our class should extend YouTubeBaseActivity.
08:11 Change the class declaration code as shown.
08:15 Now we will add code in our onCreate method.
08:20 So first we’ll create a variable to store the API key that we got from Google Cloud Console.
08:28 So declare the variable below the toast command as shown:
08:33 In the place of “YOUR KEY HERE” paste the API key which was saved in the text editor.
08:42 Now we will set the text of our youtube underscore title.
08:47 Type the code as shown.
08:50 Next, we’ll make an object for YouTube player view.
08:56 So, type this code as shown here
09:00 Next, We will then initialize the playerView.
09:04 For that, type the code as shown.
09:08 The code will initialize the YouTube player with the selectedVideoID using cueVideo method.
09:16 If it fails, it will show an error message as toast.
09:21 We have typed all the necessary code.
09:24 Now let us run the App.
0:27 Select the Foss and Language and click on the Search button.
09:33 We can see that the video thumbnails get loaded.
09:37 Click on any one.

The video plays in a new screen.

09:44 Go back and click any other video thumbnail.
09:48 Once again, the video plays in a new screen.
09:53 Spoken Tutorial’s ST search app is now ready to launch.
09:58 Please follow the steps in the given link to become a publisher.
10:03 This is the official link where the registration is to be done
10:07 Once completed, you will be able to publish or upload your Android App on Google Play Store.
10:15 This brings us to the end of this tutorial. Let us summarize.
10:20 In this tutorial we learnt to

Create a project in Google cloud

10:26 Enable the YouTube API
10:29 Initialise the YouTubePlayerView in Android studio
10:34 Run the Kotlin App and Play the selected video
10:39 As an assignment Select different FOSS and Language combinations and play the selected video
10:46 The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

10:54 The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests.

For more details, please write to us.

11:05 Please post your timed queries in this forum.
11:09 Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

11:22 The Android app and the script for this tutorial was contributed by Abhishek Shah.
11:28 And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.

Contributors and Content Editors

PoojaMoolya