Android YoutubePlayerView Library with Kotlin

Many applications display videos within their application for displaying video content directly from YouTube. For displaying these YouTube videos within android applications we have to integrate YouTube Player View within the android application. In this article, we will take a look at How to Implement YouTube Player View Library in Android using Kotlin. 

Note: If you are looking to implement YouTube Player view in your android application using Java. Check out the following article: How to Implement YouTube Player View Library in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add jar file inside the libs folder in Android Studio

Download the jar file from the link here. To add this file open your android project in “Project” mode. Then go to Your Project Name > app > libs and right-click on it and paste the downloaded JAR files.

Step 3: Adding the dependency in your build.gradle file

To add this dependency. Navigate to your app’s name > app > and you will get to see the build.gradle file. Inside that file add the dependency in the dependencies section. 

implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:core:10.0.3'

After adding the dependency simply sync your project to install it. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--on below line we are creating a
        simple text view for heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="@string/app_name"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!--adding button to open youtube player view-->
    <Button
        android:id="@+id/idBtnOpenYoutubePlayer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVHead"
        android:layout_margin="20dp"
        android:padding="3dp"
        android:text="Open YouTube Player"
        android:textAllCaps="false" />

</RelativeLayout>

Step 5: Create a new empty activity

Now we will create a new activity where we will display our YouTube video player. To create a new activity navigate to the app > java > your app’s package name and right-click on it > New > Activity > Empty Activity > Give a name to your activity and make sure to keep its language as Kotlin. Now your new activity has been created. (Here we have given the activity name as MainActivity2).

Step 6: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // on below line we are creating
    // a variable for our button
    lateinit var openYoutubeBtn: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // on below line we are initializing our views with their ids.
        openYoutubeBtn = findViewById(R.id.idBtnOpenYoutubePlayer)

        // on below line we are adding click
        // listener for our youtube button.
        openYoutubeBtn.setOnClickListener {
            // on below line we are opening our activity for playing a video
            val i = Intent(this@MainActivity, MainActivity2::class.java)
            startActivity(i)
        }

    }
}

Step 7: Working with activity_main2.xml file

Navigate to the app > res > layout > activity_main2.xml and add the below code to that file. Below is the code for the activity_main2.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <!--Youtube Player view which will
        play our youtube video-->
    <com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
        android:id="@+id/youTubePlayerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:showFullScreenButton="false" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 8: Working with the MainActivity2.kt file

Go to the MainActivity2.kt file and refer to the following code. Below is the code for the MainActivity2.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import androidx.appcompat.app.AppCompatActivity
import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.PlayerConstants
import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.YouTubePlayer
import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.listeners.AbstractYouTubePlayerListener
import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView

class MainActivity2 : AppCompatActivity() {

    // on the below line we are creating a variable
    // for our youtube player view.
    lateinit var youtubePlayerView: YouTubePlayerView

    // on below line we are creating a
    // string variable for our video id.
    var videoID = "vG2PNdI8axo"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // on below line we are setting
        // screen orientation to landscape
        requestWindowFeature(Window.FEATURE_NO_TITLE)

        // on below line we are setting flags to
        // change our activity to full screen
        window.setFlags(
            WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN
        )
        setContentView(R.layout.activity_main2)

        // on below line we are hiding our action bar
        actionBar?.hide()

        // on below line we are initializing
        // our youtube player view with its id.
        youtubePlayerView = findViewById(R.id.youTubePlayerView)

        // on below line we are setting full
        // screen for our youtube player view.
        youtubePlayerView.enterFullScreen()
        youtubePlayerView.toggleFullScreen()

        // on below line we are getting observer
        // for our youtube player view.
        lifecycle.addObserver(youtubePlayerView)

        // on below line we are getting
        // youtube player controller ui.
        youtubePlayerView.getPlayerUiController()

        // on below line we are
        // entering it to full screen.
        youtubePlayerView.enterFullScreen()
        youtubePlayerView.toggleFullScreen()

        // on below line we are adding listener
        // for our youtube player view.
        youtubePlayerView.addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
            override fun onReady(youTubePlayer: YouTubePlayer) {
                // loading the selected video
                // into the YouTube Player
                youTubePlayer.loadVideo(videoID, 0f)
            }

            override fun onStateChange(
                youTubePlayer: YouTubePlayer,
                state: PlayerConstants.PlayerState
            ) {
                // this method is called if video has ended,
                super.onStateChange(youTubePlayer, state)
            }
        })
    }
}

Step 9: Changing orientation for the activity_main2.xml in AndroidManifest.xml file 

Navigate to app > manifest > AndroidManifest.xml and add the below code in the application tag for our MainActivity2. 

XML

<activity
  android:name=".MainActivity2"
  android:screenOrientation="landscape"
  android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar" />

Now run your application to see the output of it. 

Output: