[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eAndroid Auto uses adaptive and responsive design to adjust app layouts to different car screen sizes, utilizing breakpoints for layout changes based on screen dimensions.\u003c/p\u003e\n"],["\u003cp\u003eApp content is displayed within the app canvas, with responsive margins adjusting based on screen width and the possibility of removing the right margin on smaller screens.\u003c/p\u003e\n"],["\u003cp\u003eUI elements are aligned to an 8dp grid, utilizing padding in multiples of 8dp for consistent spacing, while smaller components may use 12dp padding sparingly.\u003c/p\u003e\n"],["\u003cp\u003eKeylines guide the horizontal placement of UI elements, scaling their position across different screen sizes according to predefined measurements for each breakpoint range.\u003c/p\u003e\n"]]],[],null,["# Layout\n\n\u003cbr /\u003e\n\nAndroid Auto's adaptive-responsive (AR) framework adapts app layouts to any car screen size.\n\nApp UI and features, such as media browsing and playback actions, are also automatically adapted in Android Auto---compatible cars for apps projected from a user's phone.\n\n**At a glance** \n- Layouts adjust to the screen size at specific breakpoints\n- Apply padding in 8dp increments\n- Place 12dp padding between smaller components sparingly\n\n*** ** * ** ***\n\nHow layout is determined\n------------------------\n\nAndroid Auto's AR framework uses both adaptive design and responsive design:\n\n- Responsive design (exact screen size determines layout) is used for the left and right margins\n- Adaptive design (ranges of screen height and width determine layout) is used for layout\n\n\u003cbr /\u003e\n\nLayout is determined using measurements called breakpoints. Breakpoints are strategically defined screen height and width measurements that determine when to show a specific layout. For each breakpoint range, the layout adjusts to suit the screen size and orientation. \n\n**Adaptive**\nAdaptive design uses breakpoints to determine a screen's layout. For a defined range of screen sizes (such as those less than 1280dp wide) a specific layout is displayed.\n**Responsive**\nResponsive design adapts a layout in a way that's proportional to the exact screen size. Components have flex areas that can be expanded or shrunk to an appropriate size for each car's screen.\n\n### Adaptive breakpoints\n\nAndroid Auto relies on adaptive breakpoints to determine screen layout, which are calculated from the size of the app window, rather than the entire screen.\nAdaptive breakpoints across narrow (0-600dp), standard (600-930dp), wide (930-1280dp), and extra wide (1280dp+) screen sizes\n\n### Responsive margins\n\nAndroid Auto uses responsive margins based on the size of the entire car screen. The left and right margins adjust to 12% of the screen width, and they typically contain scroll bars and navigation controls. The remaining screen space, called the app canvas, contains app content.\n\nTo provide more space, the right-side margin can be removed on smaller screen sizes. This space can be used by the app as a secondary area to show additional information.\nResponsive margins adjust their width based on the size of the screen.\n\nThe layout grid\n---------------\n\nAndroid Auto layouts align UI elements along an 8dp grid, with some smaller components aligning to a 4dp grid.\n\n### Padding\n\nPadding refers to the space between UI elements. The Android Auto padding scale is applied in multiples of 8dp, up to padding sizes of 96dp. Any larger amounts of padding should also be added in multiples of 8dp.\n\nThis table lists typical padding values seen in the Auto UI. Size increments are listed in increasing order, marked by labels that start with the letter \"P\":\n\n| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |\n|-----|-----|------|------|------|------|------|------|------|\n| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |\n\nIn this layout, padding values are represented by P1, P3, and P5 in the table above.\n\n### Padding for smaller components\n\nTo create better alignment, and allow sufficient spacing, smaller components may use 12dp of padding sparingly.\nIn this widget, elements use padding values represented by P2, P3, P4, and P5 in the table above.\n\n### Keylines\n\nKeylines are measurements that organize a UI by showing where elements, and components, should be placed horizontally in a layout (along the x-axis). They are marked by labels that start with the letter \"KL.\"\n\nKeylines can be placed anywhere in a layout. They can be used to indicate the distance between any two vertical edges (of elements, components, or the screen itself). Components and elements align their left or right edge to the closest keyline.\nIn this component, KL0 aligns all list icons and text at a consistent distance from each another. KL1 aligns all list items to the component's left and right edges.\n\n**Measuring with keylines**\n\nKeylines change based on screen width, allowing UI elements to consistently scale their placement across different screen sizes.\n\nThe following keylines are recommended for a range of screen sizes, represented by labels marked with \"KL(n)\". They are shown in order of increasing keyline size:\n\n| KL(n) | Narrow screens (0-600dp) | Standard screens (600-930dp) | Wide screens (930-1280dp) | Extra wide screens (1280dp+) |\n|-------|--------------------------|------------------------------|---------------------------|------------------------------|\n| KL0 | 16dp | 24dp | 24dp | 32dp |\n| KL1 | 24dp | 32dp | 32dp | 48dp |\n| KL2 | 96dp | 112dp | 112dp | N/A |\n| KL3 | 112dp | 128dp | 128dp | 152dp |\n| KL4 | 148dp | 168dp | 168dp | N/A |\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
