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

Youtube Player Banner

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. :)

 

27 Comments

Marina
Tuesday, May 15th, 2018

Hi. Help please. tools: context=”.MainActivity” – good, and tools:context=”.Youtube Player Activity ” > underlined. How to fix?

Dr. Droid
Tuesday, May 15th, 2018

Hi Marina,

You can remove that tools:context its not that important.

Thanks

Marina
Tuesday, May 15th, 2018

Thank you for the answer! The code worked.

Marina
Tuesday, May 15th, 2018

But the video does not show…

Dr. Droid
Tuesday, May 15th, 2018

Hi Marina,

Can you tell me what is the exact issue?

According to me the issues can be:
1. Invalid API_Key
2. Invalid SHA1 Fingerprint.

Please cross check this.

Thanks

Marina
Thursday, May 24th, 2018

Hello! Everything works!!!! Thank you very much for this lesson! I couldn’t do it because the user must have a YouTube app on their phone. If YouTube is available, the picture is displayed. I am from Russia, so forgive the mistakes in my answer.

Sonam
Tuesday, September 11th, 2018

Its not working. Pls help

Dr. Droid
Monday, September 17th, 2018

Hi Sonam,

Can you tell me what exactly is not working.
And please cross check if you miss something.

Thanks

Mark Steven
Monday, October 1st, 2018

Are there any solution for All the videos of you tube channel.I mean I want to play all the videos of the you tube channel.How to do it with channel ID ?Thank you

Dr. Droid
Monday, October 8th, 2018

Hi Mark,

Please follow the Youtube Docs : https://developers.google.com/youtube/android/player/

Here you will get each and every stuff that you can do with Youtube APIs.

Thanks

Mark
Monday, October 1st, 2018

Are there any solution for All videos.I mean How to add youtube channel all videos just like above example.Thank you

armaan
Wednesday, October 3rd, 2018

videos are showing in list but does not play why?

Dr. Droid
Monday, October 8th, 2018

Hi Armaan,

Please follow the tutorial properly and make sure replacing the API Keys with your own.

Thanks

Nia Arora
Friday, October 26th, 2018

How you implemented click event on recycler view items? We need to create interface for that?

Dr. Droid
Friday, October 26th, 2018

Hi Nia,

Yes there is an interface for Click Event. Download the code and you will find the interface class in it.

Thanks

Navya
Friday, October 26th, 2018

Hi,

You have less videos so you created array in strings. But I have 150 videos, How can I do that?. I need to create array for all video names?

Dr. Droid
Friday, October 26th, 2018

Hi Navya,

You can create array also but that is not good approach. Instead you can use YoutubeAPIs to get all videos on your channel.

Please follow the Youtube API Docs : https://developers.google.com/youtube/android/player/

Thanks

Jhamil
Saturday, November 17th, 2018

Hi, can you also automate video infos i saw a example somewhere which where you can obtain video duration title channel name descriptions and more using the api itself and the collected data will be displayed for textviews

Dr. Droid
Sunday, November 18th, 2018

Hi Jhamil,

Yes it can be done but as i have only shown a demo with basic info. There are lot in Youtube APIs.

Please follow the Youtube API Docs : https://developers.google.com/youtube/android/player/

Thanks

Roman Calidt
Monday, December 24th, 2018

it gives me error does not initialize YouTube player

Dr. Droid
Wednesday, December 26th, 2018

Hi Roman,

Please make sure you have initialised Youtube with YOUR_DEVELOPER_KEY (not mine).

Thanks

Aunkit
Wednesday, January 2nd, 2019

Hi sir. Amazing work by you. Thanks a ton. Everything works fine but when I tap on the the items . It says “An error occured while initializing the YouTube player.”
I’ve downloaded your source code and I’m directly running the app from there. I’ve also replaced your API key with mine. And I also am testing it on a real device where the Youtube app is already present.

Dr. Droid
Wednesday, January 2nd, 2019

Hi Aunkit,

First of all Thank You!!

Can you confirm whether you have enabled Youtube API at Google Developer Console?

Thanks

Ethan Kim
Saturday, April 27th, 2019

Hello! I was just going by through your tutorial, and I wanted to ask you a question:

I have created a similar app like this tutorial and used the same method as yours to create a recycler view. but instead of using a manual list of video IDs, I bring the title and video of a youtube channel’s uploaded videos using the Youtube Data API v3. However, I have noticed a problem.

When you scroll very fast or reload the activity by rotating the screen. I have realized that there is a java exception error:
[java.lang.IllegalStateException: Not connected. Call connect() and wait for onConnected() to be called.]

This may be because the client device is not connected to the API when the application is loading other processes. Do you know a way to make sure the client is always connected to the API? Thank you!

Please feel free to contact me with the email.

Priyanka
Saturday, May 30th, 2020

Hii Dr. Droid,
Can we play videos in recycler view only not another activity or fragment?

Akshay Ashok
Wednesday, March 3rd, 2021

Hi David,
I changed the developer_API_key string to some meaningless text instead of putting the actual API key and everything is still working perfectly! How??
Thank you.

Post comment

Your email address will not be published. Required fields are marked *