Personalizzazione dell'interfaccia utente

Sebastian Benz

Uno dei vantaggi delle schede personalizzate è che possono essere perfettamente integrate nella tua app. In questa parte della guida alle schede personalizzate imparerai a modificare l'aspetto e il comportamento di una scheda personalizzata in base alla tua app.

Imposta il colore della barra degli strumenti.

. Modalità Luce

. Modalità Buio

Per prima cosa, personalizza la barra degli indirizzi della scheda personalizzata in modo che sia coerente con il tema della tua app. Lo snippet riportato di seguito modifica il colore predefinito della barra degli strumenti chiamando setDefaultColorSchemeParams(). Se la tua app supporta anche una combinazione di colori scuri, impostala tramite .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …).

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

La barra degli strumenti ora ha colori di sfondo e in primo piano personalizzati.

Punto chiave: il protocollo Scheda personalizzata non supporta la modifica del colore della barra di stato.

Configura le animazioni personalizzate di entrata e uscita

In seguito, puoi semplificare l'avvio (e l'uscita) di un'esperienza con la scheda personalizzata nella tua app definendo animazioni di avvio e uscita personalizzate mediante setStartAnimation e setExitAnimation:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

Ulteriori personalizzazioni: titolo, occultamento automatico dell'AppBar e icona di chiusura personalizzata

Ci sono ancora alcune cose che puoi fare per adattare l'interfaccia utente di una scheda personalizzata alle tue esigenze.

• Nascondi la barra dell'URL quando scorri per offrire all'utente più spazio per esplorare i contenuti web utilizzando setUrlBarHidingEnabled()(true).
• Mostra il titolo del documento anziché l'URL tramite setShowTitle()(true).
• Personalizza il pulsante di chiusura in modo che corrisponda al flusso utente nella tua app, ad esempio mostrando una Freccia indietro anziché l'icona predefinita di X): setCloseButtonIcon()(myCustomCloseIcon).

Sono tutte facoltative, ma possono migliorare l'esperienza relativa alla scheda personalizzata nella tua app.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Impostazione di un referrer personalizzato

Puoi impostare la tua app come referrer al momento di avviare la Scheda personalizzata. In questo modo puoi far sapere ai siti web da dove proviene il loro traffico.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

A seguire: scopri come aggiungere un'azione personalizzata alla tua scheda personalizzata.