Alexa APL. Problems getting AlexaHeader component to sit atop single Image component?

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"
        }
    }
}