Barra di controllo

La barra di controllo fornisce i controlli associati a una determinata vista. Mostra fino a cinque controlli nella versione non espansa e fino a cinque controlli aggiuntivi quando è espansa.

Nelle app multimediali, la barra di controllo viene utilizzata nella visualizzazione di riproduzione per i controlli Riproduci/Metti in pausa, Precedente, Avanti e altri controlli, inclusi quelli per azioni personalizzate di terze parti.

icona callout
Componente della barra di controllo ridotta a icona
La barra di controllo ridotta a icona fornisce un insieme minimo di controlli disponibili in più viste

Anatomia

La barra di controllo ha due formati: non espanso ed espanso. La versione non espansa può includere fino a cinque controlli. Nelle app multimediali, uno di questi è Riproduzione/Pausa.

Quando è espansa, la barra di controllo può includere fino a cinque controlli aggiuntivi in una seconda riga. Gli utenti possono selezionare il pulsante di overflow per espandere o comprimere la barra di controllo.

1. Parte della barra di controllo visibile prima dell'espansione
2. Parte espansa della barra delle azioni
3. Uno dei controlli
4. Pulsante Overflow (espande e comprime la barra di controllo)

Specifiche

icona callout
Etichette layout
Definizioni di E, M, KL, P, Flex

Barra di controllo

Barra di controllo espansa

Posizionamento di 1-4 controlli sulla barra di controllo con controllo centrale ancorato

Un controllo ancorato al centro è un controllo con una posizione preferita al centro della barra di controllo, ad esempio un pulsante per riprodurre/mettere in pausa la musica.

Posizionamento di 1-4 controlli sulla barra dei controlli senza controllo ancorato

Posizionamento di 6-9 controlli sulla barra di controllo

Layout di scalabilità

Questi layout di riferimento mostrano come adattare la barra di controllo per adattarsi a schermi di varie larghezze e altezze. Le categorie di larghezza e altezza sono definite nella sezione Layout. Tieni presente che tutti i valori dei pixel vengono visualizzati in pixel sottoposti a rendering, prima che si verifichi qualsiasi down-sampling o up-sampling.

icona callout
Layout
Margini, righe dei tasti e spaziatura interna per schermi di varie dimensioni
icona callout
Etichette layout
Definizioni di E, M, KL, P, Flex

Schermi molto larghi con oltre 1028 dp tra i margini

Quando la larghezza tra i margini è superiore alla larghezza massima della barra di controllo (1028 dp), centra la barra di controllo orizzontalmente. La barra di controllo non si estenderà fino ai margini.

Schermi molto larghi con meno di 1028 dp tra i margini

Schermi ampi

Schermate di larghezza standard

Sugli schermi di larghezza standard, centra la barra di controllo orizzontalmente. La barra di controllo si estenderà fino ai margini. Su uno schermo di larghezza standard di 690 dp esattamente come in questo esempio, usa una spaziatura interna laterale di P5 tra i bordi della barra di controllo e i bordi dello schermo.

Schermate brevi

Barra di controllo espansa su schermi inferiori a 1000 dp

Barra di controllo espansa negli schermi brevi

Barra di controllo espansa sugli schermi più alti di 1000 dp

Stili

icona callout
Linee guida sui colori
Tavolozze, valori di elevazione, opacità e altro ancora

Colore

Elemento Colore(modalità giorno) Colore (modalità notturna)
Icone principali di colore bianco Bianco all'88%
Tela a schermo intero Nero al 78% Nero all'84%
Tela con gradiente Da definire Da definire

Taglie

Elemento Dimensioni (dp)
Barra di controllo 96 (schermi brevi) / 128 (altezza standard e superiori)
Icona principale 44

Esempi

Barra di controllo nella visualizzazione di riproduzione
Barra di controllo espansa nella visualizzazione di riproduzione
Barra di controllo nella coda dei contenuti multimediali
Barra di controllo espansa nella coda dei contenuti multimediali
Barra di controllo nella coda dei contenuti multimediali
Barra di controllo espansa nella coda dei contenuti multimediali
Barra di controllo che si espande e si contrae quando un utente tocca il pulsante di overflow