Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le modèle d'onglet sert de conteneur aux autres modèles répertoriés ci-dessous, en fournissant des onglets en haut de la page (comme illustré dans la section Anatomie du modèle d'onglet).
Les onglets permettent de passer d'une vue à l'autre. Cette fonctionnalité est particulièrement utile pour organiser les contenus ou les vues que les utilisateurs voudront parcourir ou rechercher.
Inclut:
Barre d'onglets avec l'icône de l'application et jusqu'à quatre onglets (pas de bouton "Retour")
Modèle intégré, qui peut être de l'un des types suivants :
Chaque onglet correspond à un modèle intégré, et une seule vue d'onglet peut être active à la fois.
Anatomie du modèle d'onglet
Le modèle d'onglet comprend les éléments suivants:
La barre d'onglets, qui peut afficher jusqu'à quatre onglets
Modèle intégré, utilisant l'un des modèles suivants: Liste, Grille, Recherche, Volet, Message ou Navigation
Exemples de modèles d'onglets
La vue d'onglet "Tous les appareils" est créée à l'aide d'un modèle d'onglet contenant un modèle de liste (exemple Android Auto)La vue d'onglets "Appareils connectés" est créée à l'aide d'un modèle d'onglet contenant un modèle de grille (exemple Android Auto)
Exigences concernant l'expérience utilisateur des modèles d'onglets
Développeurs d'applications:
OBLIGATOIRE
Fournissez des icônes vectorielles monochromes pour chaque onglet.
OBLIGATOIRE
Incluez au moins deux et pas plus de quatre onglets dans l'en-tête de l'application.
NE DOIT PAS
Autorisez l'activation de plusieurs onglets à la fois.
NE DOIT PAS
Créez une navigation secondaire en ajoutant un deuxième niveau d'onglets.
DOIT
Utilisez des libellés d'onglet court pour éviter la troncation.
NE DOIT PAS
Appuyez-vous sur un en-tête ou une bande d'actions dans les modèles intégrés.
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 Tab template serves as a container for other templates, organizing content into a tabbed interface.\u003c/p\u003e\n"],["\u003cp\u003eIt supports embedding List, Grid, Search, Pane, Message, or Navigation templates within each tab.\u003c/p\u003e\n"],["\u003cp\u003eApps should utilize 2-4 tabs with monochromatic icons and concise labels for optimal usability.\u003c/p\u003e\n"],["\u003cp\u003eOnly one tab can be active at a time, and embedded templates should avoid using their own headers.\u003c/p\u003e\n"],["\u003cp\u003eTab templates are ideal for creating switchable views for content browsing or searching within an app.\u003c/p\u003e\n"]]],[],null,["# Tab template\n\n\u003cbr /\u003e\n\nThe Tab template acts as a container for other templates listed below, providing\ntabs across the top (as shown in\n[Anatomy of the Tab template](#anatomy)).\n\nThe tabs allow switching among views. This capability is particularly useful for\norganizing content or views that users will want to browse or search. \n**Includes:**\n\n- Tab bar with app icon and up to 4 tabs (no back button)\n- Embedded template, which can be any of the following types:\n - [List](/cars/design/create-apps/apps-for-drivers/templates/list-template)\n - [Grid](/cars/design/create-apps/apps-for-drivers/templates/grid-template)\n - [Search](/cars/design/create-apps/apps-for-drivers/templates/search-template)\n - [Pane](/cars/design/create-apps/apps-for-drivers/templates/pane-template)\n - [Message](/cars/design/create-apps/apps-for-drivers/templates/message-template)\n - [Navigation](/cars/design/create-apps/apps-for-drivers/templates/navigation-template)\n\nEach tab view corresponds to one embedded template, and only one tab view\ncan be active at any given time.\n\n\u003cbr /\u003e\n\n| **Note:** Headers from embedded templates are ignored because the space that would normally be used for the header is used for the tab bar.\n\nAnatomy of the Tab template\n---------------------------\n\nThe Tab template consists of the following elements:\n\n1. **Tab bar**, which can show up to 4 tabs\n2. **Embedded template**, using one of the following templates: List, Grid, Search, Pane, Message, or Navigation\n\nTab template examples\n---------------------\n\nThe \"All devices\" tab view is created using a Tab template that contains a List template (Android Auto example) The \"Home devices\" tab view is created using a Tab template that contains a Grid template (Android Auto example)\n\n\u003cbr /\u003e\n\nTab template UX requirements\n----------------------------\n\n**App developers**:\n\n|----------------|-----------------------------------------------------------------|\n| **MUST** | Provide monochromatic vector icons for each tab. |\n| **MUST** | Include at least 2 and no more than 4 tabs in the app header. |\n| **MUST NOT** | Allow more than 1 tab to be active at a time. |\n| **MUST NOT** | Create a secondary navigation by adding a second level of tabs. |\n| **SHOULD** | Use short tab labels to avoid truncation. |\n| **SHOULD NOT** | Rely on a header or action strip in embedded templates. |"]]