Here is the Voice Flow Touch option.
The APL Document for the touch part is here.
{
"document": {
"type": "APL",
"version": "1.4",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.1.0"
}
],
"resources": [],
"styles": {
"mainText": {
"values": {
"color": "#FFFFFF",
"fontFamily": "Amazon Ember Light",
"fontSize": "48px",
"fontWeight": "300"
}
},
"subText": {
"values": {
"paddingTop": "32px",
"fontSize": "28px",
"color": "#FFFFFF",
"fontFamily": "Amazon Ember Light",
"fontWeight": "300"
}
},
"button": {
"values": {
"backgroundColor": "rgba(255, 255, 255, 0.3)",
"borderRadius": "33",
"width": "200px",
"height": "66px"
}
},
"buttonText": {
"values": {
"color": "rgba(255, 255, 255, 0.3)",
"fontSize": "32px",
"fontFamily": "Bookerly Italic"
}
}
},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100vw",
"height": "100vh",
"items": [
{
"type": "AlexaHeader",
"headerTitle": "Cat Details",
"headerBackgroundColor": "red"
},
{
"type": "Container",
"item": [
{
"type": "Video",
"width": "0vw",
"height": "0vh",
"id": "DummyVideo1",
"source": "https://i.imgur.com/1UA2367.mp4",
"onEnd": [
{
"type": "SendEvent",
"id": "DummyVideo1",
"arguments": [
"voiceFlowVideoEnded"
]
}
]
},
{
"type": "Video",
"width": "0vw",
"height": "0vh",
"id": "DummyVideo2",
"source": "https://i.imgur.com/Eybk4eu.mp4",
"onEnd": [
{
"type": "SendEvent",
"id": "DummyVideo2",
"arguments": [
"voiceFlowVideoEnded"
]
}
]
}
],
"direction": "row"
},
{
"type": "Container",
"direction": "row",
"paddingLeft": "64dp",
"paddingRight": "72dp",
"paddingTop": "34px",
"grow": 1,
"shrink": 1,
"height": "100vh",
"items": [
{
"type": "Container",
"direction": "column",
"alignItems": "end",
"items": [
{
"type": "Container",
"direction": "row",
"justifyContent": "end",
"items": [
{
"type": "TouchWrapper",
"onPress": [
{
"type": "SendEvent",
"arguments": [
"voiceFlowVideoEnded"
]
}
],
"paddingTop": "55px",
"item": [
{
"type": "Frame",
"style": "button",
"width": "15vw",
"height": "10vh",
"item": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"justifyContent": "center",
"alignItems": "center",
"items": [
{
"type": "Text",
"style": "buttonText",
"text": "Cat Breed",
"color": "white"
}
],
"shadowColor": "green"
}
],
"backgroundColor": "red"
}
]
},
{
"type": "TouchWrapper",
"onPress": [
{
"type": "SendEvent",
"arguments": [
"voiceFlowVideoEnded"
]
}
],
"paddingTop": "55px",
"paddingLeft": "16px",
"item": [
{
"type": "Frame",
"style": "button",
"width": "15vw",
"height": "10vh",
"item": [
{
"type": "Container",
"justifyContent": "center",
"alignItems": "center",
"width": "100%",
"height": "100%",
"items": [
{
"type": "Text",
"style": "buttonText",
"text": "Country",
"color": "white"
}
]
}
],
"backgroundColor": "green"
}
]
}
]
}
]
}
]
}
]
}
]
}
},
"datasources": {}
}
As you can see the touch works. But there is a problem with the second button, which displays the same content. Need help / advise on how to fix this (how to do multiple selections)…