Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Implement YoutubePlayerView Library in Android?

  • Difficulty Level : Easy
  • Last Updated : 18 Feb, 2021

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 video id inside your app itself without redirecting your user to YouTube. Now we will see towards the implementation of this library in our Android App. Note that we are going to implement this project using the Java language.     

Step by Step implementation 

Step 1: Create a New Project

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java 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 as shown in the below image.

Import External JAR Files in Android Studio

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: Now add the dependency in your build.gradle file

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

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 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"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Button which is used to navigate 
        to video player screen-->
    <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 make sure to keep its language as Java. 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 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".VideoPlayerActivity">
  
    <!--Youtube Player view which will
        play our youtube video-->
    <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.java file



Before working with the VideoPlayerActivity.java 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 URL for any video. Now go to the VideoPlayerActivity.java file and refer to the following code. Below is the code for the VideoPlayerActivity.java 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 {
    // id of the video 
    // which we are playing.
    String video_id = "vG2PNdI8axo";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
          
        // below two lines are used to set our 
        // screen orientation in landscape mode.
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                             WindowManager.LayoutParams.FLAG_FULLSCREEN);
  
        setContentView(R.layout.activity_video_player);
          
        // below line of code is 
        // to hide our action bar.
        getSupportActionBar().hide();
          
        // declaring variable for youtubeplayer view
        final YouTubePlayerView youTubePlayerView = findViewById(R.id.videoPlayer);
          
        // below line is to place your youtube player in a full screen mode (i.e landscape mode)
        youTubePlayerView.enterFullScreen();
        youTubePlayerView.toggleFullScreen();
          
        // here we are adding observer to our youtubeplayerview.
        getLifecycle().addObserver(youTubePlayerView);
          
        // below method will provides us the youtube player
        // ui controller such as to play and pause a video 
        // to forward a video
        // and many more features.
        youTubePlayerView.getPlayerUiController();
          
        // below line is to enter full screen mode.
        youTubePlayerView.enterFullScreen();
        youTubePlayerView.toggleFullScreen();
  
        // adding listener for our youtube player view.
        youTubePlayerView.addYouTubePlayerListener(new AbstractYouTubePlayerListener() {
            @Override
            public void onReady(@NonNull YouTubePlayer youTubePlayer) {
                // loading the selected video into the YouTube Player
                youTubePlayer.loadVideo(video_id, 0);
            }
  
            @Override
            public void onStateChange(@NonNull YouTubePlayer youTubePlayer,
                                      @NonNull PlayerConstants.PlayerState state) {
                // this method is called if video has ended,
                super.onStateChange(youTubePlayer, state);
            }
        });
    }
}

Step 8: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java 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.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
    // variable for our button
    Button playBtn;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // Initialize our Button
        playBtn = findViewById(R.id.idBtnPlayVideo);
          
        // we have set onclick listener for our button
        playBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // we have declared an intent to open new activity.
                Intent i = new Intent(MainActivity.this, VideoPlayerActivity.class);
                startActivity(i);
            }
        });
    }
}

Step 9: Add internet permission in the Manifest file

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 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.gtappdevelopers.youtubeplayerview">
  
    <!--For internet usage-->
    <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">
        <!--Here my activity name was VideoPlayerActivity-->
        <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 Real Device 

Check out the project on the below GitHub link: https://github.com/ChaitanyaMunje/YoutubePlayerView




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!