The header layout is used to consistently display contextually relevant information to the skill. This can include navigational information such as titles, subtitles, skill icons, and back buttons.
In this Design Guide, we include recommendations that reference layouts which are not part of core APL. These are available in the Layout package, which is available for you to use. Please refer to the information on importing document properties for implementation details.
- Use the header layout
- Best practices
- Additional resources
Use the header layout
Always use the header layout in your skill to display titles and subtitles, even if you don't use the other attributes for your skill. For medium to larger screens, like the Echo Show or a TV, the header should be placed outside of scrolling content, at the full width of the screen. This way, the header remains fixed while the rest of the content can scroll. For smaller screens, like the Echo Spot, the header can be inside of the scrolling content to maximize screen real estate.
Use the following properties to customize your header:
###Title (optional) Titles support Alexa's verbal response to an action such as a task, or announcing items on the screen. Titles must be all uppercase.
Additional metadata that corresponds with the title can be included as a subtitle. Subtitles must be in title case.
Attributions display your skill icon or logo. The header can display either image or text as the attribution. In the case that both are provided, the image will be displayed.
Most commonly a back button, navigational elements should be displayed if your experience supports requests such as, “Alexa, go back.” The back button should only be shown if you want the customer to return to the previous screen at any time, and would provide a linked touch target for use in addition to the utterance.
Attribution primacy (skill icon)
Attributions help your customer know which skill experience they are currently using. On smaller displays, the attribution or skill icon will be shown instead of the title and subtitle. If you would prefer to show the title and subtitle instead, set the attribution primacy to “true”.
- Headers should be contextually relevant, displaying titles and subtitles that are related to the rest of the visual response.
- Place the Header outside of any scrolling views (layouts or components) to make it sticky, so it does not scroll itself. A persistent Header will allow customers to access navigation, as well as help maintain the context of the content being displayed.