Tab
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-25 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003eTabs are interactive buttons displayed in groups, with only one active at a time, unlike independent buttons.\u003c/p\u003e\n"],["\u003cp\u003eThey can be integrated into app bars with different alignment options or presented as standalone bars, adapting to various screen sizes.\u003c/p\u003e\n"],["\u003cp\u003eTab styling incorporates specific typography, color palettes for different states and elements, and standardized sizing for icons and touch targets.\u003c/p\u003e\n"],["\u003cp\u003eVisual examples demonstrate tab implementations, including collapsed, app bar-nested, and standalone configurations.\u003c/p\u003e\n"]]],[],null,["# Tabs\n\n\u003cbr /\u003e\n\nTabs are buttons that always occur in groups and are dependent on each other's state: only one can be active at any given time. \n[Buttons component\nButtons that are not tabs can operate independently of other buttons](/cars/design/automotive-os/components/buttons)\n\n*** ** * ** ***\n\nAnatomy\n-------\n\n1. Active tab icon \n2. Inactive tab icon \n3. Active tab label \n4. Inactive tab label\n\n*** ** * ** ***\n\nSpecs\n-----\n\n### Tabs nested in app bar -- left aligned\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels) \n[App bar \\& header component\nSpecs, style guidelines, and more](/cars/design/automotive-os/components/app-bar)\n\n### Tabs nested in app bar -- flexible alignment\n\nWith flexible alignment, the tab configuration stretches or compresses to fit the available space.\n\n### Tabs collapsed in app bar -- drawer menu\n\n[App bar \\& header component\nSpecs, style guidelines, and more](/cars/design/automotive-os/components/app-bar)\n\n### Standalone tab bar -- left aligned\n\n### Standalone tab bar -- flexible alignment\n\nWith flexible alignment, the tab configuration stretches or compresses to fit the available space.\n\n### Tab label string overflow\n\n*** ** * ** ***\n\nScaling layouts\n---------------\n\nThese reference layouts show how to adapt tabs 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### Standard vs. wide screens in short height bracket\n\n### Standard vs. wide screens in standard height bracket\n\n### Standard vs. wide screens in tall height bracket\n\n### Extra-wide and super-wide screens in all height brackets\n\n*** ** * ** ***\n\nStyles\n------\n\n[Typography guidelines\nScale and grid references, typographic examples, and more](/cars/design/automotive-os/design-system/typography) \n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\n### Typography\n\n| Type style | Typeface | Weight | Size (dp) |\n|------------|----------|---------|-----------|\n| Body 3 M | Roboto | Medium | 24 |\n| Body 3 | Roboto | Regular | 24 |\n\n### Color\n\n| Element | Color(day mode) | Color (night mode) |\n|------------------------------|-----------------|--------------------|\n| Primary type / icons | White | White @ 88% |\n| Secondary type / icons | White @ 72% | White @ 60% |\n| Tab bar background | Black | Black |\n| Tab bar background on scroll | Black @ 84% | Black @ 88% |\n| Tab icon - active state | White | White @ 88% |\n| Tab icon - inactive state | White @ 56% | White @ 50% |\n\n### Sizing\n\n| Element | Size (dp) |\n|-------------------|-----------|\n| Primary icon | 44 |\n| Secondary icon | 36 |\n| Icon touch target | 76 |\n\n*** ** * ** ***\n\nExamples\n--------\n\nTabs collapsed Tabs nested in app bar\nStandalone tab bar"]]
