Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
La barre de commandes fournit des commandes associées à une vue spécifique. Elle affiche jusqu'à cinq commandes dans sa version non développée et jusqu'à cinq commandes supplémentaires lorsqu'elle est développée.
Dans les applications multimédias, la barre de commandes est utilisée dans la vue de lecture pour les commandes Lecture/Pause, Précédent et Suivant, ainsi que d'autres commandes, y compris celles des actions tierces personnalisées.
La barre de commande est disponible en deux formats: non développée et développée. La version non développée peut inclure jusqu'à cinq commandes. Dans les applications multimédias, l'une de ces options est "Lecture/Pause".
Lorsqu'elle est développée, la barre de commandes peut inclure jusqu'à cinq commandes supplémentaires sur une deuxième ligne. Il suffit aux utilisateurs de sélectionner ce bouton pour développer ou réduire la barre de contrôle.
1. Partie de la barre de contrôle visible avant l'expansion
2. Section développée de la barre d'action
3. L'un des contrôles
4. Bouton à développer (développe et réduit la barre de contrôle)
Positionnement de 1 à 4 commandes sur la barre de commandes avec commande ancrée au centre
Une commande ancrée au centre est une commande positionnée de préférence au centre de la barre de commandes, par exemple un bouton de lecture/pause de la musique.
Positionnement de 1 à 4 commandes sur la barre de commandes (pas de commande ancrée)
Positionnement de 6 à 9 commandes sur la barre de commandes
Ajuster les mises en page
Ces mises en page de référence montrent comment adapter la barre de commande pour l'adapter aux écrans de différentes largeurs et hauteurs. (Les catégories de largeur et de hauteur sont définies dans la section Layout (Mise en page).) Notez que toutes les valeurs de pixels sont exprimées en pixels de rendu, avant tout échantillonnage sous-échantillonnage ou sur-échantillonnage.
Écrans très grand angle avec plus de 1 028 dp entre les marges
Lorsque la largeur entre les marges est supérieure à la largeur maximale de la barre de commandes (1 028 dp), centrez la barre de contrôle horizontalement. La barre de contrôle ne s'étendra pas complètement aux marges.
Écrans très grand angle avec moins de 1 028 dp entre les marges
Grands écrans
Écrans de largeur standard
Sur les écrans de largeur standard, centrez la barre de commandes horizontalement. La barre de commande s'étend jusqu'aux marges. Sur un écran de largeur standard de 690 dp exactement, comme dans cet exemple, utilisez une marge intérieure latérale de P5 entre les bords de la barre de contrôle et les bords de l'écran.
Écrans courts
Barre de contrôle développée sur les écrans de moins de 1 000 dp
Barre de commandes développée sur les écrans courts
Barre de contrôle développée sur les écrans de plus de 1 000 dp
96 (écrans courts) / 128 (hauteur standard et plus)
Icône principale
44
Exemples
Barre de commandes dans la vue de lecture
Barre de commandes développée dans la vue de lecture
Barre de commandes dans la file d'attente de contenus multimédias
Barre de commandes développée dans la file d'attente de contenus multimédias
Barre de commandes dans la file d'attente de contenus multimédias
Barre de commandes développée dans la file d'attente de contenus multimédias
La barre de contrôle se développe et se réduit lorsqu'un utilisateur appuie sur le bouton à développer
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/25 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/25 (UTC)."],[[["\u003cp\u003eThe control bar offers view-specific controls, displaying up to 5 initially and up to 5 more when expanded via an overflow button.\u003c/p\u003e\n"],["\u003cp\u003eIt's commonly used in media apps for playback control (Play/Pause, Previous, Next) and custom actions.\u003c/p\u003e\n"],["\u003cp\u003eControl bar adapts to different screen sizes, with layouts optimized for extra-wide, wide, and standard screens.\u003c/p\u003e\n"],["\u003cp\u003eVisual styles include color palettes for day/night modes and specific sizing for the bar and icons.\u003c/p\u003e\n"],["\u003cp\u003eExamples demonstrate control bar usage in playback and media queue views, showcasing its expanding/contracting functionality.\u003c/p\u003e\n"]]],[],null,["# Control bar\n\n\u003cbr /\u003e\n\nThe control bar provides controls associated with a particular view. It displays up to 5 controls in its unexpanded version, and up to 5 additional controls when expanded.\n\nIn 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. \n[Minimized control bar component\nThe minimized control bar provides a minimal set of controls available across multiple views](/cars/design/automotive-os/components/minimized-control-bar)\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe control bar has two formats: unexpanded and expanded. The unexpanded version can include up to 5 controls. In media apps,, one of these is Play/Pause.\n\nWhen expanded, the control bar can include up to 5 additional controls in a second row. Users can select the overflow button to expand or collapse the control bar.\n1. Control bar portion visible before expansion \n2. Expanded portion of action bar \n3. One of the controls \n4. Overflow button (expands and collapses control bar)\n\n*** ** * ** ***\n\nSpecs\n-----\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Control bar\n\n### Expanded control bar\n\n### Placement of 1--4 controls on control bar with anchored center control\n\nAn anchored center control is a control with a preferred placement in the center of the control bar, such as a music play/pause button.\n\n### Placement of 1--4 controls on control bar with no anchored control\n\n### Placement of 6--9 controls on control bar\n\n*** ** * ** ***\n\nScaling layouts\n---------------\n\nThese reference layouts show how to adapt the control bar to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs. \n[Layout\nMargins, keylines, and padding for various screen sizes](/cars/design/automotive-os/design-system/layout) \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Extra-wide screens with more than 1028dp between margins\n\nWhen the width between margins is greater than the maximum width of the control bar (1028dp), center the control bar horizontally. The control bar won't extend all the way to the margins.\n\n### Extra-wide screens with less than 1028dp between margins\n\n### Wide screens\n\n### Standard-width screens\n\nOn screens of standard width, center the control bar horizontally. The control bar will extend into the margins. On a standard width screen of exactly 690 dp, as in this example, use side padding of P5 between the edges of the control bar and the edges of the screen.\n\n### Short screens\n\n### Control bar expanded on screens shorter than 1000dp\n\n### Control bar expanded on short screens\n\n### Control bar expanded on screens taller than 1000dp\n\n*** ** * ** ***\n\nStyles\n------\n\n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\n### Color\n\n| Element | Color(day mode) | Color (night mode) |\n|-------------------|-----------------|--------------------|\n| Primary icons | White | White @ 88% |\n| Full-screen scrim | Black @ 78% | Black @ 84% |\n| Gradient scrim | TBD | TBD |\n\n### Sizing\n\n| Element | Size (dp) |\n|--------------|------------------------------------------------------|\n| Control bar | 96 (short screens) / 128 (standard height and above) |\n| Primary icon | 44 |\n\n*** ** * ** ***\n\nExamples\n--------\n\nControl bar in playback view Expanded control bar in playback view \nControl bar in media queue Expanded control bar in media queue \nControl bar in media queue Expanded control bar in media queue\nControl bar expanding and contracting as a user taps the overflow button"]]
