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

goldzulu · Accepted Answer · 2020-05-14T12:42:23.887

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

I had to change the "scale" property of the image to "best-fit". Unfortunately, the image component is not being resized to fit beneaht the header component. Instead, the header component clips the top of the image so you can't see the top 10% of the image. In other words, the header component is laying "on top" of the image component and hiding the part of the image it occludes. — Robert Oschler, May 14 '20 at 12:20
May i know why you needed best fit because best fit cause black borders around the image unless you are using a different image than the one in the document. Also to correct the overlapping, just remove the absolute position on image and swap around the order. I've adjusted the answer to reflect this. — goldzulu, May 14 '20 at 12:43
Without best fit it stretches the image and it looks bad. I know about the black borders, that's the price for preserving aspect ratio and decent size. I can fix that by editing the image. Stretching and resizing badly are a worse outcome for me. — Robert Oschler, May 14 '20 at 13:06
Yes of course. If you can actually edit the image then a better outcome is remove the "book" to be on it's own and have a additional background element that is the color of your image's background. position the extracted book at the bottom, absolute position the background element. hence no black border, aspect ratio preserved. — goldzulu, May 14 '20 at 13:09

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

1 Answers1