Alexa APL. Problems getting AlexaHeader component to sit atop single Image component? - alexa-skills-kit

Question

I want to have a header at the top of my Alexa Skill APL page that shows a Title and a Sub-Title. Directly below it, I want to have an image. In other words I want to have the Title and Sub-Title in a box that sits at the top of the image, occupying the top row of the screen.
The AlexaHeader component seems perfect for this. But when I use it in a container as the first child item, with the Image component next with its scale property set to best-fit, the Image component takes up the whole screen and the AlexaHeader component is behind the image, centered vertically and not at the top of the APL page. I can see it behind the image because the image does not fill the screen horizontally, only vertically.
How can I get the look I want?
Here is my APL JSON for the layout element I am working with:
"my-layout": {
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "ABC_RENDERED_DOCUMENT",
"version": "1.0",
"document": {
"type": "APL",
"version": "1.0",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"mainTemplate": {
"description": "********* Minimal APL document **********",
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"alignItems": "center",
"justifyContent": "center",
"items": [
{
"type": "AlexaHeader",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "orange",
"headerTitle": "${payload.visualProperties.title}",
"headerSubtitle":"${payload.visualProperties.subtitle}",
"headerAttributionText": "photos by Pexels.com",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true,
"headerDivider": true
},
{
"type": "Image",
"source": "${payload.visualProperties.background}",
"position": "absolute",
"width": "100vw",
"height": "100vh",
"scale": "best-fit"
}
]
}
]
}
},
"datasources": {
"visualProperties": {
"background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
"title": "",
"subtitle": ""
}
}
}

Answer 1

Seems you have the absolute positioning set so that the image will go on top of your header (you just need to swap the order) as well as a few other items that needs tweaking.
I might misinterpreted your requirements but below is my best guess of what you want. Let me know if you want any tweaks.
"my-layout": {
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "ABC_RENDERED_DOCUMENT",
"version": "1.0",
"document": {
"type": "APL",
"version": "1.0",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"mainTemplate": {
"description": "********* Minimal APL document **********",
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"items": [
{
"type": "AlexaHeader",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "orange",
"headerTitle": "${payload.visualProperties.title}",
"headerSubtitle": "${payload.visualProperties.subtitle}",
"headerAttributionText": "photos by Pexels.com",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true
},
{
"type": "Image",
"source": "${payload.visualProperties.background}",
"width": "100vw",
"height": "100vh",
"scale": "best-fit",
"align": "bottom"
}
]
}
]
}
},
"datasources": {
"visualProperties": {
"background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
"title": "Header",
"subtitle": "Header Subtitle"
}
}
}