How to embed YouTube videos into your Android app using Kotlin

How to embed YouTube videos into your Android app using Kotlin

In this tutorial, I’m going to show you how to embed a youtube video in your android app with three different methods, using the official library (YouTube Player API), a 3rd party library called Android YouTube Player, and WebView.

1st Method (YouTube Player API)

Pros
  • Official library provided by YouTube
Cons
  • Has bugs that haven’t been fixed since 2015
  • Need an API KEY
  • Doesn’t get updates anymore
  • You have to calculate the aspect ratio of the video manually

YouTube Player API is the official way to embed a youtube video in your android app, the problem with this library is they don’t maintain it anymore, the latest update was in 2015 (1.2.2 version), but besides that, it’s a recommended method if you don’t want to display a lot of videos in your app.

Get the API KEY from Google

First, we have to get our API key from the Google Developers Console.

Let’s create a project by pressing the ‘CREATE‘ button:

Press ‘CREATE’ to create a project

In the new window, type a name for the project and press ‘CREATE‘:

Create a project

Go back to the Dashboard and press the ‘ENABLE APIS AND SERVICES‘ button:

Press ‘ENABLE APIS AND SERVICES

Now, we have to find the YouTube Data API v3, use the search bar at the top of the screen to find it quicker, and enabled it:

Search ‘YouTube’ to find it quicker
Enable the API

Now, choose Credentials on the left sidebar and press Create credentials.

In the dropdown menu, choose API KEY:

Create an API KEY by choosing ‘API key’

Done! Now we have generated our API KEY and it’s ready to use it in our embed YouTube Player later.

Add YouTube Player API into our app

First, we have to add the library to our project. Let’s go and download the jar file from here.

Download the jar file

After you downloaded it, unzip it, and go to the libs folder and copy the YouTubeAndroidPlayerApi.jar file.

Now go to our project and change from Android to Project in the dropdown menu and paste the jar file like that:

Change from Android to Project in the dropdown menu
Paste the jar file in the libs folder

Now, let’s insert the libs folder (if it does not already exist) in our project by adding the following line in our build.gradle file:

Now it’s time to add the YouTube player view to our layout, by adding it like that:

Adding YouTube Player API into our layout

Let’s go to our Kotlin class with the YouTube view and add the following code:

At line 11 we have to replace YOUR_API_KEY with the API KEY we created before.

Run your project and see the results!

2nd Method (3rd Party Library Android YouTube Player)

Pros
  • Highly customizable
  • Gets updates
  • It’s the fastest from the other two methods
  • Doesn’t need an API KEY
  • Plays also copyrighted videos (e.g music videos)
  • Calculates the aspect ratio of the video automatically
Cons
  • Some devs have reported that their app has been rejected from the Google Play Store. (Never happened to me with my apps)

In this method, we’re going to use the 3rd party library Android YouTube Player, made by Pierfrancesco Soffritti, to embed our YouTube video into our app.

Add Android YouTube Player Library into our app

Let’s start by adding the library to build.gradle file:

Not let’s add our Youtube view to our layout like the following example:

Adding Android YouTube Player View into our layout

Let’s go to our Kotlin class with the youtube view and add the following code:

As you see, in the lines 15-31 we have a listener for the full-screen button. When the user opens the video in full-screen mode, we hide the ActionBar and the StatusBar (available only for Android 4.1 and above) and we unhide them when closes it.

For more customization check out the documentation here.

.. and done!

3rd Method(WebView)

Pros
  • Very quick to setup
  • Doesn’t need an API KEY.
  • No need to install any library
Cons
  • Doesn’t play copyrighted videos (It says ‘Video unavailable’)
  • Poor performance
  • Zero customization
  • You have to calculate the aspect ratio of the video manually

Add YouTube Player with WebView into our app

First, let’s add a WebView into our layout like that:

Add WebView in our layout

Now, in our Kotlin class let’s add the following code:

We need to have javascript enabled in our WebView to play embed YouTube videos.

Run it… and Voila!

You can find the final project here

If you have any questions feel free to DM me on Twitter @johncodeos or leave a comment below!

Leave a Reply

avatar
  Subscribe  
Notify of

Stay Connected

Newsletter

Subcribe for weekly emails! Get my posts of the week right in your inbox!