[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Layouts are structural templates that provide a framework for maintaining\nvisual consistency across your application. By defining visual grids, spacing,\nand sections, layouts establish a cohesive and organized structure for the\npresentation of information and UI elements. \n\nHighlights\n----------\n\n- Unlike web or mobile, TVs have a fixed screen aspect ratio of 16:9.\n- Optimize layouts along horizontal and vertical axes for ease of use and control.\n\nPrinciples\n----------\n\nGuidelines to help you make design decisions when designing TV layouts.\n\n\n### Design for large screens\n\nSince the popularization of HDTV, rectangular TVs with an aspect ratio of 16:9\nhave become the norm. Historically, televisions were manufactured in a square\nshape known as 4:3 or 1.33 to 1 aspect ratio.\n\n\u003cbr /\u003e\n\n\n### Design on Android platform\n\nWhen designing, use dp to display elements uniformly on screens with different\ndensities, as with any other Android-powered device. Always design at MDPI\nresolution at 960px \\* 540px.\n\nAt MDPI 1px = 1dp.\n\nAssets need to aim for 1080p. This allows the Android system to downscale layout\nelements to 720p, if necessary.\n\n\u003cbr /\u003e\n\n\n### Ensure visibility and overscan safety\n\nEnsure important elements are always visible to users. To do this, position the\nelements with a 5% margin of 48dp on the left and right sides, and 27dp on the\ntop and bottom of a layout. This ensures that the layout's screen elements are\nwithin the overscan.\n\n\u003cbr /\u003e\n\n\n### Fill the full screen\n\nDon't adjust or clip background screen elements to the overscan safe area.\nInstead, allow partial display of offscreen elements. This ensures that all\nscreens correctly display the background and offscreen elements.\n\n\u003cbr /\u003e\n\n\n### Optimize with axes\n\nConsider how people use the remote control with their TV. Make sure your TV\ninterface is simple to use with the remote. Design each direction\n(up, down, left, right) to have a clear purpose and navigation pattern to help\nusers understand how to move through large groups of options.\n\n\u003cbr /\u003e\n\nLayout\n------\n\nTV screen sizes differ from device to device. Since a modern TV has a\n16:9 aspect ratio, it is recommended to design your app with a\n960px x 540px screen size. This ensures all elements can be\nresized proportionally for HD or 4K screens.\n\n### Overscan margins\n\nOverscan margins are the spaces between content, and the\nleft and right edges of the screen. \n\n 960 * ~5% = 48dp\n 540 * ~5% = 27dp round off to 24dp\n\nThese border margins protect primary elements from potential overscan issues.\nTo keep your content and information safe, use a 5% margin layout\n(58dp on the sides and 28dp on the top and bottom edges).\n\n| **Note:** Most modern TVs no longer have overscan issues.\n\n### Columns and gutters\n\nContent is put into areas of the screen that have columns and gutters.\nThe grid system has 12 columns. Gutters are the spaces between\nthe columns that help divide the content.\n\nUse 12 columns that are 52dp wide with 20dp of space between them.\nThere needs to be 58dp of space on both sides and 4dp of vertical\nspacing between lines.\n\nLayout patterns\n---------------\n\nThere are three layout patterns available depending on your intended\npurpose and display device: Horizontal Stack Layout, Vertical Stack Layout,\nand Grid Layout.\n\n### Horizontal Stack Layout\n\nA Horizontal Stack Layout arranges components horizontally.\nThey can vary in size, ratio, or format. This layout is often\nused to group content and components.\n\n### Vertical Stack Layout\n\nA Vertical Stack Layout arranges components in a vertical manner,\nallowing for a flexible size, ratio, and format. It is commonly\nused to group various types of text, interactive components, and\nlayout patterns together.\n\n### Grid Layout\n\nA grid is a collection of intersecting columns and rows, and a Grid\nLayout displays content in this grid. It arranges content in a logical\nway, making it simple for users to navigate and browse.\n\nTo prevent overlapping, it's important to consider the padding between\nitems and the size increase of focused states. For instance, when a focused\ncomponent (like a card) is highlighted. If you're utilizing our suggested\nGrid Layout (12 columns in 52dp, with gutters in 20dp), see Cards for\nrecommended component layouts and previews.\n\nLayout structures\n-----------------\n\nHere are some layout structures to help you make better\ndecisions when designing TV layouts. By dividing the TV screens horizontally,\nit can help separate different types of components, communicate information\nhierarchy and navigation logic. A pane can contain multiple unit columns.\nEach panel can host different layout patterns such as Stack Layout\nand Grid Layout.\n\n\n### Single-pane layout\n\nA single-pane layout can help drive attention to primary content. Use it with\ncontent-forward experience and critical information pages.\n\n\u003cbr /\u003e\n\n\n### Two-pane layout\n\nA 2-pane layout performs better when the page shows hierarchical content. It is\nwidely used on task-forward experiences.\n\n\u003cbr /\u003e\n\n### Cognitive overload\n\nComplicated and unclear content can lead to confusion, annoyance and a dip in\nengagement. Make your design scannable, uncluttered and present\nonly essential information.\n\nAvoid using too many panels to group contents. This creates\nunnecessary cognitive load and hierarchy to users. \ncheck_circle\n\n### Do\n\nPlace related contents together in one panel. This helps users understand the grouping of content. \ncancel\n\n### Don't\n\nAvoid using too many panels to group contents. This creates unnecessary cognitive load and hierarchy to users.\n\n### Express hierarchy and navigation\n\nPanels visually separate and organize content. They help guide users,\nand can create a more intuitive interface that enhances the experience. \ncheck_circle\n\n### Do\n\nGroup contents based on user reading path. Ensure the focus path is aligned with hierarchy or the decision-making logic. \ncancel\n\n### Don't\n\nDon't direct user attention back-and-forth between panels. This creates unnatural focus paths that are not aligned with user reading habits.\n\nLayout templates\n----------------\n\nLayout templates promote order, consistency, and familiarity. The design\ncreates a comfortable UI experience that clearly communicates where the\nuser is, and where they can go. \n\n### Browse\n\nThe browser template displays media content \"clusters\" or rows in a vertical stack. Users navigate up and down to browse the rows, and navigate right and left to browse content of a specific row.\n\n### Left overlay\n\nThe left navigation template shows an overlay panel on the left side of the screen. It usually surfaces navigation or items that you can act on relevant to the content in the background.\n\n### Right overlay\n\nThe right overlay template shows an overlay panel on the right side of the screen. It usually surfaces items that you acn act on independent to the content in the background.\n\n### Center overlay\n\nThe center overlay template shows a modal element that overlays on top of an existing view. It is used to communicate urgent information or prompt a decision.\n\n### Bottom overlay\n\nThe bottom overlay template is commonly used for bottom sheets. Bottom sheets are surfaces containing complementary content anchored to the bottom of the screen. They let you create mini flows without losing the context of the current page.\n\n### Actions\n\nThe action template shows title and subtitle on the left, with options or actions on the right. Users are usually asked to make an option or perform an action with this template.\n\n### Content Details\n\nThe content detail template shows content in a Horizontal Stacked Layout. Content commonly includes title, metadata, short description, quick actions, and related information clusters.\n\n### Compilation\n\nThe compilation template shows details of an item on the left side of the screen, such as a podcast, with its elements, for example its episodes, on the right panel.\n\n### Grid\n\nThe grid template displays collections of content in an organized grid. It showcases content with clear remote navigation logic, and optimal browsing experience.\n\n### Alert\n\nThe alert template displays a full screen message. It usually requires an action to unblock the alert and go back to the previous screen.\n\nCard columns\n------------\n\n### 1 card layout\n\nCard width --- 844dp\n\n### 2 card layout\n\nCard width --- 412dp\n\n### 3 card layout\n\nCard width --- 268dp\n\n### 4 card layout\n\nCard width --- 196dp\n\n### 5 card layout\n\nCard width --- 124dp"]]
