Android YoutubePlayerView Library with Kotlin
Last Updated :
04 Nov, 2022
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
android:id = "@+id/container"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< 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" />
< 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() {
lateinit var openYoutubeBtn: Button
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
openYoutubeBtn = findViewById(R.id.idBtnOpenYoutubePlayer)
openYoutubeBtn.setOnClickListener {
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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity2" >
< 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() {
lateinit var youtubePlayerView: YouTubePlayerView
var videoID = "vG2PNdI8axo"
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
requestWindowFeature(Window.FEATURE_NO_TITLE)
window.setFlags(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN
)
setContentView(R.layout.activity_main2)
actionBar?.hide()
youtubePlayerView = findViewById(R.id.youTubePlayerView)
youtubePlayerView.enterFullScreen()
youtubePlayerView.toggleFullScreen()
lifecycle.addObserver(youtubePlayerView)
youtubePlayerView.getPlayerUiController()
youtubePlayerView.enterFullScreen()
youtubePlayerView.toggleFullScreen()
youtubePlayerView.addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
override fun onReady(youTubePlayer: YouTubePlayer) {
youTubePlayer.loadVideo(videoID, 0f)
}
override fun onStateChange(
youTubePlayer: YouTubePlayer,
state: PlayerConstants.PlayerState
) {
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...