How to show Youtube Video Thumbnail & Play Youtube Video in Android App

How to show Youtube Video Thumbnail & Play Youtube Video in Android App

Hello Friends, Today we are going to learn how to play a youtube video in our app using YoutubePlayerAPI. And also I will also show you how to show thumbnails of the youtube video.

This app will be having two screens:

  1. First screen listing all the videos in RecyclerView.
  2. Playing the selected video.

VIDEO DEMO

Getting Youtube Data API Key

1. Now login into your Gmail Account and go to Google API Console.

2.  Click on plus button to Create New Project.

Click on Plus button to Create Project

Click on Plus button to Create Project

3. Enter your project name and click Create.

Enter project name

Enter project name

4. Creating project will take some couple of minutes you can check the processing of your project on top right corner. After successful creation of your project the below is the first screen you get i.e Project Dashboard.

Project Dashboard

Project Dashboard

5. Now to integrate YoutubePlayer API we need to enable Youtube Data API v3 to do that click on Enable APIS and Services.

Click on Enable APIS and Services

Click on Enable APIS and Services

6. After clicking on Enable APIS and Services you will get below screen containing list of Services provided by Google. Now click on Youtube Data API v3 from 2nd row 1st item.

List of Google APIs

List of Google APIs

7. After clicking on Youtube Data API v3 you will get below screen. Here you need to click on Enable button to enable the API.

Click on Enable

Click on Enable

8. After enabling Youtube Data API v3 you will get below screen. Here you need to click on Create Credentials to get API key.

API Enabled Successfully

API Enabled Successfully

9. On clicking Create Credential you will get below screen. Here you again need to click on Create Credentials.

Click on Create Credentials

Click on Create Credentials

On clicking Create Credentials you will get a dropdown from that you need to select API key.

Select API Key from Dropdown

Select API Key from Dropdown

10. Finally after clicking on API key you will get API key to integrate Youtube Data API in your app. Copy this API key and paste in your project inside Constants.java class.

API key created successfully

API key created successfully

Optional Steps but Important

1. Now click on Restrict Key option from API key created dialog. By restricting API key you can prevent unauthorised use in production. On clicking you will get below screen. Here select Android apps radio button and below add your app package name and SHA-1 Certificate Fingerprint and click on Save button.

If you don’t know how to generate SHA-1 key you can check this link.

Add SHA-1 Fingerprint Certificate

Add SHA-1 Fingerprint Certificate

2. If you have closed the API key created dialog then also you can restrict the API key by clicking on Pencil icon from the below screen you get after closing dialog.

Click on Pencil Icon

Click on Pencil Icon

Now all done from Google API Console side come back to Android Studio.

Integrating Youtube Player in Android App

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.

2. Open res ⇒ values ⇒ strings.xml and add below string values. These are some strings that we are going to use in our project.

In the above string.xml file if you see i have created an array of Video IDs, where Video ID is the ID of youtube video. If you don’t know how to get ID from video then go to Youtube and open any video link. Now see the below image to get the Video ID from opened youtube link.

Get Video ID from Youtube Link

Get Video ID from Youtube Link

3. So before getting started you need to download the jar file of Youtube Android Player API. Download the jar file and add into your project dependency. After adding jar to dependency  the gradle will look like below:

NOTE : I am using Android Studio 3.0 so compile is now replaced with implementation.

4. Now open your activity_main.xml and add the RecyclerView to it for displaying the list of videos with thumbnail.

5. For RecyclerView custom row we need to create one more layout naming youtube_video_custom_layout.xml and add the below code to it.

In the above layout we are using com.google.android.youtube.player.YouTubeThumbnailView which is a part of YoutubePlayerAPI jar file that we had downloaded and added to our project. This YouTubeThumbnailView is responsible to show the thumbnail of the videos.

6. After creating custom row come to MainActivity.java and add the below code to it. Here we are generating dummy list of videos that we are getting from string.xml.

7. For adding items to ArrayList we need a pojo class naming YoutubeVideoModel.java and add the below code to it.

8. Now after creating pojo class lets create adapter class for RecyclerView with name of YoutubeVideoAdapter.java and add the below code to it.

In the above class the main code which is responsible to show the thumbnail of video is below:

9. I am keeping the Youtube API Key in Constants.java class that we got from Google Developer Console.

10. For RecyclerView holder class lets create a class with name YoutubeViewHolder.java and find the id of all the views.

 

List of Videos using Youtube Thumbnail View

List of Videos using Youtube Thumbnail View

Till here we are done with YoutubeThumbnailView. Now lets see how to play a selected video using YoutubePlayerAPI.

11. To play a youtube video when user select any item from RecyclerView lets create one more xml layout naming youtube_player_activity.xml and add the  com.google.android.youtube.player.YouTubePlayerView which is responsible to play the video.

12. Now lets create YoutubePlayerActivity.java activity where we will play the youtube video.

NOTE : You need to extend Activity with YoutubeBaseActivity.

Youtube Player is having three different type of Player Style:

  1. Default Player Style : Youtube Player default style is DEFAULT only. In this style it contains all the control that we get in Youtube Android App.
Default Player Style

Default Player Style

2. Minimal Player Style : In this style we only get Play/Pause button with showing video progress at bottom.

Minimal Player Style

Minimal Player Style

3. Chromeless Player Style : This style doesn’t contain any controls.

Chromeless Player Style

Chromeless Player Style

 

Full Screen Mode or Landscape Mode

Full Screen Mode or Landscape Mode

13. Don’t forget to give Internet permission in your AndroidManifest.xml file else your app will not run.

14. Finally all done, now you can also make your app where you can play Videos from Youtube.

Thanks. :)

Download Source Code – >

About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)