En este momento estás viendo Cómo Crear App de Televisión En Android Studio

Cómo Crear App de Televisión En Android Studio

En esta ocasión, crearemos una App de Televisión para Android.

En primer lugar, nos dirigimos al archivo strings.xml, añadimos texto para seleccionar un canal.

<resources>
    <string name="app_name">Televisión</string>
    <string name="select">Selecciona tu televisión favorita</string>
</resources>

Ahora nos vamos al archivo colors.xml y añadimos los colores.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="colorTeban">#FF420042</color>
</resources>

Una vez editado, pasamos al archivo themes en su modo night y hacemos referencia a los colores que agregamos, procedemos de la misma manera para la versión light.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Curso3Television" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>

        <item name="colorOnSecondary">@color/colorTeban</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorOnSecondary</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Posteriormente nos dirigimos al archivo AndroidManifest.xml y colocamos los permisos para que nuestra app pueda acceder a internet.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mipaquete.television">

    <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.Curso3Television">
        <activity
            android:name=".Television"
            android:exported="false"
            android:screenOrientation="landscape"/>
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Ahora nos dirigimos al archivo activity_main.xml, como se puede observar esta limpio y listo para que coloquemos nuestro código.

Colocamos el atributo gravedad y fondo.

Creamos un textview con su respectivo identificador, colocamos ancho, alto, márgenes, texto, alineación del texto, color y tamaño.

Luego creamos un RecyclerView, de igual manera colocamos su identificador, ancho, alto y barras de desplazamiento.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_gravity="center"
    android:background="@drawable/ab_gradient"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:text="@string/select"
        android:textAlignment="center"
        android:textColor="@color/ic_launcher_background"
        android:textSize="20sp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/item_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        />

</LinearLayout>

Ahora nos dirigimos al archivo list_item.xml, donde colocaremos un textview con su identificador, ancho, alto, márgenes, gravedad y tamaño de texto.

El archivo list_item representa un item que estará dentro del RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/row_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:textSize="20sp" />
</LinearLayout>

Vamos a dar un vistazo rápido para ver como esta quedando, todo esta bien.

Luego nos dirigimos al archivo Television.java, colocamos los atributos para el control de la app.

dentro del metodo oncreate, insertamos el código para recibir datos del canal seleccionado desde la pantalla principal.

Hacemos referencia al videoview que fue creado, colocamos un dialogo de proceso para mostrar el mensaje de carga

Nos adelantamos con el método playVideo, posteriormente creamos el respectivo método, dentro de playVideo colocamos el bloque try catch en caso que ocurra un error inesperado, luego le añadimos formato

Inicializamos el controlador de medios, hacemos referencia a la url donde se obtendrá el streaming, colocamos un listener para comenzar a reproducir el canal de televisión una vez que esté listo.

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.graphics.PixelFormat;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.Toast;
import android.widget.VideoView;

public class Television extends AppCompatActivity {

    private String videoUrl = "";
    private ProgressDialog pd;
    VideoView videoView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_television);

        Bundle b=getIntent().getExtras();
        if (b != null) {
            videoUrl = getIntent().getStringExtra("url");
        }

        videoView = findViewById(R.id.videoView);
        pd = new ProgressDialog(this);
        pd.setMessage("Almacenando en búfer...");
        pd.setCancelable(true);
        playVideo();
    }

    private void playVideo() {
        try {
            getWindow().setFormat(PixelFormat.TRANSLUCENT);
            MediaController mediaController = new MediaController(this);
            mediaController.setAnchorView(videoView);

            Uri videoUri = Uri.parse(videoUrl);

            videoView.setVideoURI(videoUri);
            videoView.requestFocus();
            videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mediaPlayer) {
                    pd.dismiss();
                    //videoView.setVideoPath("http://***.net/livedemo/_definst_/stream3.stream/playlist.m3u8?wowzasessionid=773395207");

                    videoView.start();
                }
            });
        }
        catch (Exception e) {
            Toast.makeText(this, ""+e.getMessage(), Toast.LENGTH_SHORT).show();
        }
    }
}

Ahora nos vamos al archivo MainActivity.java, añadimos un parámetro.

Dentro del método onCreate, inicializamos una lista de items, los cuales serán los canales de televisión.

Inicializamos el adaptador del RecyclerView y posteriormente añadimos los items al adaptador.

Configuramos el RecyclerView, colocamos un layout, animación para los items.

Finalmente añadimos las urls de nuestros canales favoritos, en este caso colocaré tres.

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.app.ProgressDialog;
import android.graphics.PixelFormat;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.Toast;
import android.widget.VideoView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList<Item> itemList = new ArrayList<Item>();

        ItemArrayAdapter itemArrayAdapter = new ItemArrayAdapter(this, R.layout.list_item, itemList);
        recyclerView = (RecyclerView) findViewById(R.id.item_list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(itemArrayAdapter);
        itemList.add(new Item("NBC (USA)", "https://nbcnews3.akamaized.net/hls/live/723429/NBCNewsNowa418c506/clear/hdntl=exp=1648418589~acl=%2f*~data=hdntl~hmac=dc97c8bf63749f1a9241ff47afe135f2f7fb60c8c0a91c951cc0109002a199be/VIDEO_0_6596000.m3u8"));
        itemList.add(new Item("Edge Sport", "https://edgesport-samsungus.amagi.tv/playlist1080p.m3u8"));
        itemList.add(new Item("Russia Today ", "https://rt-uk.rttv.com/live/rtuk/playlist.m3u8"));
    }

}

A continuación, te dejo un video con la implementación.

Deja una respuesta