How to Implement YoutubePlayerView Library in Android?
Last Updated :
16 Aug, 2022
If you are looking to display YouTube videos inside your app without redirecting your user from your app to YouTube then this library is very helpful for you to use. With the help of this library, you can simply play videos from YouTube with the help of a video id inside your app itself without redirecting your user to YouTube. Now we will see the implementation of this library in our Android App. We are going to implement this project using both Java and Kotlin Programming Language for Android.
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. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Add the JAR File inside the Libs Folder in Android Studio
Download the JAR file from this link. To add this file open your android project in “Project” mode as shown in the below image.
Then go to Your Project Name > app > libs and right-click on it and paste the downloaded JAR files. You may also refer to the below image.
Note: You may also refer to this article How to Import External JAR Files in Android Studio?
Step 3: Adding Dependency to the build.gradle File
Go to Module build.gradle file and add this dependency.
implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:core:10.0.3'
Now click on the “sync now” option which you will get to see in the top right corner after adding this library. After that, we are ready for integrating the YouTube video player into the app.
Step 4: Working with the activity_main.xml File
Now change the project tab in the top left corner to Android. After that navigate to the app > res > layout > activity_main.xml. Inside this, we will create a simple button that will redirect to a new activity where we will play our YouTube video. Below is the XML code snippet for the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< Button
android:id = "@+id/idBtnPlayVideo"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:text = "Play Youtube Video"
android:textColor = "@color/white" />
</ 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 select Java/Kotlin as its language. Now your new activity has been created. (Here we have given the activity name as VideoPlayerActivity).
Step 6: Implement YoutubePlayerView inside the New Activity
Below is the code for the activity_video_player.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".VideoPlayerActivity" >
< com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
android:id = "@+id/videoPlayer"
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" >
</ com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView >
</ androidx.constraintlayout.widget.ConstraintLayout >
|
Step 7: Working with the VideoPlayerActivity File
Before working with the VideoPlayerActivity file let’s have a look at how to get the video id of any YouTube video. Open YouTube and search for any video which you want to play inside your app. Play that video inside your browser. In the top section of your browser, there will be an address bar where you can get to see the URL for that video. For example, here we have taken the below URL.
https://www.youtube.com/watch?v=vG2PNdI8axo
Inside the above URL, the video ID is present in the extreme left part i.e after the v = sign is your video id. In the above example, the video ID will be
vG2PNdI8axo
In this way, we can get the URL for any video. Now go to the VideoPlayerActivity file and refer to the following code. Below is the code for the VideoPlayerActivity file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import androidx.annotation.NonNull;
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;
public class VideoPlayerActivity extends AppCompatActivity {
String video_id = "vG2PNdI8axo" ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_video_player);
getSupportActionBar().hide();
final YouTubePlayerView youTubePlayerView = findViewById(R.id.videoPlayer);
youTubePlayerView.enterFullScreen();
youTubePlayerView.toggleFullScreen();
getLifecycle().addObserver(youTubePlayerView);
youTubePlayerView.getPlayerUiController();
youTubePlayerView.enterFullScreen();
youTubePlayerView.toggleFullScreen();
youTubePlayerView.addYouTubePlayerListener( new AbstractYouTubePlayerListener() {
@Override
public void onReady( @NonNull YouTubePlayer youTubePlayer) {
youTubePlayer.loadVideo(video_id, 0 );
}
@Override
public void onStateChange( @NonNull YouTubePlayer youTubePlayer, @NonNull PlayerConstants.PlayerState state) {
super .onStateChange(youTubePlayer, state);
}
});
}
}
|
Kotlin
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 VideoPlayerActivity : AppCompatActivity() {
var video_id = "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_video_player)
supportActionBar?.hide()
val youTubePlayerView: YouTubePlayerView = findViewById(R.id.videoPlayer)
youTubePlayerView.enterFullScreen()
youTubePlayerView.toggleFullScreen()
lifecycle.addObserver(youTubePlayerView)
youTubePlayerView.getPlayerUiController()
youTubePlayerView.enterFullScreen()
youTubePlayerView.toggleFullScreen()
youTubePlayerView.addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
fun onReady(youTubePlayer: YouTubePlayer) {
youTubePlayer.loadVideo(video_id, 0 )
}
fun onStateChange(youTubePlayer: YouTubePlayer, state: PlayerConstants.PlayerState) {
super .onStateChange(youTubePlayer, state)
}
})
}
}
|
Step 8: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
Java
import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
Button playBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
playBtn = findViewById(R.id.idBtnPlayVideo);
playBtn.setOnClickListener(v -> {
Intent i = new Intent(MainActivity. this , VideoPlayerActivity. class );
startActivity(i);
});
}
}
|
Kotlin
import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
lateinit var playBtn: Button
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
playBtn = findViewById(R.id.idBtnPlayVideo)
playBtn.setOnClickListener {
val i = Intent( this , VideoPlayerActivity:: class .java)
startActivity(i)
}
}
}
|
Step 9: Adding Permissions to the AndroidManifest.xml File
In AndroidManifest.xml, one needs to include the below permission, in order to access the internet. Navigate to the app > AndroidManifest.xml file there you have to add the below permissions.
<!-- For internet usage -->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Along with this, you will get to see an activity section inside your application tag. Inside that, add your video player’s activity screen orientation to landscape mode.
<!-- Here my activity name was VideoPlayerActivity -->
<activity android:name=".VideoPlayerActivity"
android:screenOrientation="landscape">
</activity>
Below is the code for the complete AndroidManifest.xml file:
XML
<? xml version = "1.0" encoding = "utf-8" ?>
package = "com.gfg.youtubeplayerview" >
< uses-permission android:name = "android.permission.INTERNET" />
< uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" />
< application
android:allowBackup = "true"
android:icon = "@mipmap/ic_launcher"
android:label = "@string/app_name"
android:roundIcon = "@mipmap/ic_launcher_round"
android:supportsRtl = "true"
android:theme = "@style/Theme.YoutubePlayerView" >
< activity android:name = ".VideoPlayerActivity"
android:screenOrientation = "landscape" >
</ activity >
< activity android:name = ".MainActivity" >
< intent-filter >
< action android:name = "android.intent.action.MAIN" />
< category android:name = "android.intent.category.LAUNCHER" />
</ intent-filter >
</ activity >
</ application >
</ manifest >
|
Output: Run the App on a Physical Device
Check out the project on the below GitHub link: https://github.com/ChaitanyaMunje/YoutubePlayerView
Share your thoughts in the comments
Please Login to comment...