Barra di controllo ridotta a icona

La barra di controllo ridotta a icona è utilizzata per visualizzare un insieme minimo di controlli e metadati. Se selezioni questa opzione, viene visualizzato un overlay a schermo intero che include una barra di controllo più grande con controlli aggiuntivi.

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

icona callout
Componente Barra di controllo
La barra di controllo completa può visualizzare un insieme esteso di controlli

Anatomia

1. Riquadro dei contenuti
2. Metadati
3. Controlli

Specifiche

icona callout
Etichette di layout
Definizioni di E, M, KL, P, Flex
icona callout
Componente Elenco elementi
Specifiche, linee guida per lo 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 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 sono in pixel sottoposti a rendering, prima che si verifichi qualsiasi campionamento inferiore o superiore.

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

Schermate a larghezza standard

Widescreen

Schermi ultrawide e superwide

Stili

icona callout
Linee guida tipografiche
Riferimenti a scala e griglia, esempi tipografici e altro ancora
icona callout
Linee guida per i colori
Tavolozze, valori di altitudine e opacità e altro ancora

Tipografia

Tipo di stile Tipo di carattere Peso Dimensioni (dp)
Corpo 1 Roboto Regolare 32
Corpo 3 Roboto Regolare 24

Colore

Elemento Colore(modalità Giorno) Colore (modalità notturna)
Tipo principale Bianco Bianco @ 88%
Tipo secondario Bianco @ 72% Bianco al 60%
Icone Bianco Bianco @ 88%
Indicatore 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 sfumatura Nero @ 0-100% nel 10% dello spazio di testo Nero @ 0-100% nel 10% dello spazio di testo

Dimensioni

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

Esempi

Barra di controllo ridotta a icona per gli schermi di larghezza maggiore rispetto alla larghezza standard
Barra di controllo ridotta per le schermate con larghezza standard