Biblioteca Android YoutubePlayerView con Kotlin

Muchas aplicaciones muestran videos dentro de su aplicación para mostrar contenido de video directamente desde YouTube. Para mostrar estos videos de YouTube dentro de las aplicaciones de Android, debemos integrar la Vista del reproductor de YouTube dentro de la aplicación de Android. En este artículo, veremos cómo implementar la biblioteca de vistas del reproductor de YouTube en Android usando Kotlin. 

Nota : si está buscando implementar la vista del reproductor de YouTube en su aplicación de Android usando Java. Consulte el siguiente artículo: Cómo implementar la biblioteca de vistas del reproductor de YouTube en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregue el archivo jar dentro de la carpeta libs en Android Studio

Descargue el archivo jar desde el enlace aquí . Para agregar este archivo, abra su proyecto de Android en modo «Proyecto». Luego vaya a Nombre de su proyecto> aplicación> libs y haga clic con el botón derecho en él y pegue los archivos JAR descargados.

Paso 3: agregar la dependencia en su archivo build.gradle

Para agregar esta dependencia. Navegue hasta el nombre de su aplicación > aplicación > y podrá ver el archivo build.gradle. Dentro de ese archivo, agregue la dependencia en la sección de dependencias. 

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

Después de agregar la dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?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>

Paso 5: crea una nueva actividad vacía

Ahora crearemos una nueva actividad donde mostraremos nuestro reproductor de videos de YouTube. Para crear una nueva actividad, vaya a la aplicación > java > el nombre del paquete de su aplicación y haga clic con el botón derecho en él > Nuevo > Actividad > Actividad vacía > Asigne un nombre a su actividad y asegúrese de mantener su idioma como Kotlin. Ahora su nueva actividad ha sido creada. (Aquí hemos dado el nombre de la actividad como MainActivity2).

Paso 6: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

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 ith 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)
        }
 
    }
}

Paso 7: trabajar con el archivo activity_main2.xml

Vaya a la aplicación > res > diseño > actividad_principal2.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main2.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?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>

Paso 8: trabajar con el archivo MainActivity2.kt

Vaya al archivo MainActivity2.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity2.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

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)
            }
        })
    }
}

Paso 9: cambiar la orientación de la actividad_principal2.xml en el archivo AndroidManifest.xml 

Vaya a aplicación > manifiesto > AndroidManifest.xml y agregue el siguiente código en la etiqueta de la aplicación para nuestra MainActivity2. 

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

Ahora ejecute su aplicación para ver el resultado. 

Producción: