Personalizzazione dell'interfaccia utente

Sebastian Benz

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

Imposta il colore della barra degli strumenti

Innanzitutto, personalizza la barra degli indirizzi della Scheda personalizzata per renderla coerente con il tema della tua app. Lo snippet riportato di seguito modifica il colore predefinito della barra degli strumenti chiamando il numero 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.

Configura animazione personalizzata di entrata e uscita

Dopodiché puoi semplificare l'avvio e l'uscita della scheda personalizzata nella tua app definendo animazioni di inizio e di uscita personalizzate con 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, nascondi automatica dell'AppBar e icona di chiusura personalizzata

Esistono alcune altre cose che puoi fare per regolare l'interfaccia utente di una scheda personalizzata in base alle tue esigenze.

• Nascondi la barra degli URL quando scorri per dare all'utente più spazio per esplorare i contenuti web usando 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 della 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 quando avvii 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()));

Nel prossimo passaggio: scopri come aggiungere un'azione personalizzata alla tua Scheda personalizzata.