Un esempio completo è disponibile sull’applicazione di esempio GitHub. Contiene classi riutilizzabili per personalizzare l’interfaccia utente, connettersi al servizio in background e gestire il ciclo di vita dell’applicazione e dell’attività della scheda personalizzata.

Se segui le indicazioni di questa pagina, sarai in grado di creare una grande integrazione.

Il primo passo per un’integrazione di schede personalizzate è aggiungere la libreria del browser AndroidX al tuo progetto. Aprire il fileapp/build.gradle e aggiungere la libreria del browser alla sezione dipendenze.

dependencies {
...
implementation "androidx.browser:browser:1.3.0"
}

Una volta aggiunta la libreria del Browser al progetto ci sono due serie di possibili personalizzazioni:

• Personalizzazione dell’interfaccia utente e interazione con le schede personalizzate.
• Rendere il caricamento della pagina più veloce e mantenere viva l’applicazione.

Le personalizzazioni dell’interfaccia utente vengono eseguite utilizzando le classiCustomTabsIntent eCustomTabsIntent.Builder ; i miglioramenti delle prestazioni si ottengono utilizzando CustomTabsClient per connettersi al servizio Schede personalizzate, riscaldare il browser e fargli sapere quali URL verranno aperti.

Apertura di una scheda personalizzata #

ACustomTabsIntent.Builder può essere utilizzato per configurare una scheda personalizzata. Una volta pronto, chiamaCustomTabsIntent.Builder.build per creare unCustomTabsIntent e avvia l’URL desiderato conCustomTabsIntent.launchUrl.

String url = ¨https://paul.kinlan.me/¨;
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));

Configura il colore della barra degli indirizzi #

Uno degli aspetti più importanti (e più semplici da implementare) delle schede personalizzate è la possibilità di modificare il colore della barra degli indirizzi per essere coerente con il tema della tua app.

Lo snippet sottostante cambia il colore di sfondo per la barra degli indirizzi. colorInt è un int che specifica un Color.

int coolorInt = Color.parseColor("#FF0000"); //red
builder.setToolbarColor(colorInt);

Configura un’azione personalizzata pulsante #

builder.setActionButton(icon, description, pendingIntent, tint);

Come lo sviluppatore dell’app, avete controllo completo sopra il Pulsante di Azione che viene presentato agli utenti all’interno della scheda del browser.

Nella maggior parte dei casi, questa sarà un’azione primaria come la Condivisione o un’altra attività comune che gli utenti eseguiranno.

Il pulsante di azione è rappresentato come un bundle con un’icona del pulsante di azione e un PendingIntent che verrà chiamato dal browser quando l’utente preme il pulsante di azione. L’icona è currenlty 24dp in altezza e 24-48 dp in larghezza.

Può essere personalizzato chiamando CustomTabsIntentBuilder#setActionButton:

• icon è un Bitmap da utilizzare come sorgente immagine per il pulsante di azione.
• descriptionè unString da utilizzare come descrizione accessibile per il pulsante.
• pendingIntentè unPendingIntent da avviare quando il pulsante di azione o la voce di menu è stata toccata. Il browser chiameràPendingIntent#send sui rubinetti dopo aver aggiunto l’url come dati. L’app client può chiamare Intent#getDataString per ottenere l’url.
• tint è un booleano che definisce se il pulsante di azione deve essere colorato.

Configurare un menu personalizzato #

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Il browser dispone di un menu completo di azioni che gli utenti eseguono frequentemente all’interno di un browser, tuttavia, potrebbero non essere pertinenti al contesto di applicazione.

Le schede personalizzate avranno una serie di azioni predefinite fornite dal browser. Tali azioni possono includere elementi come “Avanti”, “Informazioni sulla pagina”, “Aggiorna”, “Trova nella pagina”o” Apri nel browser”.

Come sviluppatore, puoi aggiungere e personalizzare fino a cinque voci di menu che appariranno tra la riga dell’icona e gli elementi del piede.

Una voce di menu viene aggiunta chiamando CustomTabsIntent.Builder#addMenuItem con title e un PendingIntent che il browser chiamerà per tuo conto quando l’utente tocca l’elemento viene passato come parametri.

Configura animazioni di ingresso e uscita personalizzate #

Molte applicazioni Android utilizzano animazioni di ingresso e uscita Vista personalizzate durante la transizione tra le attività su Android. Le schede personalizzate non sono diverse, è possibile modificare le animazioni di ingresso e uscita (quando l’utente preme indietro) per mantenerle coerenti con il resto dell’applicazione.

builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right);

Riscaldare il browser per rendere le pagine caricano più velocemente #

Per impostazione predefinita, quando CustomTabsIntent#launchUrl viene chiamato, girerà il browser e lanciare l’URL. Ciò può richiedere tempo prezioso e influire sulla percezione della levigatezza.

Crediamo che gli utenti richiedano un’esperienza quasi istantanea, quindi abbiamo fornito un Servizio a cui la tua app può connettersi e dire al browser e ai suoi componenti nativi di riscaldarsi. Schede personalizzate forniscono anche la possibilità per voi, lo sviluppatore di dire al browser il probabile insieme di pagine web che l’utente visiterà. I browser saranno quindi in grado di eseguire:

• Pre-risoluzione DNS del dominio principale
• Pre-risoluzione DNS delle risorse secondarie più probabili
• Pre-connessione alla destinazione inclusa la negoziazione HTTPS/TLS.

Il processo di riscaldamento del browser è il seguente:

• Utilizzare CustomTabsClient#bindCustomTabsService per connettersi al servizio.
• Una volta collegato il servizio, chiamare CustomTabsClient#warmup per avviare il browser dietro le quinte.
• Chiama CustomTabsClient#newSession per creare una nuova sessione. Questa sessione viene utilizzata per tutte le richieste all’API.
• Facoltativamente, allegare un CustomTabsCallback come parametro quando si crea una nuova sessione, in modo da sapere che è stata caricata una pagina.
• Indica al browser quali pagine è probabile che l’utente carichi conCustomTabsSession#mayLaunchUrl
• Chiama il costruttoreCustomTabsIntent.Builder passando ilCustomTabsSession creato come parametro.

Connessione al servizio Schede personalizzate #

Il metodoCustomTabsClient#bindCustomTabsService elimina la complessità della connessione al servizio schede personalizzate.

Crea una classe che estendeCustomTabsServiceConnection e usaonCustomTabsServiceConnected per ottenere un’istanza diCustomTabsClient. Questa istanza sarà necessaria nei passaggi successivi.

// Package name for the Chrome channel the client wants to connect to. This
// depends on the channel name.
// Stable = com.android.chrome
// Beta = com.chrome.beta
// Dev = com.chrome.dev
public static final String CUSTOM_TAB_PACKAGE_NAME = "com.android.chrome"; // Change when in stable
CustomTabsServiceConnection connection = new CustomTabsServiceConnection() {
@Override
public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
mCustomTabsClient = client;
}
@Override
public void onServiceDisconnected(ComponentName name) {
}
};
boolean ok = CustomTabsClient.bindCustomTabsService(this, mPackageNameToBind, connection);

Riscalda il processo del browser #

boolean warmup(long flags)

Riscalda il processo del browser e carica le librerie native. Il riscaldamento è asincrono, il valore restituito indica se la richiesta è stata accettata. Anche più chiamate riuscite restituiranno true.

Restituisce true in caso di successo.

Crea una nuova sessione tab #

boolean newSession(CustomTabsCallback callback)

La sessione viene utilizzata nelle chiamate successive per collegare la chiamata mayLaunchUrl, il CustomTabsIntent e la scheda generata tra loro. Il callback fornito qui è associato alla sessione creata. Tutti gli aggiornamenti per la sessione creata (vedi Callback schede personalizzate di seguito) vengono ricevuti anche tramite questa callback. Restituisce se una sessione è stata creata correttamente. Più chiamate con lo stesso CustomTabsCallback o un valore null restituiranno false.

Indica al browser quali URL è probabile che l’utente apra #

boolean mayLaunchUrl(Uri url, Bundle extras, List<Bundle> otherLikelyBundles)

Questo metodo CustomTabsSession indica al browser una probabile navigazione futura su un URL. Il metodo warmup() dovrebbe essere chiamato prima come best practice. L’URL più probabile deve essere specificato prima. Facoltativamente, è possibile fornire un elenco di altri URL probabili. Sono trattati come meno probabili del primo e devono essere ordinati in ordine di priorità decrescente. Questi URL aggiuntivi possono essere ignorati. Tutte le chiamate precedenti a questo metodo verranno depriorizzate. Restituisce se l’operazione è stata completata correttamente.

Custom Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

Verrà chiamato quando si verifica un evento di navigazione nella scheda custom. Il navigationEvent int è uno dei 6 valori che definisce lo stato della pagina è in. Vedi sotto per ulteriori informazioni.

/**
* Sent when the tab has started loading a page.
*/
public static final int NAVIGATION_STARTED = 1;
/**
* Sent when the tab has finished loading a page.
*/
public static final int NAVIGATION_FINISHED = 2;
/**
* Sent when the tab couldn't finish loading due to a failure.
*/
public static final int NAVIGATION_FAILED = 3;
/**
* Sent when loading was aborted by a user action before it finishes like clicking on a link
* or refreshing the page.
*/
public static final int NAVIGATION_ABORTED = 4;
/**
* Sent when the tab becomes visible.
*/
public static final int TAB_SHOWN = 5;
/**
* Sent when the tab becomes hidden.
*/
public static final int TAB_HIDDEN = 6;

Cosa succede se l’utente non dispone di un browser che supporta schede personalizzate installato? #

Schede personalizzate è supportato dalla maggior parte dei browser Android. Tuttavia, poiché utilizza unACTION_VIEW Intento con extra chiave per personalizzare l’interfaccia utente che si aprirà nel browser di sistema o nel browser predefinito dell’utente se le schede personalizzate non sono supportate.

Se l’utente ha installato un browser che supporta la scheda personalizzata ed è il browser predefinito, raccoglierà automaticamente gli EXTRA e presenterà un’interfaccia utente personalizzata.

Come posso verificare se il dispositivo Android ha un browser che supporta la scheda personalizzata? #

È possibile utilizzare ilPackageManager per interrogare il dispositivo Android per le applicazioni in grado di gestire schede personalizzate. Interroghiamo per le applicazioni che sono in grado di gestire http Intenti, quindi verificare se tali applicazioni dichiarano anche il supporto per il servizio Schede personalizzate:

/**
* Returns a list of packages that support Custom Tabs.
*/
public static ArrayList<ResolveInfo> getCustomTabsPackages(Context context) {
PackageManager pm = context.getPackageManager();
// Get default VIEW intent handler.
Intent activityIntent = new Intent()
.setAction(Intent.ACTION_VIEW)
.addCategory(Intent.CATEGORY_BROWSABLE)
.setData(Uri.fromParts("http", "", null));
// Get all apps that can handle VIEW intents.
List<ResolveInfo> resolvedActivityList = pm.queryIntentActivities(activityIntent, 0);
ArrayList<ResolveInfo> packagesSupportingCustomTabs = new ArrayList<>();
for (ResolveInfo info : resolvedActivityList) {
Intent serviceIntent = new Intent();
serviceIntent.setAction(ACTION_CUSTOM_TABS_CONNECTION);
serviceIntent.setPackage(info.activityInfo.packageName);
// Check if this package also resolves the Custom Tabs service.
if (pm.resolveService(serviceIntent, 0) != null) {
packagesSupportingCustomTabs.add(info);
}
}
return packagesSupportingCustomTabs;
}

Android 11 ha introdotto modifiche alla visibilità del pacchetto. Se la tua app Android ha come target il livello API 30 o superiore, è necessario aggiungere una sezione queries a AndroidManifest.xml, altrimenti lo snippet di codice sopra riportato non restituirà risultati:

<queries>
<intent>
<action android:name=
"android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>