How apply gradient to AlexaHeadline template

Question

I'm trying to apply a simple radial gradient to the AlexaHeadline template. If you set the boolean param backgroundOverlayGradient to true, a linear gradient appears. Official document says:

When true, apply a gradient to the background.

...but I don't know where to set the gradient.

Any ideas?

Thanks for advice!

Answer 1

Found the answer by myself: If your template (like in my case the AlexaHeadline template) does not support a property like "overlayGradient", you can use the "background" property. To use this property, APL version 1.3 is required.

Here's an example document customized from the example of the official docs:

{
  "type": "APL",
  "version": "1.6",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.3.0"
    }
  ],
  "background": {
    "type": "radial",
    "colorRange": [
      "blue",
      "#000061"
    ],
    "inputRange": [
      0,
      1
    ]
  },
  "mainTemplate": {
    "parameters": [
      "headlineData"
    ],
    "items": [
      {
        "type": "AlexaHeadline",
        "primaryText": "${headlineData.primaryText}",
        "secondaryText": "${headlineData.secondaryText}",
        "backgroundColor": "@colorRed800",
        "backgroundImageSource": "https://.png",
        "footerHintText": "${headlineData.footerHintText}",
        "headerAttributionImage": "${headlineData.headerAttributionImage}",
        "headerBackButton": true,
        "headerBackButtonAccessibilityLabel": "back",
        "headerDivider": false,
        "headerSubtitle": "${headlineData.headerSubtitle}",
        "headerTitle": "${headlineData.headerTitle}"
      }
    ]
  }
}

As you see, there's a "fake" backgroundImageSource-Url. Without that, the gradient does not appear. APL uses the backgroundColor property, if there's no proper backgroundImageSource. So, i think, backgroundColor overrides the background property, if it's used. I tried to apply gradient on the backgroundColor property, but that does not work for me.