Barra di controllo ridotta a icona

La barra di controllo ridotta viene utilizzata per visualizzare un insieme minimo di controlli e metadati. Quando è selezionata, si apre un overlay a schermo intero che include una barra di controllo più grande con controlli aggiuntivi.

Ad esempio, la barra dei controlli ridotta a icona per le app multimediali mantiene un piccolo insieme di controlli di riproduzione e metadati disponibili nell'app durante la riproduzione della musica e può anche aprire una visualizzazione di riproduzione a schermo intero.

icona callout
Componente barra di controllo
La barra dei controlli completi può visualizzare un insieme esteso di controlli

Anatomia

1. Riquadro dei contenuti
2. Metadati
3. Controlli

Specifiche

icona callout
Etichette layout
Definizioni di E, M, KL, P, Flex
icona callout
Componente Voci di elenco
Specifiche, linee guida relative allo stile e altro ancora

Barra di controllo ridotta a icona

Barra di controllo ridotta a icona con overflow del testo

Layout di scalabilità

Questi layout di riferimento mostrano come adattare la barra di controllo ridotta a icona 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

Schermate di larghezza standard

Schermi ampi

Schermi extra-wide e super-wide

Stili

icona callout
Linee guida sulla tipografia
Riferimenti su scala e griglia, esempi tipografici e altro ancora
icona callout
Linee guida sui colori
Tavolozze, valori di elevazione, opacità e altro ancora

Tipografia

Stile tipo Tipo di carattere Peso Dimensioni (dp)
Corpo 1 Roboto Periodici 32
Corpo 3 Roboto Periodici 24

Colore

Elemento Colore(modalità giorno) Colore (modalità notturna)
Tipo principale di colore bianco Bianco all'88%
Tipo secondario Bianco @ 72% Bianco @ 60%
Icone di colore bianco Bianco all'88%
Indicatore del tempo trascorso Accento di terze parti Accento di terze parti
Indicatore tempo rimanente #464A4D #464A4D
Sfondo della barra di controllo ridotta a icona #0E1013 @ 84% #0E1013 @ 88%
Troncamento gradiente Nero dallo 0 al 100% nel 10% dello spazio di testo Nero dallo 0 al 100% nel 10% dello spazio di testo

Taglie

Elemento Dimensioni (dp)
Icone 44
Riquadro dei contenuti 96
Indicatore avanzamento 84
Traccia indicatore di avanzamento 4
Altezza della barra di controllo ridotta a icona 128
Raggio angolo arrotondato (R1) 4

Esempi

Barra di controllo ridotta per gli schermi di larghezza standard
Barra di controllo ridotta per schermi di larghezza standard