Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Tab-Vorlage fungiert als Container für die anderen unten aufgeführten Vorlagen und stellt oben Tabs bereit (wie unter Aufbau der Tab-Vorlage gezeigt).
Über die Tabs können Sie zwischen verschiedenen Ansichten wechseln. Diese Funktion ist besonders nützlich, um Inhalte oder Ansichten zu organisieren, die Nutzende durchsuchen oder suchen möchten.
Umfasst:
Tableiste mit App-Symbol und bis zu 4 Tabs (keine Schaltfläche „Zurück“)
Eingebettete Vorlage mit einem der folgenden Typen:
Jede Tab-Ansicht entspricht einer eingebetteten Vorlage und es kann jeweils nur eine Tab-Ansicht aktiv sein.
Aufbau der Tab-Vorlage
Die Vorlage für den Tab besteht aus den folgenden Elementen:
Tableiste, die bis zu vier Tabs anzeigen kann
Eingebettete Vorlage mit einer der folgenden Vorlagen: Liste, Raster, Suche, Fenster, Nachricht oder Navigation
Beispiele für Tab-Vorlagen
Die Tabansicht „Alle Geräte“ wird mit einer Vorlage für den Tab erstellt, die eine Listenvorlage enthält (Android Auto-Beispiel)Die Tabansicht „Smart-Home-Geräte“ wird mit einer Tab-Vorlage erstellt, die eine Rastervorlage enthält (Android Auto-Beispiel)
UX-Anforderungen an Tab-Vorlage
App-Entwickler:
MÜSSEN
Stellen Sie monochromatische Vektorsymbole für jeden Tab bereit.
MÜSSEN
Fügen Sie mindestens zwei und höchstens vier Tabs in die Kopfzeile der App ein.
DÜRFEN NICHT
Zulassen, dass mehr als ein Tab gleichzeitig aktiv ist.
DÜRFEN NICHT
Erstellen Sie eine zweite Navigation, indem Sie eine zweite Ebene mit Tabs hinzufügen.
SOLLTEN
Verwenden Sie kurze Tablabels, damit sie nicht abgeschnitten werden.
DARF NICHT
Nutzen Sie Überschriften oder Aktionsleisten in eingebetteten Vorlagen.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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. |"]]
