Barra di controllo

The control bar provides controls associated with a particular view. It displays up to five controls when unexpanded, and up to five additional controls when expanded.

In media apps, the control bar is used in the playback view for Play/Pause, Previous, Next, and other controls, including those for custom third-party actions.

icona di chiamata
Componente della barra di controllo minimizzato
The minimized control bar provides a minimal set of controls available across multiple views.

Anatomia

The control bar has two formats: unexpanded and expanded. The unexpanded version can include up to five controls. In media apps, one of these is Play/Pause.

When expanded, the control bar can include up to five additional controls in a second row. Users can select the overflow button to expand or collapse the control bar.

1. Parte della barra di controllo visibile prima dell'espansione
2. Porzione espansa della barra delle azioni
3. Uno dei controlli
4. Overflow button (expands and collapses control bar)

Specifiche

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

Barra di controllo

Barra di controllo espansa

Placement of 1–4 controls on control bar with anchored center control

An anchored center control is a control with a preferred placement in the center of the control bar, such as a music play/pause button.

Placement of 1–4 controls on control bar with no anchored control

Posizionamento di 6–9 controlli sulla barra di controllo

Ridimensionamento dei layout

Questi layout di riferimento mostrano come adattare la barra di controllo per adattarsi a schermi di diverse larghezze e altezze. (Le categorie di larghezza e altezza sono definite nella sezione Layout .) Si noti che tutti i valori dei pixel sono espressi in pixel renderizzati, prima di qualsiasi sottocampionamento o sovracampionamento.

Extra-wide screens with more than 1028 dp between margins

When the width between margins is greater than the maximum width of the control bar (1028 dp), center the control bar horizontally. The control bar won't extend all the way to the margins.

Extra-wide screens with less than 1028 dp between margins

Schermi ampi

Schermi di larghezza standard

Su schermi di larghezza standard, centrare la barra di controllo orizzontalmente. La barra di controllo si estende fino ai margini. Su uno schermo di larghezza standard di esattamente 690 dp, come in questo esempio, utilizzare un padding laterale di P5 tra i bordi della barra di controllo e i bordi dello schermo.

Schermate corte

Control bar expanded on screens shorter than 1000 dp

Barra di controllo espansa su schermi corti

Control bar expanded on screens taller than 1000 dp

Stili

icona di chiamata
Linee guida sui colori
Palette, valori di elevazione e opacità e altro ancora

Colore

Elemento Colore (modalità giorno) Colore (modalità notturna)
Icone primarie Bianco Bianco all'88%
Schermo intero Nero al 78% Nero @ 84%
Tessuto sfumato Da definire Da definire

Dimensionamento

Elemento Dimensioni (dp)
Barra di controllo 96 (short screens) or 128 (standard height and above)
Icona principale 44

Esempi

Barra di controllo nella visualizzazione di riproduzione.
Barra di controllo espansa nella visualizzazione di riproduzione.
Barra di controllo nella coda multimediale.
Barra di controllo espansa nella coda multimediale.
Barra di controllo nella coda multimediale.
Barra di controllo espansa nella coda multimediale.
Control bar expanding and contracting as a user taps the overflow button.