¿Cómo usar pestañas personalizadas de Chrome en Android?

Muchas aplicaciones tienen que mostrar diferentes tipos de páginas web dentro de su aplicación. Para mostrar páginas web en Android, hay muchas funciones con las que podemos mostrar páginas web en nuestra aplicación de Android. Los desarrolladores generalmente prefieren usar WebViewo redirigir a los usuarios a cualquier navegador dentro de su aplicación. Pero abrir la página web dentro de un navegador y mostrar una página web en Android WebView a veces se convierte en una tarea pesada que tenemos que realizar. En lugar de usar WebView y abrir una página web en el navegador. Simplemente podemos usar las pestañas cromadas personalizadas en nuestra aplicación para hacer esta tarea más fácil y liviana. Muchas aplicaciones utilizan esta función de pestañas cromadas personalizadas para redirigir a sus usuarios desde su aplicación a cualquier página web a través de pestañas cromadas personalizadas. Entonces, en este artículo, veremos la implementación de pestañas personalizadas de Chrome en Android.

Implementación de pestañas personalizadas de Chrome en Android

Al usar la pestaña Custom Chrome, simplemente mostraremos la página web de GFG con un clic de botón en nuestra aplicación de Android. A continuación se proporciona un GIF de muestra a partir del cual conocerá lo que vamos a hacer en este artículo. Tenga en cuenta que estamos utilizando el lenguaje Java para la implementación de las pestañas de Chrome en Android.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

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

Paso 2: Agregar dependencia a build.gradle (Módulo: aplicación)

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias. 

implementación ‘androidx.browser:navegador:1.2.0’

Ahora la opción de sincronización aparecerá en la esquina superior derecha, haga clic en la opción sincronizar ahora.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Button
        android:id="@+id/idBtnCustomChromeTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Custom Chrome Tabs" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

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

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.browser.customtabs.CustomTabsIntent;
import androidx.core.content.ContextCompat;
  
public class MainActivity extends AppCompatActivity {
  
    Button customChromeTabBtn;
      
    // url for loading in custom chrome tab
    String url = "https://www.geeksforgeeks.org/";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing button for opening custom chrome tabs.
        customChromeTabBtn = findViewById(R.id.idBtnCustomChromeTab);
        customChromeTabBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                  
                // initializing object for custom chrome tabs.
                CustomTabsIntent.Builder customIntent = new CustomTabsIntent.Builder();
                  
                // below line is setting toolbar color 
                // for our custom chrome tab.
                customIntent.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.purple_200));
                  
                // we are calling below method after 
                // setting our toolbar color.
                openCustomTab(MainActivity.this, customIntent.build(), Uri.parse(url));
            }
        });
    }
  
    public static void openCustomTab(Activity activity, CustomTabsIntent customTabsIntent, Uri uri) {
        // package name is the default package
        // for our custom chrome tab
        String packageName = "com.android.chrome";
        if (packageName != null) {
              
            // we are checking if the package name is not null
            // if package name is not null then we are calling 
            // that custom chrome tab with intent by passing its
            // package name.
            customTabsIntent.intent.setPackage(packageName);
              
            // in that custom tab intent we are passing 
            // our url which we have to browse.
            customTabsIntent.launchUrl(activity, uri);
        } else {
            // if the custom tabs fails to load then we are simply 
            // redirecting our user to users device default browser.
            activity.startActivity(new Intent(Intent.ACTION_VIEW, uri));
        }
    }
}

Producción: